kaiquecruz-ionic2-calendar-clickacai
Version:
Ionic2 calendar component
164 lines • 16.2 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.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.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.hourParts = 60 / this.step;
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: "<ng-template #monthviewDefaultDisplayEventTemplate let-view=\"view\" let-row=\"row\" let-col=\"col\"> {{view.dates[row*7+col].label}} </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 <div class=\"container\">\n <ion-item-group>\n\n <ion-item *ngIf=\"selectedDate?.events.length>0\">\n <ion-label><b>Cancelar</b></ion-label>\n <ion-toggle mode=\"ios\" checked=\"false\"></ion-toggle>\n </ion-item>\n\n <ion-item no-lines *ngFor=\"let event of selectedDate?.events\"> \n <ion-label text-wrap>\n {{event.qdt}}x {{event.title}} \n </ion-label> \n <ion-note item-end>{{event.valor_item | currency: 'R$ '}}</ion-note> \n </ion-item>\n\n <div class=\"section-div\" *ngIf=\"selectedDate?.events.length>0\">\n <p class=\"section-title\">Endere\u00E7o de Entrega</p>\n\n <ion-item no-lines text-wrap>\n <ion-label>\n <h2>Casa</h2>\n <p><b>Endere\u00E7o:</b> rua dsdhskdsd, Batista campos, Bel\u00E9m - PA, N\u00BA 23</p>\n </ion-label>\n </ion-item>\n </div>\n\n <ion-item *ngIf=\"selectedDate?.events.length==0\">\n <div class=\"no-events-label\">{{noEventsLabel}}</div>\n </ion-item>\n </ion-item-group>\n </div>\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 <div [ngSwitch]=\"calendarMode\" class=\"{{calendarMode}}view-container\"> <monthview *ngSwitchCase=\"'month'\" [formatDay]=\"formatDay\" [formatDayHeader]=\"formatDayHeader\" [formatMonthTitle]=\"formatMonthTitle\" [startingDayMonth]=\"startingDayMonth\" [showEventDetail]=\"showEventDetail\" [noEventsLabel]=\"noEventsLabel\" [autoSelect]=\"autoSelect\" [eventSource]=\"eventSource\" [markDisabled]=\"markDisabled\" [monthviewDisplayEventTemplate]=\"monthviewDisplayEventTemplate||monthviewDefaultDisplayEventTemplate\" [monthviewInactiveDisplayEventTemplate]=\"monthviewInactiveDisplayEventTemplate||monthviewDefaultDisplayEventTemplate\" [monthviewEventDetailTemplate]=\"monthviewEventDetailTemplate||monthviewDefaultEventDetailTemplate\" [locale]=\"locale\" [dateFormatter]=\"dateFormatter\" [dir]=\"dir\" [lockSwipeToPrev]=\"lockSwipeToPrev\" [lockSwipes]=\"lockSwipes\" [spaceBetween]=\"spaceBetween\" (onRangeChanged)=\"rangeChanged($event)\" (onEventSelected)=\"eventSelected($event)\" (onTimeSelected)=\"timeSelected($event)\" (onTitleChanged)=\"titleChanged($event)\"> </monthview> <weekview *ngSwitchCase=\"'week'\" [formatWeekTitle]=\"formatWeekTitle\" [formatWeekViewDayHeader]=\"formatWeekViewDayHeader\" [formatHourColumn]=\"formatHourColumn\" [startingDayWeek]=\"startingDayWeek\" [allDayLabel]=\"allDayLabel\" [hourParts]=\"hourParts\" [eventSource]=\"eventSource\" [markDisabled]=\"markDisabled\" [weekviewAllDayEventTemplate]=\"weekviewAllDayEventTemplate||defaultAllDayEventTemplate\" [weekviewNormalEventTemplate]=\"weekviewNormalEventTemplate||defaultNormalEventTemplate\" [locale]=\"locale\" [dateFormatter]=\"dateFormatter\" [dir]=\"dir\" [scrollToHour]=\"scrollToHour\" [preserveScrollPosition]=\"preserveScrollPosition\" [lockSwipeToPrev]=\"lockSwipeToPrev\" [lockSwipes]=\"lockSwipes\" [startHour]=\"startHour\" [endHour]=\"endHour\" [spaceBetween]=\"spaceBetween\" (onRangeChanged)=\"rangeChanged($event)\" (onEventSelected)=\"eventSelected($event)\" (onTimeSelected)=\"timeSelected($event)\" (onTitleChanged)=\"titleChanged($event)\"> </weekview> <dayview *ngSwitchCase=\"'day'\" [formatDayTitle]=\"formatDayTitle\" [formatHourColumn]=\"formatHourColumn\" [allDayLabel]=\"allDayLabel\" [hourParts]=\"hourParts\" [eventSource]=\"eventSource\" [markDisabled]=\"markDisabled\" [dayviewAllDayEventTemplate]=\"dayviewAllDayEventTemplate||defaultAllDayEventTemplate\" [dayviewNormalEventTemplate]=\"dayviewNormalEventTemplate||defaultNormalEventTemplate\" [locale]=\"locale\" [dateFormatter]=\"dateFormatter\" [dir]=\"dir\" [scrollToHour]=\"scrollToHour\" [preserveScrollPosition]=\"preserveScrollPosition\" [lockSwipeToPrev]=\"lockSwipeToPrev\" [lockSwipes]=\"lockSwipes\" [startHour]=\"startHour\" [endHour]=\"endHour\" [spaceBetween]=\"spaceBetween\" (onRangeChanged)=\"rangeChanged($event)\" (onEventSelected)=\"eventSelected($event)\" (onTimeSelected)=\"timeSelected($event)\" (onTitleChanged)=\"titleChanged($event)\"> </dayview> </div>",
styles: [":host > div { height: 100%; } .event-detail-container { border-top: 2px darkgrey solid; } .no-events-label { font-weight: bold; color: darkgrey; text-align: center; } .event-detail { cursor: pointer; white-space: nowrap; text-overflow: ellipsis; } .monthview-eventdetail-timecolumn { width: 110px; overflow: hidden; } .calendar-event-inner { overflow: hidden; background-color: #3a87ad; color: white; height: 100%; width: 100%; padding: 2px; line-height: 15px; } @media (max-width: 750px) { .calendar-event-inner { font-size: 12px; } }\n .container ul {\n margin: 0;\n padding: 0px;\n list-style: none;\n position: relative;\n color: #fff;\n font-size: 13px;\n border: none!important;\n }\n .container ul:before {\n content: \"\";\n width: 1px;\n height: 100%;\n position: absolute;\n border-left: 2px dashed #000;\n margin-left: 36px;\n }\n .container ul li {\n position: relative;\n margin-left: 65px;\n }\n .container ul li:not(:first-child) {\n margin-top: 60px;\n }\n .container ul li > span {\n width: 2px;\n height: 100%;\n left: -30px;\n top: 0;\n position: absolute;\n }\n .container ul li > span:before, .container ul li > span:after {\n content: \"\";\n width: 8px;\n height: 8px;\n border-radius: 50%;\n border: 2px solid #000;\n position: absolute;\n background: #400440;\n left: -5px;\n top: 0;\n }\n .container ul li span:after {\n top: 100%;\n }\n .container ul li > div {\n margin-left: 10px;\n }\n .container div .title, .container div .type {\n font-weight: 600;\n }\n .container div .info {\n font-weight: 300;\n }\n .container div > div {\n margin-top: 5px;\n }\n .container span.number {\n height: 100%;\n }\n .container span.number span {\n position: absolute;\n font-size: 10px;\n left: -35px;\n font-weight: bold;\n color: #000;\n }\n .container span.number span:first-child {\n top: 0;\n }\n .container span.number span:last-child {\n top: 100%; \n }\n .container ion-item .item-inner{\n border: none!important;\n }\n .item.item-block {\n background: transparent!important;\n border: none!important;\n padding: 0px!important;\n margin: 0px!important;\n }\n .item-inner {\n border: none!important;\n background: transparent!important;\n padding: 0px!important;\n margin: 0px!important;\n }\n .input-wrapper ion-label {\n border: none!important;\n padding: 0px!important;\n margin: 0px!important;\n }\n .input-wrapper {\n border: none!important;\n background: transparent!important;\n padding: 0px!important;\n margin: 0px!important;\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 },],
'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