import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
// We will create our own calendar UI or view from scratch.
// This basic calendar will very simple,
// it just Month header with previous and next month button.
date: any; // date for calendar to show
daysInThisMonth: any;
daysInLastMonth: any;
daysInNextMonth: any;
monthNames: string[]; // array of month'name
currentMonth: any; // current month
currentYear: any; // current year
currentDate: any; // current date
constructor(public navCtrl: NavController) {
this.currentDate = new Date();
this.monthNames = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
this.currentMonth = this.monthNames[this.currentDate.getMonth()];
this.currentYear = this.currentDate.getFullYear();
this.date = this.currentDate;
this.getDaysOfMonth();
}
// function for push calendar date items to the arrays
// that will be displaying the full calendar date.
getDaysOfMonth() {
this.daysInThisMonth = new Array();
this.daysInLastMonth = new Array();
this.daysInNextMonth = new Array();
this.currentMonth = this.monthNames[this.date.getMonth()];
this.currentYear = this.date.getFullYear();
if(this.date.getMonth() === new Date().getMonth()) {
this.currentDate = new Date().getDate();
} else {
this.currentDate = 999;
}
var firstDayThisMonth = new Date(this.date.getFullYear(), this.date.getMonth(), 1).getDay();
var prevNumOfDays = new Date(this.date.getFullYear(), this.date.getMonth(), 0).getDate();
for(var i = prevNumOfDays-(firstDayThisMonth-1); i <= prevNumOfDays; i++) {
this.daysInLastMonth.push(i);
}
var thisNumOfDays = new Date(this.date.getFullYear(), this.date.getMonth()+1, 0).getDate();
for (var i = 0; i < thisNumOfDays; i++) {
this.daysInThisMonth.push(i+1);
}
var lastDayThisMonth = new Date(this.date.getFullYear(), this.date.getMonth()+1, 0).getDay();
var nextNumOfDays = new Date(this.date.getFullYear(), this.date.getMonth()+2, 0).getDate();
for (var i = 0; i < (6-lastDayThisMonth); i++) {
this.daysInNextMonth.push(i+1);
}
var totalDays = this.daysInLastMonth.length+this.daysInThisMonth.length+this.daysInNextMonth.length;
if(totalDays<36) {
for(var i = (7-lastDayThisMonth); i < ((7-lastDayThisMonth)+7); i++) {
this.daysInNextMonth.push(i);
}
}
}
// Now, add the function for previous month button action.
goToLastMonth() {
this.date = new Date(this.date.getFullYear(), this.date.getMonth(), 0);
this.getDaysOfMonth();
}
// Also for the next month button action.
goToNextMonth() {
this.date = new Date(this.date.getFullYear(), this.date.getMonth()+2, 0);
this.getDaysOfMonth();
}
}