ionic2-calendar-scheduler
Version:
Ionic5 calendar scheduler component
202 lines (201 loc) • 10.6 kB
JavaScript
import * as tslib_1 from "tslib";
import { Component, EventEmitter, Input, Output, TemplateRef, Inject, LOCALE_ID } from '@angular/core';
import { CalendarService } from './calendar.service';
export var Step;
(function (Step) {
Step[Step["Hour"] = 60] = "Hour";
})(Step || (Step = {}));
var CalendarComponent = /** @class */ (function () {
function CalendarComponent(calendarService, appLocale) {
var _this = this;
this.calendarService = calendarService;
this.appLocale = appLocale;
this.bookingsSource = [];
this.roomNamesSource = [];
this.calendarMode = 'week';
this.formatWeekTitle = 'MMMM yyyy, \'Saptamana\' w';
this.formatWeekViewDayHeader = 'EEE d';
this.step = Step.Hour;
this.locale = "";
this.onCurrentDateChanged = new EventEmitter();
this.onRangeChanged = new EventEmitter();
this.onEventSelected = new EventEmitter();
this.onTitleChanged = new EventEmitter();
this.loadEvents = function () {
_this.calendarService.loadEvents();
};
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;
this.calendarService.queryMode = 'local';
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.titleChanged = function (title) {
this.onTitleChanged.emit(title);
};
CalendarComponent.prototype.getBackgroundColor = function (status) {
var statusInt = parseInt(status) || status;
if (statusInt == 0) {
return '#d50000';
}
else if (statusInt == 1) {
return '#ffd600';
}
else {
return '#00c853';
}
};
CalendarComponent.prototype.getTextColor = function (status) {
var statusInt = parseInt(status) || status;
if (statusInt == 0) {
return '#ffffff';
}
else if (statusInt == 1) {
return '#000000';
}
else {
return '#000000';
}
};
CalendarComponent.prototype.getEventWidth = function (displayBooking, dayIndex) {
var eventWidth = 0;
if (displayBooking.startedPreviousWeek) {
eventWidth = 50 + (displayBooking.days - 1) * 100;
}
else {
eventWidth = 100 + (displayBooking.days - 2) * 100;
switch (dayIndex) {
case 0:
eventWidth = eventWidth > 700 ? 700 : eventWidth;
break;
case 1:
eventWidth = eventWidth > 550 ? 700 : eventWidth;
break;
case 2:
eventWidth = eventWidth > 450 ? 700 : eventWidth;
break;
case 3:
eventWidth = eventWidth > 350 ? 700 : eventWidth;
break;
case 4:
eventWidth = eventWidth > 250 ? 700 : eventWidth;
break;
case 5:
eventWidth = eventWidth > 150 ? 150 : eventWidth;
break;
case 6:
eventWidth = eventWidth > 50 ? 50 : eventWidth;
break;
}
}
return eventWidth + "%";
};
tslib_1.__decorate([
Input(),
tslib_1.__metadata("design:type", Date),
tslib_1.__metadata("design:paramtypes", [Date])
], CalendarComponent.prototype, "currentDate", null);
tslib_1.__decorate([
Input(),
tslib_1.__metadata("design:type", Array)
], CalendarComponent.prototype, "bookingsSource", void 0);
tslib_1.__decorate([
Input(),
tslib_1.__metadata("design:type", Array)
], CalendarComponent.prototype, "roomNamesSource", void 0);
tslib_1.__decorate([
Input(),
tslib_1.__metadata("design:type", String)
], CalendarComponent.prototype, "calendarMode", void 0);
tslib_1.__decorate([
Input(),
tslib_1.__metadata("design:type", String)
], CalendarComponent.prototype, "formatWeekTitle", void 0);
tslib_1.__decorate([
Input(),
tslib_1.__metadata("design:type", String)
], CalendarComponent.prototype, "formatWeekViewDayHeader", void 0);
tslib_1.__decorate([
Input(),
tslib_1.__metadata("design:type", Number)
], CalendarComponent.prototype, "step", void 0);
tslib_1.__decorate([
Input(),
tslib_1.__metadata("design:type", TemplateRef)
], CalendarComponent.prototype, "weekviewHeaderTemplate", void 0);
tslib_1.__decorate([
Input(),
tslib_1.__metadata("design:type", TemplateRef)
], CalendarComponent.prototype, "weekviewNormalEventTemplate", void 0);
tslib_1.__decorate([
Input(),
tslib_1.__metadata("design:type", TemplateRef)
], CalendarComponent.prototype, "weekviewNormalEventSectionTemplate", void 0);
tslib_1.__decorate([
Input(),
tslib_1.__metadata("design:type", Object)
], CalendarComponent.prototype, "dateFormatter", void 0);
tslib_1.__decorate([
Input(),
tslib_1.__metadata("design:type", String)
], CalendarComponent.prototype, "locale", void 0);
tslib_1.__decorate([
Output(),
tslib_1.__metadata("design:type", Object)
], CalendarComponent.prototype, "onCurrentDateChanged", void 0);
tslib_1.__decorate([
Output(),
tslib_1.__metadata("design:type", Object)
], CalendarComponent.prototype, "onRangeChanged", void 0);
tslib_1.__decorate([
Output(),
tslib_1.__metadata("design:type", Object)
], CalendarComponent.prototype, "onEventSelected", void 0);
tslib_1.__decorate([
Output(),
tslib_1.__metadata("design:type", Object)
], CalendarComponent.prototype, "onTitleChanged", void 0);
CalendarComponent = tslib_1.__decorate([
Component({
selector: 'calendar',
template: "\n <ng-template #defaultWeekviewHeaderTemplate let-dayHeader=\"dayHeader\">\n {{ dayHeader[\"dayHeaderString\"] }}\n </ng-template>\n\n <ng-template #defaultNormalEventTemplate let-booking=\"booking\">\n <div class=\"calendar-event-inner\"\n [ngStyle]=\"{ 'background-color' : getBackgroundColor(booking.event.status), 'color' : getTextColor(booking.event.status) }\">{{booking.event.name}}\n <br>{{booking.event.phone}}</div>\n </ng-template>\n\n <ng-template #defaultNormalEventSectionTemplate let-roomDayData=\"roomDayData\" let-dayIndex=\"dayIndex\"\n let-eventTemplate=\"eventTemplate\">\n <div [ngClass]=\"{'calendar-event-wrap': roomDayData['roomEvents']}\" *ngIf=\"roomDayData['roomEvents']\"\n style=\"height: 100%\">\n <div *ngFor=\"let displayBooking of roomDayData['roomEvents']\" class=\"calendar-event-wrap\" tappable\n (click)=\"eventSelected(displayBooking.event)\"\n [ngStyle]=\"{'width': getEventWidth(displayBooking, dayIndex),\n 'height': '100%',\n 'margin-left': displayBooking['startedPreviousWeek'] ? '0%' : '50%'}\">\n <ng-template [ngTemplateOutlet]=\"eventTemplate\"\n [ngTemplateOutletContext]=\"{booking:displayBooking}\"></ng-template>\n </div>\n </div>\n </ng-template>\n\n <div class=\"weekview-container\">\n <weekview [formatViewTitle]=\"formatWeekTitle\"\n [formatWeekViewDayHeader]=\"formatWeekViewDayHeader\"\n [bookingsSource]=\"bookingsSource\"\n [roomNamesSource]=\"roomNamesSource\"\n [weekviewHeaderTemplate]=\"weekviewHeaderTemplate||defaultWeekviewHeaderTemplate\"\n [weekviewNormalEventTemplate]=\"weekviewNormalEventTemplate||defaultNormalEventTemplate\"\n [weekviewNormalEventSectionTemplate]=\"weekviewNormalEventSectionTemplate||defaultNormalEventSectionTemplate\"\n [locale]=\"locale\"\n [dateFormatter]=\"dateFormatter\"\n (onRangeChanged)=\"rangeChanged($event)\"\n (onEventSelected)=\"eventSelected($event)\"\n (onTitleChanged)=\"titleChanged($event)\">\n </weekview>\n </div>",
styles: ["\n :host > div {\n height: 100%;\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 text-align: center;\n text-overflow: ellipsis;\n }\n\n @media (max-width: 750px) {\n .calendar-event-inner {\n font-size: 12px;\n }\n }\n "],
providers: [CalendarService]
}),
tslib_1.__param(1, Inject(LOCALE_ID)),
tslib_1.__metadata("design:paramtypes", [CalendarService, String])
], CalendarComponent);
return CalendarComponent;
}());
export { CalendarComponent };