vendor-app/src/app/schedules/schedules.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
	selector: 'app-schedules',
	templateUrl: './schedules.component.html',
	styleUrls: ['./schedules.component.scss']
})
export class SchedulesComponent implements OnInit {
	currentDate: number;
	currentMonth: string;
	selectedDate: number;
    selectedMonth: string;
    selectedYear: number;
    dayMap: Array<string> = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
    monthMap: Array<string> = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
    preceedingDays: Array<number> = [];
    succeedingDays: Array<number> = [];
    selectedMonthDays: Array<number> = [];
	selectedTab: string = 'holiday';

	constructor() { }

	ngOnInit() {
		this.selectedMonth = this.monthMap[(new Date()).getMonth()];
        this.selectedYear = (new Date()).getFullYear();
		this.currentDate = new Date().getDate();
		this.currentMonth = this.monthMap[(new Date()).getMonth()];
        this.renderCalendar();
	}

	selectDay(selectedMonthDay: number) {
		this.selectedDate = selectedMonthDay;
	}

	renderCalendar() {
        // Generate dates for the calendar
        let i = 1,
            no_of_preceeding_days,
            no_of_days_in_selected_month,
            no_of_succeeding_days,
            last_date_of_previous_month,
            first_date_of_selected_month,
            last_date_of_selected_month;

        first_date_of_selected_month = new Date(this.selectedYear, this.monthMap.indexOf(this.selectedMonth), 1);

        // Add one month, and subtract one day to the selected month and year
        last_date_of_selected_month = new Date(this.selectedYear, this.monthMap.indexOf(this.selectedMonth) + 1, 0);
        last_date_of_previous_month = new Date(this.selectedYear, this.monthMap.indexOf(this.selectedMonth), 0);

        no_of_preceeding_days = first_date_of_selected_month.getDay();
        no_of_days_in_selected_month = last_date_of_selected_month.getDate();
        no_of_succeeding_days = 6 - last_date_of_selected_month.getDay();

        this.preceedingDays = [];
        this.selectedMonthDays = [];
        this.succeedingDays = [];

        for (i = no_of_preceeding_days - 1; i >= 0; i -= 1) {
            this.preceedingDays.push(last_date_of_previous_month.getDate() - i);
        }

        for (i = 1; i <= no_of_days_in_selected_month; i += 1) {
            this.selectedMonthDays.push(i);
        }

        for (i = 1; i <= no_of_succeeding_days; i += 1) {
            this.succeedingDays.push(i);
        }
    }

	selectNextMonth() {
        let next_month_index = (this.monthMap.indexOf(this.selectedMonth) + 1) % this.monthMap.length;
        this.selectedMonth = this.monthMap[next_month_index];
        if (next_month_index == 0) {
            this.selectedYear += 1;
        }

        this.renderCalendar();
    }

	selectPreviousMonth() {
        let previous_month_index = (this.monthMap.indexOf(this.selectedMonth) + (this.monthMap.length - 1)) % this.monthMap.length;
        this.selectedMonth = this.monthMap[previous_month_index];
        if (previous_month_index == (this.monthMap.length - 1)) {
            this.selectedYear -= 1;
        }

        this.renderCalendar();
    }

}