ionic3-calendar3
Version:
Ionic3 calendar component
567 lines • 44.2 kB
JavaScript
import { DatePipe } from '@angular/common';
import { Component, HostBinding, Input, Output, EventEmitter, ViewChild, ViewEncapsulation, ElementRef } from '@angular/core';
import { CalendarService } from './calendar.service';
var WeekViewComponent = (function () {
function WeekViewComponent(calendarService, elm) {
this.calendarService = calendarService;
this.elm = elm;
this.class = true;
this.dir = "";
this.scrollToHour = 0;
this.onRangeChanged = new EventEmitter();
this.onEventSelected = new EventEmitter();
this.onTimeSelected = new EventEmitter();
this.onTitleChanged = new EventEmitter(true);
this.views = [];
this.currentViewIndex = 0;
this.direction = 0;
this.mode = 'week';
this.inited = false;
this.callbackOnInit = true;
}
WeekViewComponent.prototype.ngOnInit = function () {
var _this = this;
this.hourRange = (this.endHour - this.startHour) * this.hourSegments;
if (this.dateFormatter && this.dateFormatter.formatWeekViewDayHeader) {
this.formatDayHeader = this.dateFormatter.formatWeekViewDayHeader;
}
else {
var datePipe = new DatePipe(this.locale);
this.formatDayHeader = function (date) {
return datePipe.transform(date, this.formatWeekViewDayHeader);
};
}
if (this.dateFormatter && this.dateFormatter.formatWeekViewTitle) {
this.formatTitle = this.dateFormatter.formatWeekViewTitle;
}
else {
var datePipe = new DatePipe(this.locale);
this.formatTitle = function (date) {
return datePipe.transform(date, this.formatWeekTitle);
};
}
if (this.dateFormatter && this.dateFormatter.formatWeekViewHourColumn) {
this.formatHourColumnLabel = this.dateFormatter.formatWeekViewHourColumn;
}
else {
var datePipe = new 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();
});
};
WeekViewComponent.prototype.ngAfterViewInit = function () {
var title = this.getTitle();
this.onTitleChanged.emit(title);
if (this.scrollToHour > 0) {
var hourColumns_1 = this.elm.nativeElement.querySelector('.weekview-normal-event-container').querySelectorAll('.calendar-hour-column');
var me = this;
setTimeout(function () {
me.initScrollPosition = hourColumns_1[me.scrollToHour - me.startHour].offsetTop;
}, 0);
}
};
WeekViewComponent.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);
}
};
WeekViewComponent.prototype.ngOnDestroy = function () {
if (this.currentDateChangedFromParentSubscription) {
this.currentDateChangedFromParentSubscription.unsubscribe();
this.currentDateChangedFromParentSubscription = null;
}
if (this.eventSourceChangedSubscription) {
this.eventSourceChangedSubscription.unsubscribe();
this.eventSourceChangedSubscription = null;
}
};
WeekViewComponent.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);
};
WeekViewComponent.prototype.move = function (direction) {
if (direction === 0) {
return;
}
this.direction = direction;
var adjacent = this.calendarService.getAdjacentCalendarDate(this.mode, direction);
this.calendarService.setCurrentDate(adjacent);
this.refreshView();
this.direction = 0;
};
WeekViewComponent.createDateObjects = function (startTime, startHour, endHour, timeInterval) {
var times = [], 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) {
var row = [];
for (var day = 0; day < 7; day += 1) {
var time = new Date(startTime.getTime());
time.setHours(currentHour + hour, interval);
time.setDate(currentDate + day);
row.push({
events: [],
time: time
});
}
times.push(row);
}
}
return times;
};
WeekViewComponent.getDates = function (startTime, n) {
var dates = new Array(n), current = new Date(startTime.getTime()), i = 0;
current.setHours(12);
while (i < n) {
dates[i++] = {
date: new Date(current.getTime()),
events: []
};
current.setDate(current.getDate() + 1);
}
return dates;
};
WeekViewComponent.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][0].time));
}
return hourColumnLabels;
};
WeekViewComponent.prototype.getViewData = function (startTime) {
var dates = WeekViewComponent.getDates(startTime, 7);
var dayHeaders = [];
for (var i = 0; i < 7; i++) {
dayHeaders.push(this.formatDayHeader(dates[i].date));
}
return {
rows: WeekViewComponent.createDateObjects(startTime, this.startHour, this.endHour, this.hourSegments),
dates: dates,
dayHeaders: dayHeaders
};
};
WeekViewComponent.prototype.getRange = function (currentDate) {
var year = currentDate.getFullYear(), month = currentDate.getMonth(), date = currentDate.getDate(), day = currentDate.getDay(), difference = day - this.startingDayWeek;
if (difference < 0) {
difference += 7;
}
var firstDayOfWeek = new Date(year, month, date - difference);
var endTime = new Date(year, month, date - difference + 7);
return {
startTime: firstDayOfWeek,
endTime: endTime
};
};
WeekViewComponent.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, dates = this.views[currentViewIndex].dates, oneHour = 3600000, oneDay = 86400000, eps = 0.016, allDayEventInRange = false, normalEventInRange = false, rangeStartRowIndex = this.startHour * this.hourSegments, rangeEndRowIndex = this.endHour * this.hourSegments, allRows = 24 * this.hourSegments;
for (var i = 0; i < 7; i += 1) {
dates[i].events = [];
}
for (var day = 0; day < 7; day += 1) {
for (var hour = 0; hour < this.hourRange; hour += 1) {
rows[hour][day].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 {
allDayEventInRange = true;
var allDayStartIndex = void 0;
if (eventStartTime <= utcStartTime) {
allDayStartIndex = 0;
}
else {
allDayStartIndex = Math.floor((eventStartTime.getTime() - utcStartTime.getTime()) / oneDay);
}
var allDayEndIndex = void 0;
if (eventEndTime >= utcEndTime) {
allDayEndIndex = Math.ceil((utcEndTime.getTime() - utcStartTime.getTime()) / oneDay);
}
else {
allDayEndIndex = Math.ceil((eventEndTime.getTime() - utcStartTime.getTime()) / oneDay);
}
var displayAllDayEvent = {
event: event_1,
startIndex: allDayStartIndex,
endIndex: allDayEndIndex
};
var eventSet = dates[allDayStartIndex].events;
if (eventSet) {
eventSet.push(displayAllDayEvent);
}
else {
eventSet = [];
eventSet.push(displayAllDayEvent);
dates[allDayStartIndex].events = eventSet;
}
}
}
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), endIndex = Math.ceil(timeDifferenceEnd - eps), startRowIndex = startIndex % allRows, dayIndex = Math.floor(startIndex / allRows), endOfDay = dayIndex * allRows, startOffset = 0, endOffset = 0;
if (this.hourParts !== 1) {
if (startRowIndex < rangeStartRowIndex) {
startOffset = 0;
}
else {
startOffset = Math.floor((timeDifferenceStart - startIndex) * this.hourParts);
}
}
do {
endOfDay += allRows;
var endRowIndex = void 0;
if (endOfDay < endIndex) {
endRowIndex = allRows;
}
else {
if (endOfDay === endIndex) {
endRowIndex = allRows;
}
else {
endRowIndex = endIndex % allRows;
}
if (this.hourParts !== 1) {
if (endRowIndex > rangeEndRowIndex) {
endOffset = 0;
}
else {
endOffset = Math.floor((endIndex - timeDifferenceEnd) * this.hourParts);
}
}
}
if (startRowIndex < rangeStartRowIndex) {
startRowIndex = 0;
}
else {
startRowIndex -= rangeStartRowIndex;
}
if (endRowIndex > rangeEndRowIndex) {
endRowIndex = rangeEndRowIndex;
}
endRowIndex -= rangeStartRowIndex;
if (startRowIndex < endRowIndex) {
var displayEvent = {
event: event_1,
startIndex: startRowIndex,
endIndex: endRowIndex,
startOffset: startOffset,
endOffset: endOffset
};
var eventSet = rows[startRowIndex][dayIndex].events;
if (eventSet) {
eventSet.push(displayEvent);
}
else {
eventSet = [];
eventSet.push(displayEvent);
rows[startRowIndex][dayIndex].events = eventSet;
}
}
startRowIndex = 0;
startOffset = 0;
dayIndex += 1;
} while (endOfDay < endIndex);
}
}
}
if (normalEventInRange) {
for (var day = 0; day < 7; day += 1) {
var orderedEvents = [];
for (var hour = 0; hour < this.hourRange; hour += 1) {
if (rows[hour][day].events) {
rows[hour][day].events.sort(WeekViewComponent.compareEventByStartOffset);
orderedEvents = orderedEvents.concat(rows[hour][day].events);
}
}
if (orderedEvents.length > 0) {
this.placeEvents(orderedEvents);
}
}
}
if (allDayEventInRange) {
var orderedAllDayEvents = [];
for (var day = 0; day < 7; day += 1) {
if (dates[day].events) {
orderedAllDayEvents = orderedAllDayEvents.concat(dates[day].events);
}
}
if (orderedAllDayEvents.length > 0) {
this.placeAllDayEvents(orderedAllDayEvents);
}
}
};
WeekViewComponent.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);
};
WeekViewComponent.prototype.getTitle = function () {
var firstDayOfWeek = new Date(this.range.startTime.getTime()), weekFormat = '$n', weekNumberIndex = this.formatWeekTitle.indexOf(weekFormat);
firstDayOfWeek.setHours(12, 0, 0, 0);
var title = this.formatTitle(firstDayOfWeek);
if (weekNumberIndex !== -1) {
var weekNumber = String(WeekViewComponent.getISO8601WeekNumber(firstDayOfWeek));
title = title.replace(weekFormat, weekNumber);
}
return title;
};
WeekViewComponent.getISO8601WeekNumber = function (date) {
var dayOfWeekOnFirst = (new Date(date.getFullYear(), 0, 1)).getDay();
var firstThurs = new Date(date.getFullYear(), 0, ((dayOfWeekOnFirst <= 4) ? 5 : 12) - dayOfWeekOnFirst);
var thisThurs = new Date(date.getFullYear(), date.getMonth(), date.getDate() + (4 - date.getDay()));
var diff = +thisThurs - +firstThurs;
return (1 + Math.round(diff / 6.048e8));
};
WeekViewComponent.compareEventByStartOffset = function (eventA, eventB) {
return eventA.startOffset - eventB.startOffset;
};
WeekViewComponent.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
});
};
WeekViewComponent.prototype.placeEvents = function (orderedEvents) {
this.calculatePosition(orderedEvents);
WeekViewComponent.calculateWidth(orderedEvents, this.hourRange, this.hourParts);
};
WeekViewComponent.prototype.placeAllDayEvents = function (orderedEvents) {
this.calculatePosition(orderedEvents);
};
WeekViewComponent.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);
}
};
WeekViewComponent.prototype.calculatePosition = function (events) {
var len = events.length, maxColumn = 0, isForbidden = new Array(len);
for (var i = 0; i < len; i += 1) {
var col = void 0;
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;
}
}
};
WeekViewComponent.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;
}
};
WeekViewComponent.prototype.eventSelected = function (event) {
this.onEventSelected.emit(event);
};
WeekViewComponent.prototype.setScrollPosition = function (scrollPosition) {
this.initScrollPosition = scrollPosition;
};
return WeekViewComponent;
}());
export { WeekViewComponent };
WeekViewComponent.decorators = [
{ type: Component, args: [{
selector: 'weekview',
template: "\n <ion-slides #weekSlider [loop]=\"true\" [dir]=\"dir\" [spaceBetween]=\"spaceBetween\" (ionSlideDidChange)=\"onSlideChanged()\">\n <ion-slide>\n <table class=\"table table-bordered table-fixed weekview-header\">\n <thead>\n <tr>\n <th class=\"calendar-hour-column\"></th>\n <th class=\"weekview-header text-center\" *ngFor=\"let dayHeader of views[0].dayHeaders\">{{dayHeader}}\n </th>\n </tr>\n </thead>\n </table>\n <div *ngIf=\"0===currentViewIndex\">\n <div class=\"weekview-allday-table\">\n <div class=\"weekview-allday-label\">{{allDayLabel}}</div>\n <ion-scroll scrollY=\"true\" class=\"weekview-allday-content-wrapper\" zoom=\"false\">\n <table class=\"table table-fixed weekview-allday-content-table\">\n <tbody>\n <tr>\n <td *ngFor=\"let day of views[0].dates\" class=\"calendar-cell\">\n <ng-template [ngTemplateOutlet]=\"weekviewAllDayEventSectionTemplate\"\n [ngTemplateOutletContext]=\"{day:day, eventTemplate:weekviewAllDayEventTemplate}\">\n </ng-template>\n </td>\n </tr>\n </tbody>\n </table>\n </ion-scroll>\n </div>\n <init-position-scroll class=\"weekview-normal-event-container\" [initPosition]=\"initScrollPosition\" [emitEvent]=\"preserveScrollPosition\" (onScroll)=\"setScrollPosition($event)\">\n <table class=\"table table-bordered table-fixed weekview-normal-event-table\">\n <tbody>\n <tr *ngFor=\"let row of views[0].rows; let i = index\">\n <td class=\"calendar-hour-column text-center\">\n {{hourColumnLabels[i]}}\n </td>\n <td *ngFor=\"let tm of row\" class=\"calendar-cell\" tappable (click)=\"select(tm.time, tm.events)\">\n <ng-template [ngTemplateOutlet]=\"weekviewNormalEventSectionTemplate\"\n [ngTemplateOutletContext]=\"{tm:tm, hourParts: hourParts, eventTemplate:weekviewNormalEventTemplate}\">\n </ng-template>\n </td>\n </tr>\n </tbody>\n </table>\n </init-position-scroll>\n </div>\n <div *ngIf=\"0!==currentViewIndex\">\n <div class=\"weekview-allday-table\">\n <div class=\"weekview-allday-label\">{{allDayLabel}}</div>\n <ion-scroll scrollY=\"true\" class=\"weekview-allday-content-wrapper\" zoom=\"false\">\n <table class=\"table table-fixed weekview-allday-content-table\">\n <tbody>\n <tr>\n <td *ngFor=\"let day of views[0].dates\" class=\"calendar-cell\">\n </td>\n </tr>\n </tbody>\n </table>\n </ion-scroll>\n </div>\n <init-position-scroll class=\"weekview-normal-event-container\" [initPosition]=\"initScrollPosition\">\n <table class=\"table table-bordered table-fixed weekview-normal-event-table\">\n <tbody>\n <tr *ngFor=\"let row of views[0].rows; let i = index\">\n <td class=\"calendar-hour-column text-center\">\n {{hourColumnLabels[i]}}\n </td>\n <td *ngFor=\"let tm of row\" class=\"calendar-cell\">\n </td>\n </tr>\n </tbody>\n </table>\n </init-position-scroll>\n </div>\n </ion-slide>\n <ion-slide>\n <table class=\"table table-bordered table-fixed weekview-header\">\n <thead>\n <tr>\n <th class=\"calendar-hour-column\"></th>\n <th class=\"weekview-header text-center\" *ngFor=\"let dayHeader of views[1].dayHeaders\">{{dayHeader}}\n </th>\n </tr>\n </thead>\n </table>\n <div *ngIf=\"1===currentViewIndex\">\n <div class=\"weekview-allday-table\">\n <div class=\"weekview-allday-label\">{{allDayLabel}}</div>\n <ion-scroll scrollY=\"true\" class=\"weekview-allday-content-wrapper\" zoom=\"false\">\n <table class=\"table table-fixed weekview-allday-content-table\">\n <tbody>\n <tr>\n <td *ngFor=\"let day of views[1].dates\" class=\"calendar-cell\">\n <ng-template [ngTemplateOutlet]=\"weekviewAllDayEventSectionTemplate\"\n [ngTemplateOutletContext]=\"{day:day, eventTemplate:weekviewAllDayEventTemplate}\">\n </ng-template>\n </td>\n </tr>\n </tbody>\n </table>\n </ion-scroll>\n </div>\n <init-position-scroll class=\"weekview-normal-event-container\" [initPosition]=\"initScrollPosition\" [emitEvent]=\"preserveScrollPosition\" (onScroll)=\"setScrollPosition($event)\">\n <table class=\"table table-bordered table-fixed weekview-normal-event-table\">\n <tbody>\n <tr *ngFor=\"let row of views[1].rows; let i = index\">\n <td class=\"calendar-hour-column text-center\">\n {{hourColumnLabels[i]}}\n </td>\n <td *ngFor=\"let tm of row\" class=\"calendar-cell\" tappable (click)=\"select(tm.time, tm.events)\">\n <div [ngClass]=\"{'calendar-event-wrap': tm.events}\" *ngIf=\"tm.events\">\n <ng-template [ngTemplateOutlet]=\"weekviewNormalEventSectionTemplate\"\n [ngTemplateOutletContext]=\"{tm:tm, hourParts: hourParts, eventTemplate:weekviewNormalEventTemplate}\">\n </ng-template>\n </div>\n </td>\n </tr>\n </tbody>\n </table>\n </init-position-scroll>\n </div>\n <div *ngIf=\"1!==currentViewIndex\">\n <div class=\"weekview-allday-table\">\n <div class=\"weekview-allday-label\">{{allDayLabel}}</div>\n <ion-scroll scrollY=\"true\" class=\"weekview-allday-content-wrapper\" zoom=\"false\">\n <table class=\"table table-fixed weekview-allday-content-table\">\n <tbody>\n <tr>\n <td *ngFor=\"let day of views[1].dates\" class=\"calendar-cell\">\n </td>\n </tr>\n </tbody>\n </table>\n </ion-scroll>\n </div>\n <init-position-scroll class=\"weekview-normal-event-container\" [initPosition]=\"initScrollPosition\">\n <table class=\"table table-bordered table-fixed weekview-normal-event-table\">\n <tbody>\n <tr *ngFor=\"let row of views[1].rows; let i = index\">\n <td class=\"calendar-hour-column text-center\">\n {{hourColumnLabels[i]}}\n </td>\n <td *ngFor=\"let tm of row\" class=\"calendar-cell\">\n </td>\n </tr>\n </tbody>\n </table>\n </init-position-scroll>\n </div>\n </ion-slide>\n <ion-slide>\n <table class=\"table table-bordered table-fixed weekview-header\">\n <thead>\n <tr>\n <th class=\"calendar-hour-column\"></th>\n <th class=\"weekview-header text-center\" *ngFor=\"let dayHeader of views[2].dayHeaders\">{{dayHeader}}\n </th>\n </tr>\n </thead>\n </table>\n <div *ngIf=\"2===currentViewIndex\">\n <div class=\"weekview-allday-table\">\n <div class=\"weekview-allday-label\">{{allDayLabel}}</div>\n <ion-scroll scrollY=\"true\" class=\"weekview-allday-content-wrapper\" zoom=\"false\">\n <table class=\"table table-fixed weekview-allday-content-table\">\n <tbody>\n <tr>\n <td *ngFor=\"let day of views[2].dates\" class=\"calendar-cell\">\n <ng-template [ngTemplateOutlet]=\"weekviewAllDayEventSectionTemplate\"\n [ngTemplateOutletContext]=\"{day:day, eventTemplate:weekviewAllDayEventTemplate}\">\n </ng-template>\n </td>\n </tr>\n </tbody>\n </table>\n </ion-scroll>\n </div>\n <init-position-scroll class=\"weekview-normal-event-container\" [initPosition]=\"initScrollPosition\" [emitEvent]=\"preserveScrollPosition\" (onScroll)=\"setScrollPosition($event)\">\n <table class=\"table table-bordered table-fixed weekview-normal-event-table\">\n <tbody>\n <tr *ngFor=\"let row of views[2].rows; let i = index\">\n <td class=\"calendar-hour-column text-center\">\n {{hourColumnLabels[i]}}\n </td>\n <td *ngFor=\"let tm of row\" class=\"calendar-cell\" tappable (click)=\"select(tm.time, tm.events)\">\n <div [ngClass]=\"{'calendar-event-wrap': tm.events}\" *ngIf=\"tm.events\">\n <ng-template [ngTemplateOutlet]=\"weekviewNormalEventSectionTemplate\"\n [ngTemplateOutletContext]=\"{tm:tm, hourParts: hourParts, eventTemplate:weekviewNormalEventTemplate}\">\n </ng-template>\n </div>\n </td>\n </tr>\n </tbody>\n </table>\n </init-position-scroll>\n </div>\n <div *ngIf=\"2!==currentViewIndex\">\n <div class=\"weekview-allday-table\">\n <div class=\"weekview-allday-label\">{{allDayLabel}}</div>\n <ion-scroll scrollY=\"true\" class=\"weekview-allday-content-wrapper\" zoom=\"false\">\n <table class=\"table table-fixed weekview-allday-content-table\">\n <tbody>\n <tr>\n <td *ngFor=\"let day of views[2].dates\" class=\"calendar-cell\">\n </td>\n </tr>\n </tbody>\n </table>\n </ion-scroll>\n </div>\n <init-position-scroll class=\"weekview-normal-event-container\" [initPosition]=\"initScrollPosition\">\n <table class=\"table table-bordered table-fixed weekview-normal-event-table\">\n <tbody>\n <tr *ngFor=\"let row of views[2].rows; let i = index\">\n <td class=\"calendar-hour-column text-center\">\n {{hourColumnLabels[i]}}\n </td>\n <td *ngFor=\"let tm of row\" class=\"calendar-cell\">\n </td>\n </tr>\n </tbody>\n </table>\n </init-position-scroll>\n </div>\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 .weekview-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\"] .weekview-allday-label {\n float: right;\n border-right: 1px solid #ddd;\n }\n\n .weekview-allday-content-wrapper {\n margin-left: 50px;\n overflow: hidden;\n height: 51px;\n }\n\n [dir=\"rtl\"] .weekview-allday-content-wrapper {\n margin-left: 0;\n margin-right: 50px;\n }\n\n .weekview-allday-content-table {\n min-height: 50px;\n }\n\n .weekview-allday-content-table td {\n border-left: 1px solid #ddd;\n border-right: 1px solid #ddd;\n }\n\n .weekview-header th {\n overflow: hidden;\n white-space: nowrap;\n font-size: 14px;\n }\n\n .weekview-allday-table {\n height: 50px;\n position: relative;\n border-bottom: 1px solid #ddd;\n font-size: 14px;\n }\n\n .weekview-normal-event-container {\n margin-top: 87px;\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 .weekview .slide-zoom {\n height: 100%;\n }\n\n .weekview-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 .weekview-allday-label, .calendar-hour-column {\n width: 31px;\n font-size: 12px;\n }\n\n .weekview-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 .table > thead > tr > th.weekview-header {\n padding-left: 0;\n padding-right: 0;\n font-size: 12px;\n }\n\n .weekview-allday-label {\n line-height: 20px;\n }\n\n .weekview-allday-content-wrapper {\n margin-left: 31px;\n }\n\n [dir=\"rtl\"] .weekview-allday-content-wrapper {\n margin-left: 0;\n margin-right: 31px;\n }\n }\n "],
encapsulation: ViewEncapsulation.None
},] },
];
WeekViewComponent.ctorParameters = function () { return [
{ type: CalendarService, },
{ type: ElementRef, },
]; };
WeekViewComponent.propDecorators = {
'slider': [{ type: ViewChild, args: ['weekSlider',] },],
'class': [{ type: HostBinding, args: ['class.weekview',] },],
'weekviewAllDayEventTemplate': [{ type: Input },],
'weekviewNormalEventTemplate': [{ type: Input },],
'weekviewAllDayEventSectionTemplate': [{ type: Input },],
'weekviewNormalEventSectionTemplate': [{ type: Input },],
'formatWeekTitle': [{ type: Input },],
'formatWeekViewDayHeader': [{ type: Input },],
'formatHourColumn': [{ type: Input },],
'startingDayWeek': [{ type: Input },],
'allDayLabel': [{ type: Input },],
'hourParts': [{ type: Input },],
'eventSource': [{ type: Input },],
'markDisabled': [{ type: Input },],
'locale': [{ type: Input },],
'dateFormatter': [{ type: Input },],
'dir': [{ type: Input },],
'scrollToHour': [{ type: Input },],
'preserveScrollPosition': [{ type: Input },],
'lockSwipeToPrev': [{ type: Input },],
'lockSwipes': [{ type: Input },],
'startHour': [{ type: Input },],
'endHour': [{ type: Input },],
'spaceBetween': [{ type: Input },],
'hourSegments': [{ type: Input },],
'onRangeChanged': [{ type: Output },],
'onEventSelected': [{ type: Output },],
'onTimeSelected': [{ type: Output },],
'onTitleChanged': [{ type: Output },],
};
//# sourceMappingURL=weekview.js.map