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 = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']; monthMap: Array = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']; preceedingDays: Array = []; succeedingDays: Array = []; selectedMonthDays: Array = []; 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(); } }