ionic3-calendar3
Version:
Ionic3 calendar component
174 lines • 16.8 kB
JavaScript
import { Component, EventEmitter, Input, Output, Inject, LOCALE_ID } from '@angular/core';
import { CalendarService } from './calendar.service';
export var Step;
(function (Step) {
Step[Step["QuarterHour"] = 15] = "QuarterHour";
Step[Step["HalfHour"] = 30] = "HalfHour";
Step[Step["Hour"] = 60] = "Hour";
})(Step || (Step = {}));
var CalendarComponent = (function () {
function CalendarComponent(calendarService, appLocale) {
this.calendarService = calendarService;
this.appLocale = appLocale;
this.eventSource = [];
this.calendarMode = 'month';
this.formatDay = 'd';
this.formatDayHeader = 'EEE';
this.formatDayTitle = 'MMMM dd, yyyy';
this.formatWeekTitle = 'MMMM yyyy, Week $n';
this.formatMonthTitle = 'MMMM yyyy';
this.formatWeekViewDayHeader = 'EEE d';
this.formatHourColumn = 'j';
this.showEventDetail = true;
this.startingDayMonth = 0;
this.startingDayWeek = 0;
this.allDayLabel = 'all day';
this.noEventsLabel = 'No Events';
this.queryMode = 'local';
this.step = Step.Hour;
this.timeInterval = 60;
this.autoSelect = true;
this.dir = "";
this.scrollToHour = 0;
this.preserveScrollPosition = false;
this.lockSwipeToPrev = false;
this.lockSwipes = false;
this.locale = "";
this.startHour = 0;
this.endHour = 24;
this.spaceBetween = 0;
this.onCurrentDateChanged = new EventEmitter();
this.onRangeChanged = new EventEmitter();
this.onEventSelected = new EventEmitter();
this.onTimeSelected = new EventEmitter();
this.onTitleChanged = new EventEmitter();
this.hourParts = 1;
this.hourSegments = 1;
this.locale = appLocale;
}
Object.defineProperty(CalendarComponent.prototype, "currentDate", {
get: function () {
return this._currentDate;
},
set: function (val) {
if (!val) {
val = new Date();
}
this._currentDate = val;
this.calendarService.setCurrentDate(val, true);
this.onCurrentDateChanged.emit(this._currentDate);
},
enumerable: true,
configurable: true
});
CalendarComponent.prototype.ngOnInit = function () {
var _this = this;
if (this.autoSelect) {
if (this.autoSelect.toString() === 'false') {
this.autoSelect = false;
}
else {
this.autoSelect = true;
}
}
this.hourSegments = 60 / this.timeInterval;
this.hourParts = 60 / this.step;
if (this.hourParts <= this.hourSegments) {
this.hourParts = 1;
}
else {
this.hourParts = this.hourParts / this.hourSegments;
}
this.startHour = parseInt(this.startHour.toString());
this.endHour = parseInt(this.endHour.toString());
this.calendarService.queryMode = this.queryMode;
this.currentDateChangedFromChildrenSubscription = this.calendarService.currentDateChangedFromChildren$.subscribe(function (currentDate) {
_this._currentDate = currentDate;
_this.onCurrentDateChanged.emit(currentDate);
});
};
CalendarComponent.prototype.ngOnDestroy = function () {
if (this.currentDateChangedFromChildrenSubscription) {
this.currentDateChangedFromChildrenSubscription.unsubscribe();
this.currentDateChangedFromChildrenSubscription = null;
}
};
CalendarComponent.prototype.rangeChanged = function (range) {
this.onRangeChanged.emit(range);
};
CalendarComponent.prototype.eventSelected = function (event) {
this.onEventSelected.emit(event);
};
CalendarComponent.prototype.timeSelected = function (timeSelected) {
this.onTimeSelected.emit(timeSelected);
};
CalendarComponent.prototype.titleChanged = function (title) {
this.onTitleChanged.emit(title);
};
CalendarComponent.prototype.loadEvents = function () {
this.calendarService.loadEvents();
};
return CalendarComponent;
}());
export { CalendarComponent };
CalendarComponent.decorators = [
{ type: Component, args: [{
selector: 'calendar',
template: "\n <ng-template #monthviewDefaultDisplayEventTemplate let-view=\"view\" let-row=\"row\" let-col=\"col\">\n {{view.dates[row*7+col].label}}\n </ng-template>\n <ng-template #monthviewDefaultEventDetailTemplate let-showEventDetail=\"showEventDetail\" let-selectedDate=\"selectedDate\" let-noEventsLabel=\"noEventsLabel\">\n <ion-list class=\"event-detail-container\" has-bouncing=\"false\" *ngIf=\"showEventDetail\" overflow-scroll=\"false\">\n <ion-item *ngFor=\"let event of selectedDate?.events\" (click)=\"eventSelected(event)\">\n <span *ngIf=\"!event.allDay\" class=\"monthview-eventdetail-timecolumn\">{{event.startTime|date: 'HH:mm'}}\n -\n {{event.endTime|date: 'HH:mm'}}\n </span>\n <span *ngIf=\"event.allDay\" class=\"monthview-eventdetail-timecolumn\">{{allDayLabel}}</span>\n <span class=\"event-detail\"> | {{event.title}}</span>\n </ion-item>\n <ion-item *ngIf=\"selectedDate?.events.length==0\">\n <div class=\"no-events-label\">{{noEventsLabel}}</div>\n </ion-item>\n </ion-list>\n </ng-template>\n <ng-template #defaultAllDayEventTemplate let-displayEvent=\"displayEvent\">\n <div class=\"calendar-event-inner\">{{displayEvent.event.title}}</div>\n </ng-template>\n <ng-template #defaultNormalEventTemplate let-displayEvent=\"displayEvent\">\n <div class=\"calendar-event-inner\">{{displayEvent.event.title}}</div>\n </ng-template>\n <ng-template #defaultWeekViewAllDayEventSectionTemplate let-day=\"day\" let-eventTemplate=\"eventTemplate\">\n <div [ngClass]=\"{'calendar-event-wrap': day.events}\" *ngIf=\"day.events\"\n [ngStyle]=\"{height: 25*day.events.length+'px'}\">\n <div *ngFor=\"let displayEvent of day.events\" class=\"calendar-event\" tappable\n (click)=\"eventSelected(displayEvent.event)\"\n [ngStyle]=\"{top: 25*displayEvent.position+'px', width: 100*(displayEvent.endIndex-displayEvent.startIndex)+'%', height: '25px'}\">\n <ng-template [ngTemplateOutlet]=\"eventTemplate\"\n [ngTemplateOutletContext]=\"{displayEvent:displayEvent}\">\n </ng-template>\n </div>\n </div>\n </ng-template>\n <ng-template #defaultDayViewAllDayEventSectionTemplate let-allDayEvents=\"allDayEvents\" let-eventTemplate=\"eventTemplate\">\n <div *ngFor=\"let displayEvent of allDayEvents; let eventIndex=index\"\n class=\"calendar-event\" tappable\n (click)=\"eventSelected(displayEvent.event)\"\n [ngStyle]=\"{top: 25*eventIndex+'px',width: '100%',height:'25px'}\">\n <ng-template [ngTemplateOutlet]=\"eventTemplate\"\n [ngTemplateOutletContext]=\"{displayEvent:displayEvent}\">\n </ng-template>\n </div>\n </ng-template>\n <ng-template #defaultNormalEventSectionTemplate let-tm=\"tm\" let-hourParts=\"hourParts\" let-eventTemplate=\"eventTemplate\">\n <div [ngClass]=\"{'calendar-event-wrap': tm.events}\" *ngIf=\"tm.events\">\n <div *ngFor=\"let displayEvent of tm.events\" class=\"calendar-event\" tappable\n (click)=\"eventSelected(displayEvent.event)\"\n [ngStyle]=\"{top: (37*displayEvent.startOffset/hourParts)+'px',left: 100/displayEvent.overlapNumber*displayEvent.position+'%', width: 100/displayEvent.overlapNumber+'%', height: 37*(displayEvent.endIndex -displayEvent.startIndex - (displayEvent.endOffset + displayEvent.startOffset)/hourParts)+'px'}\">\n <ng-template [ngTemplateOutlet]=\"eventTemplate\"\n [ngTemplateOutletContext]=\"{displayEvent:displayEvent}\">\n </ng-template>\n </div>\n </div>\n </ng-template>\n\n <div [ngSwitch]=\"calendarMode\" class=\"{{calendarMode}}view-container\">\n <monthview *ngSwitchCase=\"'month'\"\n [formatDay]=\"formatDay\"\n [formatDayHeader]=\"formatDayHeader\"\n [formatMonthTitle]=\"formatMonthTitle\"\n [startingDayMonth]=\"startingDayMonth\"\n [showEventDetail]=\"showEventDetail\"\n [noEventsLabel]=\"noEventsLabel\"\n [autoSelect]=\"autoSelect\"\n [eventSource]=\"eventSource\"\n [markDisabled]=\"markDisabled\"\n [monthviewDisplayEventTemplate]=\"monthviewDisplayEventTemplate||monthviewDefaultDisplayEventTemplate\"\n [monthviewInactiveDisplayEventTemplate]=\"monthviewInactiveDisplayEventTemplate||monthviewDefaultDisplayEventTemplate\"\n [monthviewEventDetailTemplate]=\"monthviewEventDetailTemplate||monthviewDefaultEventDetailTemplate\"\n [locale]=\"locale\"\n [dateFormatter]=\"dateFormatter\"\n [dir]=\"dir\"\n [lockSwipeToPrev]=\"lockSwipeToPrev\"\n [lockSwipes]=\"lockSwipes\"\n [spaceBetween]=\"spaceBetween\" \n (onRangeChanged)=\"rangeChanged($event)\"\n (onEventSelected)=\"eventSelected($event)\"\n (onTimeSelected)=\"timeSelected($event)\"\n (onTitleChanged)=\"titleChanged($event)\">\n </monthview>\n <weekview *ngSwitchCase=\"'week'\"\n [formatWeekTitle]=\"formatWeekTitle\"\n [formatWeekViewDayHeader]=\"formatWeekViewDayHeader\"\n [formatHourColumn]=\"formatHourColumn\"\n [startingDayWeek]=\"startingDayWeek\"\n [allDayLabel]=\"allDayLabel\"\n [hourParts]=\"hourParts\"\n [hourSegments]=\"hourSegments\"\n [eventSource]=\"eventSource\"\n [markDisabled]=\"markDisabled\"\n [weekviewAllDayEventTemplate]=\"weekviewAllDayEventTemplate||defaultAllDayEventTemplate\"\n [weekviewNormalEventTemplate]=\"weekviewNormalEventTemplate||defaultNormalEventTemplate\"\n [weekviewAllDayEventSectionTemplate]=\"weekviewAllDayEventSectionTemplate||defaultWeekViewAllDayEventSectionTemplate\"\n [weekviewNormalEventSectionTemplate]=\"weekviewNormalEventSectionTemplate||defaultNormalEventSectionTemplate\"\n [locale]=\"locale\"\n [dateFormatter]=\"dateFormatter\"\n [dir]=\"dir\"\n [scrollToHour]=\"scrollToHour\"\n [preserveScrollPosition]=\"preserveScrollPosition\"\n [lockSwipeToPrev]=\"lockSwipeToPrev\"\n [lockSwipes]=\"lockSwipes\"\n [startHour]=\"startHour\"\n [endHour]=\"endHour\"\n [spaceBetween]=\"spaceBetween\"\n (onRangeChanged)=\"rangeChanged($event)\"\n (onEventSelected)=\"eventSelected($event)\"\n (onTimeSelected)=\"timeSelected($event)\"\n (onTitleChanged)=\"titleChanged($event)\">\n </weekview>\n <dayview *ngSwitchCase=\"'day'\"\n [formatDayTitle]=\"formatDayTitle\"\n [formatHourColumn]=\"formatHourColumn\"\n [allDayLabel]=\"allDayLabel\"\n [hourParts]=\"hourParts\"\n [hourSegments]=\"hourSegments\"\n [eventSource]=\"eventSource\"\n [markDisabled]=\"markDisabled\"\n [dayviewAllDayEventTemplate]=\"dayviewAllDayEventTemplate||defaultAllDayEventTemplate\"\n [dayviewNormalEventTemplate]=\"dayviewNormalEventTemplate||defaultNormalEventTemplate\" \n [dayviewAllDayEventSectionTemplate]=\"dayviewAllDayEventSectionTemplate||defaultDayViewAllDayEventSectionTemplate\" \n [dayviewNormalEventSectionTemplate]=\"dayviewNormalEventSectionTemplate||defaultNormalEventSectionTemplate\"\n [locale]=\"locale\"\n [dateFormatter]=\"dateFormatter\"\n [dir]=\"dir\"\n [scrollToHour]=\"scrollToHour\"\n [preserveScrollPosition]=\"preserveScrollPosition\"\n [lockSwipeToPrev]=\"lockSwipeToPrev\"\n [lockSwipes]=\"lockSwipes\"\n [startHour]=\"startHour\"\n [endHour]=\"endHour\"\n [spaceBetween]=\"spaceBetween\"\n (onRangeChanged)=\"rangeChanged($event)\"\n (onEventSelected)=\"eventSelected($event)\"\n (onTimeSelected)=\"timeSelected($event)\"\n (onTitleChanged)=\"titleChanged($event)\">\n </dayview>\n </div>\n ",
styles: ["\n :host > div { height: 100%; }\n\n .event-detail-container {\n border-top: 2px darkgrey solid;\n }\n\n .no-events-label {\n font-weight: bold;\n color: darkgrey;\n text-align: center;\n }\n\n .event-detail {\n cursor: pointer;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n .monthview-eventdetail-timecolumn {\n width: 110px;\n overflow: hidden;\n }\n\n .calendar-event-inner {\n overflow: hidden;\n background-color: #3a87ad;\n color: white;\n height: 100%;\n width: 100%;\n padding: 2px;\n line-height: 15px;\n }\n\n @media (max-width: 750px) {\n .calendar-event-inner {\n font-size: 12px;\n }\n }\n "],
providers: [CalendarService]
},] },
];
CalendarComponent.ctorParameters = function () { return [
{ type: CalendarService, },
{ type: undefined, decorators: [{ type: Inject, args: [LOCALE_ID,] },] },
]; };
CalendarComponent.propDecorators = {
'currentDate': [{ type: Input },],
'eventSource': [{ type: Input },],
'calendarMode': [{ type: Input },],
'formatDay': [{ type: Input },],
'formatDayHeader': [{ type: Input },],
'formatDayTitle': [{ type: Input },],
'formatWeekTitle': [{ type: Input },],
'formatMonthTitle': [{ type: Input },],
'formatWeekViewDayHeader': [{ type: Input },],
'formatHourColumn': [{ type: Input },],
'showEventDetail': [{ type: Input },],
'startingDayMonth': [{ type: Input },],
'startingDayWeek': [{ type: Input },],
'allDayLabel': [{ type: Input },],
'noEventsLabel': [{ type: Input },],
'queryMode': [{ type: Input },],
'step': [{ type: Input },],
'timeInterval': [{ type: Input },],
'autoSelect': [{ type: Input },],
'markDisabled': [{ type: Input },],
'monthviewDisplayEventTemplate': [{ type: Input },],
'monthviewInactiveDisplayEventTemplate': [{ type: Input },],
'monthviewEventDetailTemplate': [{ type: Input },],
'weekviewAllDayEventTemplate': [{ type: Input },],
'weekviewNormalEventTemplate': [{ type: Input },],
'dayviewAllDayEventTemplate': [{ type: Input },],
'dayviewNormalEventTemplate': [{ type: Input },],
'weekviewAllDayEventSectionTemplate': [{ type: Input },],
'weekviewNormalEventSectionTemplate': [{ type: Input },],
'dayviewAllDayEventSectionTemplate': [{ type: Input },],
'dayviewNormalEventSectionTemplate': [{ type: Input },],
'dateFormatter': [{ type: Input },],
'dir': [{ type: Input },],
'scrollToHour': [{ type: Input },],
'preserveScrollPosition': [{ type: Input },],
'lockSwipeToPrev': [{ type: Input },],
'lockSwipes': [{ type: Input },],
'locale': [{ type: Input },],
'startHour': [{ type: Input },],
'endHour': [{ type: Input },],
'spaceBetween': [{ type: Input },],
'onCurrentDateChanged': [{ type: Output },],
'onRangeChanged': [{ type: Output },],
'onEventSelected': [{ type: Output },],
'onTimeSelected': [{ type: Output },],
'onTitleChanged': [{ type: Output },],
};
//# sourceMappingURL=calendar.js.map