ion-calendar
Version:
A calendar component made for Ionic 3.x apps
49 lines • 3.71 kB
JavaScript
import { Component, Output, EventEmitter, Input } from '@angular/core';
import { EventCalendar } from '../models';
var IonCalendarComponent = /** @class */ (function () {
function IonCalendarComponent() {
this.daySelected = new EventEmitter();
}
IonCalendarComponent.prototype.ngOnInit = function () {
this.events = this.events || [];
this.date = this.date || new Date();
this.calendar = new EventCalendar(this.date, this.events);
};
IonCalendarComponent.prototype.goToLastMonth = function (day) {
day = day || 1;
this.calendar.goToLastMonth(day);
this.emitDaySelected(this.calendar.date);
};
IonCalendarComponent.prototype.selectDate = function (day) {
this.calendar.goToDateInCurrentMonth(day);
this.emitDaySelected(this.calendar.date);
};
IonCalendarComponent.prototype.goToNextMonth = function (day) {
day = day || 1;
this.calendar.goToNextMonth(day);
this.emitDaySelected(this.calendar.date);
};
IonCalendarComponent.prototype.getEventsOn = function (day) {
var date = new Date(this.calendar.date);
var events = this.calendar.getEventsOn({ year: date.getFullYear(), month: date.getMonth(), day: day });
return events;
};
IonCalendarComponent.prototype.emitDaySelected = function (date) {
this.daySelected.emit(date);
};
IonCalendarComponent.decorators = [
{ type: Component, args: [{
selector: 'ion-calendar',
template: "\n <div class=\"calendar-header\">\n <ion-row class=\"calendar-month\">\n <ion-col col-2 (click)=\"goToLastMonth()\">\n <ion-icon name=\"arrow-back\"></ion-icon>\n </ion-col>\n <ion-col col-8>{{calendar.currentMonth}} {{calendar.currentYear}}</ion-col>\n <ion-col col-2 (click)=\"goToNextMonth()\">\n <ion-icon name=\"arrow-forward\"></ion-icon>\n </ion-col>\n </ion-row>\n </div>\n <div class=\"calendar-body\">\n <ion-grid>\n <ion-row justify-content-center class=\"calendar-weekday\">\n <ion-col>S</ion-col>\n <ion-col>M</ion-col>\n <ion-col>T</ion-col>\n <ion-col>W</ion-col>\n <ion-col>T</ion-col>\n <ion-col>F</ion-col>\n <ion-col>S</ion-col>\n </ion-row>\n <ion-row justify-content-center class=\"calendar-date\">\n <ion-col align-self-center col-1 *ngFor=\"let lastDay of calendar.daysInLastMonth\" class=\"last-month\" (click)=\"goToLastMonth(lastDay)\">{{lastDay}}</ion-col>\n <ion-col align-self-center col-1 *ngFor=\"let day of calendar.daysInThisMonth\" (click)=\"selectDate(day)\">\n <span [ngClass]=\"{'current-date': calendar.currentDate === day}\">{{day}}</span>\n <br>\n <div class=\"bullet-container\" *ngIf=\"true && calendar.currentDate !== day\">\n <div class=\"event-bullet {{'background-' + bullet.color}}\" *ngFor=\"let bullet of getEventsOn(day)\"></div>\n </div>\n </ion-col>\n <ion-col align-self-center col-1 *ngFor=\"let nextDay of calendar.daysInNextMonth\" class=\"next-month\" (click)=\"goToNextMonth(nextDay)\">{{nextDay}}</ion-col>\n </ion-row>\n </ion-grid>\n </div>\n "
},] },
];
/** @nocollapse */
IonCalendarComponent.propDecorators = {
"events": [{ type: Input, args: ['events',] },],
"date": [{ type: Input, args: ['date',] },],
"daySelected": [{ type: Output },],
};
return IonCalendarComponent;
}());
export { IonCalendarComponent };
//# sourceMappingURL=ion.calendar.js.map