ionic3-calendar3
Version:
Ionic3 calendar component
460 lines • 34.6 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var common_1 = require("@angular/common");
var core_1 = require("@angular/core");
var calendar_service_1 = require("./calendar.service");
var DayViewComponent = (function () {
function DayViewComponent(calendarService, elm) {
this.calendarService = calendarService;
this.elm = elm;
this.class = true;
this.dir = "";
this.scrollToHour = 0;
this.onRangeChanged = new core_1.EventEmitter();
this.onEventSelected = new core_1.EventEmitter();
this.onTimeSelected = new core_1.EventEmitter();
this.onTitleChanged = new core_1.EventEmitter(true);
this.slideOption = {
runCallbacksOnInit: false,
loop: true
};
this.views = [];
this.currentViewIndex = 0;
this.direction = 0;
this.mode = 'day';
this.inited = false;
this.callbackOnInit = true;
}
DayViewComponent.prototype.ngOnInit = function () {
var _this = this;
this.hourRange = (this.endHour - this.startHour) * this.hourSegments;
if (this.dateFormatter && this.dateFormatter.formatDayViewTitle) {
this.formatTitle = this.dateFormatter.formatDayViewTitle;
}
else {
var datePipe = new common_1.DatePipe(this.locale);
this.formatTitle = function (date) {
return datePipe.transform(date, this.formatDayTitle);
};
}
if (this.dateFormatter && this.dateFormatter.formatDayViewHourColumn) {
this.formatHourColumnLabel = this.dateFormatter.formatDayViewHourColumn;
}
else {
var datePipe = new common_1.DatePipe(this.locale);
this.formatHourColumnLabel = function (date) {
return datePipe.transform(date, this.formatHourColumn);
};
}
if (this.lockSwipeToPrev) {
this.slider.lockSwipeToPrev(true);
}
if (this.lockSwipes) {
this.slider.lockSwipes(true);
}
this.refreshView();
this.hourColumnLabels = this.getHourColumnLabels();
this.inited = true;
this.currentDateChangedFromParentSubscription = this.calendarService.currentDateChangedFromParent$.subscribe(function (currentDate) {
_this.refreshView();
});
this.eventSourceChangedSubscription = this.calendarService.eventSourceChanged$.subscribe(function () {
_this.onDataLoaded();
});
};
DayViewComponent.prototype.ngAfterViewInit = function () {
var title = this.getTitle();
this.onTitleChanged.emit(title);
if (this.scrollToHour > 0) {
var hourColumns_1 = this.elm.nativeElement.querySelector('.dayview-normal-event-container').querySelectorAll('.calendar-hour-column');
var me = this;
setTimeout(function () {
me.initScrollPosition = hourColumns_1[me.scrollToHour - me.startHour].offsetTop;
}, 0);
}
};
DayViewComponent.prototype.ngOnChanges = function (changes) {
if (!this.inited)
return;
var eventSourceChange = changes['eventSource'];
if (eventSourceChange && eventSourceChange.currentValue) {
this.onDataLoaded();
}
var lockSwipeToPrev = changes['lockSwipeToPrev'];
if (lockSwipeToPrev) {
this.slider.lockSwipeToPrev(lockSwipeToPrev.currentValue);
}
var lockSwipes = changes['lockSwipes'];
if (lockSwipes) {
this.slider.lockSwipes(lockSwipes.currentValue);
}
};
DayViewComponent.prototype.ngOnDestroy = function () {
if (this.currentDateChangedFromParentSubscription) {
this.currentDateChangedFromParentSubscription.unsubscribe();
this.currentDateChangedFromParentSubscription = null;
}
if (this.eventSourceChangedSubscription) {
this.eventSourceChangedSubscription.unsubscribe();
this.eventSourceChangedSubscription = null;
}
};
DayViewComponent.prototype.onSlideChanged = function () {
if (this.callbackOnInit) {
this.callbackOnInit = false;
return;
}
var currentSlideIndex = this.slider.getActiveIndex(), direction = 0, currentViewIndex = this.currentViewIndex;
currentSlideIndex = (currentSlideIndex + 2) % 3;
if (currentSlideIndex - currentViewIndex === 1) {
direction = 1;
}
else if (currentSlideIndex === 0 && currentViewIndex === 2) {
direction = 1;
this.slider.slideTo(1, 0, false);
}
else if (currentViewIndex - currentSlideIndex === 1) {
direction = -1;
}
else if (currentSlideIndex === 2 && currentViewIndex === 0) {
direction = -1;
this.slider.slideTo(3, 0, false);
}
this.currentViewIndex = currentSlideIndex;
this.move(direction);
};
DayViewComponent.prototype.move = function (direction) {
if (direction === 0)
return;
this.direction = direction;
var adjacentDate = this.calendarService.getAdjacentCalendarDate(this.mode, direction);
this.calendarService.setCurrentDate(adjacentDate);
this.refreshView();
this.direction = 0;
};
DayViewComponent.createDateObjects = function (startTime, startHour, endHour, timeInterval) {
var rows = [], time, currentHour = startTime.getHours(), currentDate = startTime.getDate(), hourStep, minStep;
if (timeInterval < 1) {
hourStep = Math.floor(1 / timeInterval);
minStep = 60;
}
else {
hourStep = 1;
minStep = Math.floor(60 / timeInterval);
}
for (var hour = startHour; hour < endHour; hour += hourStep) {
for (var interval = 0; interval < 60; interval += minStep) {
time = new Date(startTime.getTime());
time.setHours(currentHour + hour, interval);
time.setDate(currentDate);
rows.push({
time: time,
events: []
});
}
}
return rows;
};
DayViewComponent.prototype.getHourColumnLabels = function () {
var hourColumnLabels = [];
for (var hour = 0, length_1 = this.views[0].rows.length; hour < length_1; hour += 1) {
hourColumnLabels.push(this.formatHourColumnLabel(this.views[0].rows[hour].time));
}
return hourColumnLabels;
};
DayViewComponent.prototype.getViewData = function (startTime) {
return {
rows: DayViewComponent.createDateObjects(startTime, this.startHour, this.endHour, this.hourSegments),
allDayEvents: []
};
};
DayViewComponent.prototype.getRange = function (currentDate) {
var year = currentDate.getFullYear(), month = currentDate.getMonth(), date = currentDate.getDate(), startTime = new Date(year, month, date), endTime = new Date(year, month, date + 1);
return {
startTime: startTime,
endTime: endTime
};
};
DayViewComponent.prototype.onDataLoaded = function () {
var eventSource = this.eventSource, len = eventSource ? eventSource.length : 0, startTime = this.range.startTime, endTime = this.range.endTime, utcStartTime = new Date(Date.UTC(startTime.getFullYear(), startTime.getMonth(), startTime.getDate())), utcEndTime = new Date(Date.UTC(endTime.getFullYear(), endTime.getMonth(), endTime.getDate())), currentViewIndex = this.currentViewIndex, rows = this.views[currentViewIndex].rows, allDayEvents = this.views[currentViewIndex].allDayEvents = [], oneHour = 3600000, eps = 0.016, normalEventInRange = false, rangeStartRowIndex = this.startHour * this.hourSegments, rangeEndRowIndex = this.endHour * this.hourSegments;
for (var hour = 0; hour < this.hourRange; hour += 1) {
rows[hour].events = [];
}
for (var i = 0; i < len; i += 1) {
var event_1 = eventSource[i];
var eventStartTime = new Date(event_1.startTime.getTime());
var eventEndTime = new Date(event_1.endTime.getTime());
if (event_1.allDay) {
if (eventEndTime <= utcStartTime || eventStartTime >= utcEndTime) {
continue;
}
else {
allDayEvents.push({
event: event_1
});
}
}
else {
if (eventEndTime <= startTime || eventStartTime >= endTime) {
continue;
}
else {
normalEventInRange = true;
}
var timeDiff = void 0;
var timeDifferenceStart = void 0;
if (eventStartTime <= startTime) {
timeDifferenceStart = 0;
}
else {
timeDiff = eventStartTime.getTime() - startTime.getTime() - (eventStartTime.getTimezoneOffset() - startTime.getTimezoneOffset()) * 60000;
timeDifferenceStart = timeDiff / oneHour * this.hourSegments;
}
var timeDifferenceEnd = void 0;
if (eventEndTime >= endTime) {
timeDiff = endTime.getTime() - startTime.getTime() - (endTime.getTimezoneOffset() - startTime.getTimezoneOffset()) * 60000;
timeDifferenceEnd = timeDiff / oneHour * this.hourSegments;
}
else {
timeDiff = eventEndTime.getTime() - startTime.getTime() - (eventEndTime.getTimezoneOffset() - startTime.getTimezoneOffset()) * 60000;
timeDifferenceEnd = timeDiff / oneHour * this.hourSegments;
}
var startIndex = Math.floor(timeDifferenceStart);
var endIndex = Math.ceil(timeDifferenceEnd - eps);
var startOffset = 0;
var endOffset = 0;
if (this.hourParts !== 1) {
if (startIndex < rangeStartRowIndex) {
startOffset = 0;
}
else {
startOffset = Math.floor((timeDifferenceStart - startIndex) * this.hourParts);
}
if (endIndex > rangeEndRowIndex) {
endOffset = 0;
}
else {
endOffset = Math.floor((endIndex - timeDifferenceEnd) * this.hourParts);
}
}
if (startIndex < rangeStartRowIndex) {
startIndex = 0;
}
else {
startIndex -= rangeStartRowIndex;
}
if (endIndex > rangeEndRowIndex) {
endIndex = rangeEndRowIndex;
}
endIndex -= rangeStartRowIndex;
if (startIndex < endIndex) {
var displayEvent = {
event: event_1,
startIndex: startIndex,
endIndex: endIndex,
startOffset: startOffset,
endOffset: endOffset
};
var eventSet = rows[startIndex].events;
if (eventSet) {
eventSet.push(displayEvent);
}
else {
eventSet = [];
eventSet.push(displayEvent);
rows[startIndex].events = eventSet;
}
}
}
}
if (normalEventInRange) {
var orderedEvents = [];
for (var hour = 0; hour < this.hourRange; hour += 1) {
if (rows[hour].events) {
rows[hour].events.sort(DayViewComponent.compareEventByStartOffset);
orderedEvents = orderedEvents.concat(rows[hour].events);
}
}
if (orderedEvents.length > 0) {
this.placeEvents(orderedEvents);
}
}
};
DayViewComponent.prototype.refreshView = function () {
this.range = this.getRange(this.calendarService.currentDate);
if (this.inited) {
var title = this.getTitle();
this.onTitleChanged.emit(title);
}
this.calendarService.populateAdjacentViews(this);
this.calendarService.rangeChanged(this);
};
DayViewComponent.prototype.getTitle = function () {
var startingDate = new Date(this.range.startTime.getTime());
startingDate.setHours(12, 0, 0, 0);
return this.formatTitle(startingDate);
};
DayViewComponent.compareEventByStartOffset = function (eventA, eventB) {
return eventA.startOffset - eventB.startOffset;
};
DayViewComponent.prototype.select = function (selectedTime, events) {
var disabled = false;
if (this.markDisabled) {
disabled = this.markDisabled(selectedTime);
}
this.onTimeSelected.emit({
selectedTime: selectedTime,
events: events.map(function (e) { return e.event; }),
disabled: disabled
});
};
DayViewComponent.prototype.placeEvents = function (orderedEvents) {
this.calculatePosition(orderedEvents);
DayViewComponent.calculateWidth(orderedEvents, this.hourRange, this.hourParts);
};
DayViewComponent.prototype.placeAllDayEvents = function (orderedEvents) {
this.calculatePosition(orderedEvents);
};
DayViewComponent.prototype.overlap = function (event1, event2) {
var earlyEvent = event1, lateEvent = event2;
if (event1.startIndex > event2.startIndex || (event1.startIndex === event2.startIndex && event1.startOffset > event2.startOffset)) {
earlyEvent = event2;
lateEvent = event1;
}
if (earlyEvent.endIndex <= lateEvent.startIndex) {
return false;
}
else {
return !(earlyEvent.endIndex - lateEvent.startIndex === 1 && earlyEvent.endOffset + lateEvent.startOffset >= this.hourParts);
}
};
DayViewComponent.prototype.calculatePosition = function (events) {
var len = events.length, maxColumn = 0, col, isForbidden = new Array(len);
for (var i = 0; i < len; i += 1) {
for (col = 0; col < maxColumn; col += 1) {
isForbidden[col] = false;
}
for (var j = 0; j < i; j += 1) {
if (this.overlap(events[i], events[j])) {
isForbidden[events[j].position] = true;
}
}
for (col = 0; col < maxColumn; col += 1) {
if (!isForbidden[col]) {
break;
}
}
if (col < maxColumn) {
events[i].position = col;
}
else {
events[i].position = maxColumn++;
}
}
if (this.dir === 'rtl') {
for (var i = 0; i < len; i += 1) {
events[i].position = maxColumn - 1 - events[i].position;
}
}
};
DayViewComponent.calculateWidth = function (orderedEvents, size, hourParts) {
var totalSize = size * hourParts, cells = new Array(totalSize);
orderedEvents.sort(function (eventA, eventB) {
return eventB.position - eventA.position;
});
for (var i_1 = 0; i_1 < totalSize; i_1 += 1) {
cells[i_1] = {
calculated: false,
events: []
};
}
var len = orderedEvents.length;
for (var i_2 = 0; i_2 < len; i_2 += 1) {
var event_2 = orderedEvents[i_2];
var index = event_2.startIndex * hourParts + event_2.startOffset;
while (index < event_2.endIndex * hourParts - event_2.endOffset) {
cells[index].events.push(event_2);
index += 1;
}
}
var i = 0;
while (i < len) {
var event_3 = orderedEvents[i];
if (!event_3.overlapNumber) {
var overlapNumber = event_3.position + 1;
event_3.overlapNumber = overlapNumber;
var eventQueue = [event_3];
while ((event_3 = eventQueue.shift())) {
var index = event_3.startIndex * hourParts + event_3.startOffset;
while (index < event_3.endIndex * hourParts - event_3.endOffset) {
if (!cells[index].calculated) {
cells[index].calculated = true;
if (cells[index].events) {
var eventCountInCell = cells[index].events.length;
for (var j = 0; j < eventCountInCell; j += 1) {
var currentEventInCell = cells[index].events[j];
if (!currentEventInCell.overlapNumber) {
currentEventInCell.overlapNumber = overlapNumber;
eventQueue.push(currentEventInCell);
}
}
}
}
index += 1;
}
}
}
i += 1;
}
};
DayViewComponent.prototype.eventSelected = function (event) {
this.onEventSelected.emit(event);
};
DayViewComponent.prototype.setScrollPosition = function (scrollPosition) {
this.initScrollPosition = scrollPosition;
};
return DayViewComponent;
}());
DayViewComponent.decorators = [
{ type: core_1.Component, args: [{
selector: 'dayview',
template: "\n <ion-slides #daySlider [loop]=\"true\" [dir]=\"dir\" [spaceBetween]=\"spaceBetween\" (ionSlideDidChange)=\"onSlideChanged()\">\n <ion-slide>\n <div class=\"dayview-allday-table\">\n <div class=\"dayview-allday-label\">{{allDayLabel}}</div>\n <ion-scroll scrollY=\"true\" zoom=\"false\" class=\"dayview-allday-content-wrapper\">\n <table class=\"table table-bordered dayview-allday-content-table\">\n <tbody>\n <tr>\n <td class=\"calendar-cell\" [ngClass]=\"{'calendar-event-wrap':views[0].allDayEvents.length>0}\"\n [ngStyle]=\"{height: 25*views[0].allDayEvents.length+'px'}\"\n *ngIf=\"0===currentViewIndex\">\n <ng-template [ngTemplateOutlet]=\"dayviewAllDayEventSectionTemplate\"\n [ngTemplateOutletContext]=\"{allDayEvents:views[0].allDayEvents,eventTemplate:dayviewAllDayEventTemplate}\">\n </ng-template>\n </td>\n <td class=\"calendar-cell\" *ngIf=\"0!==currentViewIndex\">\n </td>\n </tr>\n </tbody>\n </table>\n </ion-scroll>\n </div>\n <init-position-scroll *ngIf=\"0===currentViewIndex\" class=\"dayview-normal-event-container\" [initPosition]=\"initScrollPosition\" [emitEvent]=\"preserveScrollPosition\" (onScroll)=\"setScrollPosition($event)\">\n <table class=\"table table-bordered table-fixed dayview-normal-event-table\">\n <tbody>\n <tr *ngFor=\"let tm of views[0].rows; let i = index\">\n <td class=\"calendar-hour-column text-center\">\n {{hourColumnLabels[i]}}\n </td>\n <td class=\"calendar-cell\" tappable (click)=\"select(tm.time, tm.events)\">\n <ng-template [ngTemplateOutlet]=\"dayviewNormalEventSectionTemplate\"\n [ngTemplateOutletContext]=\"{tm:tm, hourParts: hourParts, eventTemplate:dayviewNormalEventTemplate}\">\n </ng-template>\n </td>\n </tr>\n </tbody>\n </table>\n </init-position-scroll>\n <init-position-scroll *ngIf=\"0!==currentViewIndex\" class=\"dayview-normal-event-container\" [initPosition]=\"initScrollPosition\">\n <table class=\"table table-bordered table-fixed dayview-normal-event-table\">\n <tbody>\n <tr *ngFor=\"let tm of views[0].rows; let i = index\">\n <td class=\"calendar-hour-column text-center\">\n {{hourColumnLabels[i]}}\n </td>\n <td class=\"calendar-cell\">\n </td>\n </tr>\n </tbody>\n </table>\n </init-position-scroll>\n </ion-slide>\n <ion-slide>\n <div class=\"dayview-allday-table\">\n <div class=\"dayview-allday-label\">{{allDayLabel}}</div>\n <ion-scroll scrollY=\"true\" zoom=\"false\" class=\"dayview-allday-content-wrapper\">\n <table class=\"table table-bordered dayview-allday-content-table\">\n <tbody>\n <tr>\n <td class=\"calendar-cell\" [ngClass]=\"{'calendar-event-wrap':views[1].allDayEvents.length>0}\"\n [ngStyle]=\"{height: 25*views[1].allDayEvents.length+'px'}\"\n *ngIf=\"1===currentViewIndex\">\n <ng-template [ngTemplateOutlet]=\"dayviewAllDayEventSectionTemplate\"\n [ngTemplateOutletContext]=\"{allDayEvents:views[1].allDayEvents,eventTemplate:dayviewAllDayEventTemplate}\">\n </ng-template>\n </td>\n <td class=\"calendar-cell\" *ngIf=\"1!==currentViewIndex\">\n </td>\n </tr>\n </tbody>\n </table>\n </ion-scroll>\n </div>\n <init-position-scroll *ngIf=\"1===currentViewIndex\" class=\"dayview-normal-event-container\" [initPosition]=\"initScrollPosition\" [emitEvent]=\"preserveScrollPosition\" (onScroll)=\"setScrollPosition($event)\">\n <table class=\"table table-bordered table-fixed dayview-normal-event-table\">\n <tbody>\n <tr *ngFor=\"let tm of views[1].rows; let i = index\">\n <td class=\"calendar-hour-column text-center\">\n {{hourColumnLabels[i]}}\n </td>\n <td class=\"calendar-cell\" tappable (click)=\"select(tm.time, tm.events)\">\n <ng-template [ngTemplateOutlet]=\"dayviewNormalEventSectionTemplate\"\n [ngTemplateOutletContext]=\"{tm:tm, hourParts: hourParts, eventTemplate:dayviewNormalEventTemplate}\">\n </ng-template>\n </td>\n </tr>\n </tbody>\n </table>\n </init-position-scroll>\n <init-position-scroll *ngIf=\"1!==currentViewIndex\" class=\"dayview-normal-event-container\" [initPosition]=\"initScrollPosition\">\n <table class=\"table table-bordered table-fixed dayview-normal-event-table\">\n <tbody>\n <tr *ngFor=\"let tm of views[1].rows; let i = index\">\n <td class=\"calendar-hour-column text-center\">\n {{hourColumnLabels[i]}}\n </td>\n <td class=\"calendar-cell\">\n </td>\n </tr>\n </tbody>\n </table>\n </init-position-scroll>\n </ion-slide>\n <ion-slide>\n <div class=\"dayview-allday-table\">\n <div class=\"dayview-allday-label\">{{allDayLabel}}</div>\n <ion-scroll scrollY=\"true\" zoom=\"false\" class=\"dayview-allday-content-wrapper\">\n <table class=\"table table-bordered dayview-allday-content-table\">\n <tbody>\n <tr>\n <td class=\"calendar-cell\" [ngClass]=\"{'calendar-event-wrap':views[2].allDayEvents.length>0}\"\n [ngStyle]=\"{height: 25*views[2].allDayEvents.length+'px'}\"\n *ngIf=\"2===currentViewIndex\">\n <ng-template [ngTemplateOutlet]=\"dayviewAllDayEventSectionTemplate\"\n [ngTemplateOutletContext]=\"{allDayEvents:views[2].allDayEvents,eventTemplate:dayviewAllDayEventTemplate}\">\n </ng-template>\n </td>\n <td class=\"calendar-cell\" *ngIf=\"2!==currentViewIndex\">\n </td>\n </tr>\n </tbody>\n </table>\n </ion-scroll>\n </div>\n <init-position-scroll *ngIf=\"2===currentViewIndex\" class=\"dayview-normal-event-container\" [initPosition]=\"initScrollPosition\" [emitEvent]=\"preserveScrollPosition\" (onScroll)=\"setScrollPosition($event)\">\n <table class=\"table table-bordered table-fixed dayview-normal-event-table\">\n <tbody>\n <tr *ngFor=\"let tm of views[2].rows; let i = index\">\n <td class=\"calendar-hour-column text-center\">\n {{hourColumnLabels[i]}}\n </td>\n <td class=\"calendar-cell\" tappable (click)=\"select(tm.time, tm.events)\">\n <ng-template [ngTemplateOutlet]=\"dayviewNormalEventSectionTemplate\"\n [ngTemplateOutletContext]=\"{tm:tm, hourParts: hourParts, eventTemplate:dayviewNormalEventTemplate}\">\n </ng-template>\n </td>\n </tr>\n </tbody>\n </table>\n </init-position-scroll>\n <init-position-scroll *ngIf=\"2!==currentViewIndex\" class=\"dayview-normal-event-container\" [initPosition]=\"initScrollPosition\">\n <table class=\"table table-bordered table-fixed dayview-normal-event-table\">\n <tbody>\n <tr *ngFor=\"let tm of views[2].rows; let i = index\">\n <td class=\"calendar-hour-column text-center\">\n {{hourColumnLabels[i]}}\n </td>\n <td class=\"calendar-cell\">\n </td>\n </tr>\n </tbody>\n </table>\n </init-position-scroll>\n </ion-slide>\n </ion-slides>\n ",
styles: ["\n .table-fixed {\n table-layout: fixed;\n }\n\n .table {\n width: 100%;\n max-width: 100%;\n background-color: transparent;\n }\n\n .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td,\n .table > tbody > tr > td, .table > tfoot > tr > td {\n padding: 8px;\n line-height: 20px;\n vertical-align: top;\n }\n\n .table > thead > tr > th {\n vertical-align: bottom;\n border-bottom: 2px solid #ddd;\n }\n\n .table > thead:first-child > tr:first-child > th, .table > thead:first-child > tr:first-child > td {\n border-top: 0\n }\n\n .table > tbody + tbody {\n border-top: 2px solid #ddd;\n }\n\n .table-bordered {\n border: 1px solid #ddd;\n }\n\n .table-bordered > thead > tr > th, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > th,\n .table-bordered > thead > tr > td, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td {\n border: 1px solid #ddd;\n }\n\n .table-bordered > thead > tr > th, .table-bordered > thead > tr > td {\n border-bottom-width: 2px;\n }\n\n .table-striped > tbody > tr:nth-child(odd) > td, .table-striped > tbody > tr:nth-child(odd) > th {\n background-color: #f9f9f9\n }\n\n .calendar-hour-column {\n width: 50px;\n white-space: nowrap;\n }\n\n .calendar-event-wrap {\n position: relative;\n width: 100%;\n height: 100%;\n }\n\n .calendar-event {\n position: absolute;\n padding: 2px;\n cursor: pointer;\n z-index: 10000;\n }\n\n .calendar-cell {\n padding: 0 !important;\n height: 37px;\n }\n\n .dayview-allday-label {\n float: left;\n height: 100%;\n line-height: 50px;\n text-align: center;\n width: 50px;\n border-left: 1px solid #ddd;\n }\n\n [dir=\"rtl\"] .dayview-allday-label {\n border-right: 1px solid #ddd;\n float: right;\n }\n\n .dayview-allday-content-wrapper {\n margin-left: 50px;\n overflow: hidden;\n height: 51px;\n }\n\n [dir=\"rtl\"] .dayview-allday-content-wrapper {\n margin-left: 0;\n margin-right: 50px;\n }\n\n .dayview-allday-content-table {\n min-height: 50px;\n }\n\n .dayview-allday-content-table td {\n border-left: 1px solid #ddd;\n border-right: 1px solid #ddd;\n }\n\n .dayview-allday-table {\n height: 50px;\n position: relative;\n border-bottom: 1px solid #ddd;\n font-size: 14px;\n }\n\n .dayview-normal-event-container {\n margin-top: 50px;\n overflow: hidden;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n position: absolute;\n font-size: 14px;\n }\n\n .dayview .slide-zoom {\n height: 100%;\n }\n\n .dayview-allday-content-wrapper scroll-content {\n width: 100%;\n }\n\n ::-webkit-scrollbar,\n *::-webkit-scrollbar {\n display: none;\n }\n\n .table > tbody > tr > td.calendar-hour-column {\n padding-left: 0;\n padding-right: 0;\n vertical-align: middle;\n }\n\n @media (max-width: 750px) {\n .dayview-allday-label, .calendar-hour-column {\n width: 31px;\n font-size: 12px;\n }\n\n .dayview-allday-label {\n padding-top: 4px;\n }\n\n .table > tbody > tr > td.calendar-hour-column {\n padding-left: 0;\n padding-right: 0;\n vertical-align: middle;\n line-height: 12px;\n }\n\n .dayview-allday-label {\n line-height: 20px;\n }\n\n .dayview-allday-content-wrapper {\n margin-left: 31px;\n }\n\n [dir=\"rtl\"] .dayview-allday-content-wrapper {\n margin-left: 0;\n margin-right: 31px;\n }\n }\n "],
encapsulation: core_1.ViewEncapsulation.None
},] },
];
DayViewComponent.ctorParameters = function () { return [
{ type: calendar_service_1.CalendarService, },
{ type: core_1.ElementRef, },
]; };
DayViewComponent.propDecorators = {
'slider': [{ type: core_1.ViewChild, args: ['daySlider',] },],
'class': [{ type: core_1.HostBinding, args: ['class.dayview',] },],
'dayviewAllDayEventTemplate': [{ type: core_1.Input },],
'dayviewNormalEventTemplate': [{ type: core_1.Input },],
'dayviewAllDayEventSectionTemplate': [{ type: core_1.Input },],
'dayviewNormalEventSectionTemplate': [{ type: core_1.Input },],
'formatHourColumn': [{ type: core_1.Input },],
'formatDayTitle': [{ type: core_1.Input },],
'allDayLabel': [{ type: core_1.Input },],
'hourParts': [{ type: core_1.Input },],
'eventSource': [{ type: core_1.Input },],
'markDisabled': [{ type: core_1.Input },],
'locale': [{ type: core_1.Input },],
'dateFormatter': [{ type: core_1.Input },],
'dir': [{ type: core_1.Input },],
'scrollToHour': [{ type: core_1.Input },],
'preserveScrollPosition': [{ type: core_1.Input },],
'lockSwipeToPrev': [{ type: core_1.Input },],
'lockSwipes': [{ type: core_1.Input },],
'startHour': [{ type: core_1.Input },],
'endHour': [{ type: core_1.Input },],
'spaceBetween': [{ type: core_1.Input },],
'hourSegments': [{ type: core_1.Input },],
'onRangeChanged': [{ type: core_1.Output },],
'onEventSelected': [{ type: core_1.Output },],
'onTimeSelected': [{ type: core_1.Output },],
'onTitleChanged': [{ type: core_1.Output },],
};
exports.DayViewComponent = DayViewComponent;
//# sourceMappingURL=dayview.js.map