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';
	selectedDatePosition: any;
	selectedDatesForSchedule: Array<number> = [];
	showSchedulePopup: boolean = false;
	scheduleType: string = 'change time';
	scheduleFromTime = {
		hour: '09',
		min: '30',
		isBeforeMidday: true
	};
	scheduleToTime = {
		hour: '09',
		min: '00',
		isBeforeMidday: false
	};

    profile_type: string = '';
    profile_info: any;

	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();

        this.profile_type = localStorage.current_login_type;

        if (this.profile_type === 'VENDOR') {
            this.profile_info = JSON.parse(localStorage.vendor_info);
        } else if (this.profile_type === 'OUTLET') {
            this.profile_info = JSON.parse(localStorage.outlet_info);
        }

        console.log(this.profile_info);
	}

	selectDates(dates: Array<number>) {
		this.selectedDatesForSchedule = dates;
	}

	toggleDates(date: number) {
		this.selectedDatesForSchedule.includes(date)? this.selectedDatesForSchedule.splice(this.selectedDatesForSchedule.indexOf(date), 1): this.selectedDatesForSchedule.push(date);
	}

	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();
    }

}