@syncfusion/ej2-schedule 30.2.4 → 31.1.17

package/dist/ts/schedule/renderer/renderer.d.ts

@@ -0,0 +1,13 @@
+import { Schedule } from '../base/schedule';
+import { View } from '../base/type';
+/**
+ * Schedule DOM rendering
+ */
+export declare class Render {
+    parent: Schedule;
+    constructor(parent: Schedule);
+    render(viewName: View, isDataRefresh?: boolean): void;
+    private initializeLayout;
+    updateHeader(): void;
+    updateLabelText(view: string): void;
+}

package/dist/ts/schedule/renderer/renderer.ts

@@ -0,0 +1,165 @@
+import { isNullOrUndefined, addClass, removeClass } from '@syncfusion/ej2-base';
+import { Schedule } from '../base/schedule';
+import { View } from '../base/type';
+import { VirtualScroll } from '../actions/virtual-scroll';
+import { EventTooltip } from '../popups/event-tooltip';
+import * as cls from '../base/css-constant';
+
+/**
+ * Schedule DOM rendering
+ */
+export class Render {
+    public parent: Schedule;
+
+    constructor(parent: Schedule) {
+        this.parent = parent;
+    }
+
+    public render(viewName: View, isDataRefresh: boolean = true): void {
+        this.initializeLayout(viewName);
+        if (this.parent.activeView && isDataRefresh) {
+            this.parent.crudModule.refreshDataManager();
+        }
+    }
+
+    private initializeLayout(viewName: View): void {
+        if (this.parent.activeView) {
+            let templates: string[] = [
+                'cellTemplate', 'tooltipTemplate', 'majorSlotTemplate', 'minorSlotTemplate',
+                'headerTooltipTemplate', 'dateHeaderTemplate', 'dayHeaderTemplate', 'monthHeaderTemplate',
+                'headerIndentTemplate', 'resourceHeaderTemplate', 'cellHeaderTemplate', 'dateRangeTemplate'
+            ];
+            if (this.parent.activeEventTemplates.length > 0) {
+                templates = templates.concat(this.parent.activeEventTemplates);
+                this.parent.activeEventTemplates = [];
+            } else {
+                templates.push('eventTemplate');
+            }
+            this.parent.resetTemplates(templates);
+            this.parent.activeView.removeEventListener();
+            this.parent.activeView.destroy();
+        }
+        switch (viewName) {
+        case 'Day':
+            this.parent.activeView = this.parent.dayModule;
+            break;
+        case 'Week':
+            this.parent.activeView = this.parent.weekModule;
+            break;
+        case 'WorkWeek':
+            this.parent.activeView = this.parent.workWeekModule;
+            break;
+        case 'Month':
+            this.parent.activeView = this.parent.monthModule;
+            break;
+        case 'Year':
+            this.parent.activeView = this.parent.yearModule;
+            break;
+        case 'Agenda':
+            this.parent.activeView = this.parent.agendaModule;
+            break;
+        case 'MonthAgenda':
+            this.parent.activeView = this.parent.monthAgendaModule;
+            break;
+        case 'TimelineDay':
+            this.parent.activeView = this.parent.timelineViewsModule;
+            if (!isNullOrUndefined(this.parent.activeView)) {
+                this.parent.activeView.viewClass = 'e-timeline-day-view';
+            }
+            break;
+        case 'TimelineWorkWeek':
+            this.parent.activeView = this.parent.timelineViewsModule;
+            if (!isNullOrUndefined(this.parent.activeView)) {
+                this.parent.activeView.viewClass = 'e-timeline-work-week-view';
+            }
+            break;
+        case 'TimelineWeek':
+            this.parent.activeView = this.parent.timelineViewsModule;
+            if (!isNullOrUndefined(this.parent.activeView)) {
+                this.parent.activeView.viewClass = 'e-timeline-week-view';
+            }
+            break;
+        case 'TimelineMonth':
+            this.parent.activeView = this.parent.timelineMonthModule;
+            break;
+        case 'TimelineYear':
+            this.parent.activeView = this.parent.timelineYearModule;
+            break;
+        }
+        if (isNullOrUndefined(this.parent.activeView)) {
+            const firstView: View = this.parent.viewCollections[0].option;
+            if (firstView) {
+                this.parent.setProperties({ currentView: firstView }, true);
+                if (this.parent.headerModule) {
+                    this.parent.headerModule.updateActiveView();
+                    this.parent.headerModule.setCalendarView();
+                }
+                console.warn('[WARNING] :: Module "' + viewName + '" is not available in Schedule component!' +
+                    ' You either misspelled the module name or forgot to load it.');
+                return this.initializeLayout(firstView);
+            }
+            throw Error('Inject required modules');
+        }
+        this.parent.uiStateValues.scheduleHeight = this.parent.element.offsetHeight;
+        this.parent.activeView.viewIndex = this.parent.viewIndex;
+        this.updateLabelText(viewName);
+        this.parent.activeView.addEventListener();
+        this.parent.activeView.getRenderDates();
+        this.parent.uiStateValues.isGroupAdaptive = this.parent.activeViewOptions.group.resources.length > 0 &&
+            (this.parent.enableAdaptiveUI && !this.parent.isAdaptive ||
+                this.parent.isAdaptive && this.parent.activeViewOptions.group.enableCompactView);
+        if (this.parent.virtualScrollModule) {
+            this.parent.virtualScrollModule.destroy();
+            this.parent.virtualScrollModule = null;
+        }
+        if ((['Agenda', 'MonthAgenda', 'Year', 'TimelineYear'].indexOf(this.parent.currentView) === -1 ||
+            (this.parent.currentView === 'TimelineYear' && this.parent.activeViewOptions.orientation === 'Vertical'))
+            && this.parent.activeViewOptions.allowVirtualScrolling
+            && this.parent.activeViewOptions.group.resources.length > 0 && !this.parent.uiStateValues.isGroupAdaptive) {
+            this.parent.virtualScrollModule = new VirtualScroll(this.parent);
+            if (this.parent.activeView.isTimelineView()) {
+                this.parent.uiStateValues.top = 0;
+            } else {
+                this.parent.virtualScrollModule.isHorizontalScroll = true;
+                this.parent.uiStateValues.left = 0;
+            }
+        }
+        this.updateHeader();
+        this.parent.currentTimezoneDate = this.parent.getCurrentTime();
+        this.parent.activeView.renderLayout(cls.CURRENT_PANEL_CLASS);
+        this.parent.renderTemplates();
+        if (this.parent.eventTooltip) {
+            this.parent.eventTooltip.destroy();
+            this.parent.eventTooltip = null;
+        }
+        if (this.parent.eventSettings.enableTooltip || (this.parent.activeViewOptions.group.resources.length > 0
+            && this.parent.activeViewOptions.group.headerTooltipTemplate)) {
+            this.parent.eventTooltip = new EventTooltip(this.parent);
+        }
+    }
+
+    public updateHeader(): void {
+        if (this.parent.headerModule) {
+            this.parent.headerModule.setDayOfWeek(this.parent.activeViewOptions.firstDayOfWeek);
+            if (this.parent.activeViewOptions.readonly) {
+                addClass([this.parent.element], cls.READ_ONLY);
+            } else if (this.parent.element.classList.contains(cls.READ_ONLY)) {
+                removeClass([this.parent.element], cls.READ_ONLY);
+            }
+            this.parent.headerModule.updateDateRange();
+            this.parent.headerModule.updateHeaderItems('remove');
+        }
+    }
+
+    public updateLabelText(view: string): void {
+        this.parent.element.setAttribute('role', 'application');
+        this.parent.element.removeAttribute('aria-labelledby');
+        this.parent.element.removeAttribute('aria-label');
+        if (view === 'Year') {
+            this.parent.element.setAttribute('aria-label', this.parent.activeView.getLabelText(view));
+        } else {
+            this.parent.element.setAttribute('aria-labelledby', this.parent.element.id + '_table' );
+        }
+    }
+
+}

package/dist/ts/schedule/renderer/timeline-header-row.d.ts

@@ -0,0 +1,15 @@
+import { Schedule } from '../base/schedule';
+import { TdData } from '../base/interface';
+/**
+ * timeline header rows
+ */
+export declare class TimelineHeaderRow {
+    parent: Schedule;
+    renderDates: Date[];
+    constructor(parent: Schedule, renderDates: Date[]);
+    private groupByYear;
+    private groupByMonth;
+    private groupByWeek;
+    private generateSlots;
+    generateColumnLevels(dateSlots: TdData[], hourSlots: TdData[]): TdData[][];
+}

package/dist/ts/schedule/renderer/timeline-header-row.ts

@@ -0,0 +1,132 @@
+import { createElement } from '@syncfusion/ej2-base';
+import { Schedule } from '../base/schedule';
+import { MS_PER_DAY, capitalizeFirstWord } from '../base/util';
+import { TdData, CellTemplateArgs, CallbackFunction } from '../base/interface';
+import { HeaderRowsModel } from '../models/header-rows-model';
+
+/**
+ * timeline header rows
+ */
+export class TimelineHeaderRow {
+    public parent: Schedule;
+    public renderDates: Date[];
+
+    constructor(parent: Schedule, renderDates: Date[]) {
+        this.parent = parent;
+        this.renderDates = renderDates;
+    }
+
+    private groupByYear(dates: Date[]): { [key: number]: Date[] } {
+        const result: { [key: number]: Date[] } = {};
+        for (const d of dates) {
+            const key: number = d.getFullYear();
+            result[parseInt(key.toString(), 10)] = result[parseInt(key.toString(), 10)] || [];
+            result[parseInt(key.toString(), 10)].push(d);
+        }
+        return result;
+    }
+
+    private groupByMonth(dates: Date[]): { [key: number]: Date[] } {
+        const result: { [key: number]: Date[] } = {};
+        for (const d of dates) {
+            const key: number = (d.getFullYear() - 1970) * 12 + d.getMonth();
+            result[parseInt(key.toString(), 10)] = result[parseInt(key.toString(), 10)] || [];
+            result[parseInt(key.toString(), 10)].push(d);
+        }
+        return result;
+    }
+
+    private groupByWeek(dates: Date[]): { [key: number]: Date[] } {
+        const result: { [key: number]: Date[] } = {};
+        for (const d of dates) {
+            const jsDate: number = +new Date(1970, 0, 1);
+            const tzOffsetDiff: number = d.getTimezoneOffset() - new Date(1970, 0, 1).getTimezoneOffset();
+            let key: number = Math.ceil(((((+d - jsDate) - (tzOffsetDiff * 60 * 1000)) / MS_PER_DAY) + new Date(jsDate).getDay() + 1) / 7);
+            if (this.parent.activeViewOptions.firstDayOfWeek && this.parent.activeViewOptions.firstDayOfWeek > new Date(+d).getDay()) {
+                key = key - 1;
+            }
+            result[parseInt(key.toString(), 10)] = result[parseInt(key.toString(), 10)] || [];
+            result[parseInt(key.toString(), 10)].push(d);
+        }
+        return result;
+    }
+
+    private generateSlots(data: { [key: string]: Date[] }, colspan: number, row: HeaderRowsModel, cls: string, type: string): TdData[] {
+        const dateParser: CallbackFunction = (date: Date, format: string): string =>
+            this.parent.globalize.formatDate(date, { format: format, calendar: this.parent.getCalendarMode() });
+        const tdDatas: TdData[] = [];
+        const keys: string[] = Object.keys(data);
+        for (let i: number = 0; i < keys.length; i++) {
+            const dates: Date[] = data[keys[parseInt(i.toString(), 10)]];
+            let htmlCol: HTMLElement[];
+            if (row.template) {
+                const args: CellTemplateArgs = { date: dates[0], type: type };
+                const templateId: string = this.parent.element.id + '_headerRowTemplate';
+                htmlCol = [].slice.call(this.parent.templateParser(row.template)(args, this.parent, 'template', templateId, false));
+            } else {
+                let viewTemplate: string;
+                switch (row.option) {
+                case 'Year':
+                    viewTemplate = `<span class="e-header-year">${dateParser(dates[0], 'y')}</span>`;
+                    break;
+                case 'Month':
+                    viewTemplate = `<span class="e-header-month">${capitalizeFirstWord(dateParser(dates[0], 'MMMM'), 'single')}</span>`;
+                    break;
+                case 'Week':
+                    viewTemplate = `<span class="e-header-week">${this.parent.getWeekNumberContent(dates)}</span>`;
+                }
+                const headerWrapper: HTMLElement = createElement('div', { innerHTML: viewTemplate });
+                htmlCol = [].slice.call(headerWrapper.childNodes);
+            }
+            tdDatas.push({ date: dates[0], type: type, className: [cls], colSpan: dates.length * colspan, template: htmlCol });
+        }
+        return tdDatas;
+    }
+
+    public generateColumnLevels(dateSlots: TdData[], hourSlots: TdData[]): TdData[][] {
+        const levels: TdData[][] = [];
+        const rows: HeaderRowsModel[] = this.parent.activeViewOptions.headerRows;
+        let lastLevelColspan: number = 1;
+        if (rows[rows.length - 1].option === 'Hour' && hourSlots.length > 0) {
+            lastLevelColspan = hourSlots.length / dateSlots.length;
+        }
+        let tdDatas: TdData[] = [];
+        let byYear: Record<number, Date[]>;
+        let byMonth: Record<number, Date[]>;
+        let byWeek: Record<number, Date[]>;
+        for (const row of rows) {
+            switch (row.option) {
+            case 'Year':
+                byYear = this.groupByYear(this.renderDates);
+                tdDatas = this.generateSlots(byYear, lastLevelColspan, row, 'e-header-year-cell', 'yearHeader');
+                levels.push(tdDatas);
+                break;
+            case 'Month':
+                byMonth = this.groupByMonth(this.renderDates);
+                tdDatas = this.generateSlots(byMonth, lastLevelColspan, row, 'e-header-month-cell', 'monthHeader');
+                levels.push(tdDatas);
+                break;
+            case 'Week':
+                byWeek = this.groupByWeek(this.renderDates);
+                tdDatas = this.generateSlots(byWeek, lastLevelColspan, row, 'e-header-week-cell', 'weekHeader');
+                levels.push(tdDatas);
+                break;
+            case 'Date':
+                tdDatas = dateSlots;
+                tdDatas = tdDatas.map((value: TdData) => {
+                    value.colSpan = lastLevelColspan;
+                    return value;
+                });
+                levels.push(tdDatas);
+                break;
+            case 'Hour':
+                if (hourSlots.length > 0) {
+                    levels.push(hourSlots);
+                }
+                break;
+            }
+        }
+        return levels;
+    }
+
+}

package/dist/ts/schedule/renderer/timeline-month.d.ts

@@ -0,0 +1,29 @@
+import { TdData } from '../base/interface';
+import { Schedule } from '../base/schedule';
+import { Month } from './month';
+/**
+ * timeline month view
+ */
+export declare class TimelineMonth extends Month {
+    viewClass: string;
+    isInverseTableSelect: boolean;
+    private appointment;
+    constructor(parent: Schedule);
+    protected getModuleName(): string;
+    onDataReady(): void;
+    getLeftPanelElement(): HTMLElement;
+    scrollTopPanel(target: HTMLElement): void;
+    setContentHeight(content: HTMLElement, leftPanelElement: HTMLElement, height: number): void;
+    getDateSlots(renderDates: Date[], workDays: number[]): TdData[];
+    renderLeftIndent(tr: Element): void;
+    renderContent(): void;
+    private getRowCount;
+    getContentSlots(): TdData[][];
+    updateClassList(data: TdData): void;
+    unWireEvents(): void;
+    getMonthStart(currentDate: Date): Date;
+    getMonthEnd(currentDate: Date): Date;
+    generateColumnLevels(): TdData[][];
+    getAdjustedDate(startTime: Date): Date;
+    destroy(): void;
+}

package/dist/ts/schedule/renderer/timeline-month.ts

@@ -0,0 +1,184 @@
+import { EventHandler, createElement, formatUnit } from '@syncfusion/ej2-base';
+import { TdData } from '../base/interface';
+import { Schedule } from '../base/schedule';
+import { Month } from './month';
+import { TimelineEvent } from '../event-renderer/timeline-view';
+import { TimelineHeaderRow } from './timeline-header-row';
+import * as util from '../base/util';
+import * as event from '../base/constant';
+import * as cls from '../base/css-constant';
+
+/**
+ * timeline month view
+ */
+export class TimelineMonth extends Month {
+    public viewClass: string = 'e-timeline-month-view';
+    public isInverseTableSelect: boolean = true;
+    private appointment: TimelineEvent = null;
+
+    constructor(parent: Schedule) {
+        super(parent);
+    }
+
+    protected getModuleName(): string {
+        return 'timelineMonth';
+    }
+
+    public onDataReady(): void {
+        this.appointment = new TimelineEvent(this.parent, 'day');
+        this.appointment.renderAppointments();
+        this.parent.notify(event.eventsLoaded, {});
+    }
+
+    public getLeftPanelElement(): HTMLElement {
+        return this.element.querySelector('.' + cls.RESOURCE_COLUMN_WRAP_CLASS) as HTMLElement;
+    }
+
+    public scrollTopPanel(target: HTMLElement): void {
+        super.scrollTopPanel(target);
+        this.scrollHeaderLabels(target);
+    }
+
+    public setContentHeight(content: HTMLElement, leftPanelElement: HTMLElement, height: number): void {
+        if (leftPanelElement) {
+            leftPanelElement.style.height = formatUnit(height - this.getScrollXIndent(content));
+        }
+        content.style.height = formatUnit(height);
+    }
+
+    public getDateSlots(renderDates: Date[], workDays: number[]): TdData[] {
+        const dateSlots: TdData[] = [];
+        for (const col of renderDates) {
+            const classList: string[] = [cls.HEADER_CELLS_CLASS];
+            if (this.isCurrentDate(col)) {
+                classList.push(cls.CURRENT_DAY_CLASS);
+            }
+            dateSlots.push({ date: col, type: 'dateHeader', className: classList, colSpan: 1, workDays: workDays });
+        }
+        return dateSlots;
+    }
+
+    public renderLeftIndent(tr: Element): void {
+        if (this.parent.activeViewOptions.group.resources.length > 0 && !this.parent.uiStateValues.isGroupAdaptive) {
+            this.parent.resourceBase.renderResourceHeaderIndent(tr);
+        }
+    }
+
+    public renderContent(): void {
+        const contentTr: Element = createElement('tr');
+        if (this.parent.activeViewOptions.group.resources.length > 0 && !this.parent.uiStateValues.isGroupAdaptive) {
+            const resTd: Element = createElement('td');
+            resTd.appendChild(this.parent.resourceBase.createResourceColumn());
+            contentTr.appendChild(resTd);
+        }
+        const contentTd: Element = createElement('td');
+        this.element.querySelector('tbody').appendChild(contentTr);
+        const wrap: HTMLElement = createElement('div', { className: cls.CONTENT_WRAP_CLASS });
+        wrap.appendChild(this.renderContentArea());
+        wrap.appendChild(this.createEventTable(this.getRowCount()));
+        this.collapseRows(wrap);
+        EventHandler.add(wrap, 'scroll', this.onContentScroll, this);
+        contentTd.appendChild(wrap);
+        if (this.parent.virtualScrollModule) {
+            this.parent.virtualScrollModule.renderVirtualTrack(wrap);
+        }
+        contentTr.appendChild(contentTd);
+    }
+
+    private getRowCount(): number {
+        if (this.parent.activeViewOptions.group.resources.length > 0 && !this.parent.uiStateValues.isGroupAdaptive) {
+            return this.parent.resourceBase.renderedResources.length;
+        }
+        return 1;
+    }
+
+    public getContentSlots(): TdData[][] {
+        const slotDatas: TdData[][] = [];
+        for (let row: number = 0; row < this.getRowCount(); row++) {
+            for (const data of this.colLevels[this.colLevels.length - 1]) {
+                data.className = [cls.WORK_CELLS_CLASS];
+                if (this.parent.activeViewOptions.group.resources.length > 0 && !this.parent.uiStateValues.isGroupAdaptive) {
+                    const resLevel: TdData = this.parent.resourceBase.renderedResources[parseInt(row.toString(), 10)];
+                    data.workDays = (resLevel.resourceData[resLevel.resource.workDaysField] as number[]) || this.parent.workDays;
+                    data.className = data.className.concat(resLevel.className);
+                    data.groupIndex = resLevel.groupIndex;
+                    data.groupOrder = resLevel.groupOrder;
+                }
+                const slotData: TdData = {
+                    date: new Date(+data.date), colSpan: data.colSpan, groupIndex: data.groupIndex, workDays: data.workDays,
+                    type: 'monthCells', className: data.className
+                };
+                if (!slotDatas[parseInt(row.toString(), 10)]) {
+                    slotDatas[parseInt(row.toString(), 10)] = [];
+                }
+                slotDatas[parseInt(row.toString(), 10)].push(slotData);
+            }
+        }
+        return slotDatas;
+    }
+
+    public updateClassList(data: TdData): void {
+        if (!this.parent.isMinMaxDate(data.date)) {
+            data.className.push(cls.DISABLE_DATES);
+        }
+    }
+
+    public unWireEvents(): void {
+        EventHandler.remove(this.getContentAreaElement(), 'scroll', this.onContentScroll);
+    }
+
+    public getMonthStart(currentDate: Date): Date {
+        const monthStart: Date = this.parent.calendarUtil.firstDateOfMonth(util.resetTime(currentDate));
+        return new Date(monthStart.getFullYear(), monthStart.getMonth(), monthStart.getDate());
+    }
+
+    public getMonthEnd(currentDate: Date): Date {
+        const monthStart: Date = this.parent.calendarUtil.firstDateOfMonth(util.resetTime(currentDate));
+        return this.parent.calendarUtil.lastDateOfMonth(util.addMonths(new Date(+monthStart), this.parent.activeViewOptions.interval - 1));
+    }
+
+    public generateColumnLevels(): TdData[][] {
+        let colLevels: TdData[][] = [];
+        const level: TdData[] = this.getDateSlots(this.renderDates, this.parent.activeViewOptions.workDays);
+        colLevels.push(level);
+        if (this.parent.activeViewOptions.group.resources.length > 0) {
+            this.parent.resourceBase.generateResourceLevels(level, !this.parent.uiStateValues.isGroupAdaptive);
+        }
+        const hourSlots: TdData[] = [];
+        if (this.parent.activeViewOptions.headerRows.length > 0) {
+            const renderGn: TimelineHeaderRow = new TimelineHeaderRow(this.parent, this.renderDates);
+            colLevels = renderGn.generateColumnLevels(level, hourSlots);
+        }
+        this.colLevels = colLevels;
+        return colLevels;
+    }
+
+    public getAdjustedDate(startTime: Date): Date {
+        const timeSlots: TdData[] = this.colLevels[this.colLevels.length - 1];
+        for (let i: number = 0; i < timeSlots.length; i++) {
+            if (timeSlots[parseInt(i.toString(), 10)].date.getTime() > startTime.getTime()) {
+                return timeSlots[i - 1].date;
+            }
+        }
+        return null;
+    }
+
+    public destroy(): void {
+        if (!this.parent || this.parent && this.parent.isDestroyed) {
+            this.parent = null;
+            return;
+        }
+        if (this.element) {
+            const contentScrollableEle: Element = this.element.querySelector('.' + cls.CONTENT_WRAP_CLASS);
+            if (contentScrollableEle) {
+                EventHandler.remove(contentScrollableEle, 'scroll', this.onContentScroll);
+            }
+        }
+        if (this.appointment) {
+            this.appointment.destroy();
+            this.appointment = null;
+        }
+        super.destroy();
+    }
+
+}

package/dist/ts/schedule/renderer/timeline-view.d.ts

@@ -0,0 +1,31 @@
+import { Schedule } from '../base/schedule';
+import { VerticalView } from './vertical-view';
+import { TdData, TimeSlotData } from '../base/interface';
+/**
+ * timeline views
+ */
+export declare class TimelineViews extends VerticalView {
+    private timelineAppointment;
+    constructor(parent: Schedule);
+    protected getModuleName(): string;
+    getLeftPanelElement(): HTMLElement;
+    scrollTopPanel(target: HTMLElement): void;
+    scrollToWorkHour(): void;
+    scrollToHour(hour: string, scrollDate: Date): void;
+    generateColumnLevels(): TdData[][];
+    private generateTimeSlots;
+    changeCurrentTimePosition(): void;
+    private getLeftFromDateTime;
+    renderHeader(): void;
+    createAllDayRow(table: Element, tdData: TdData[]): void;
+    getCurrentTimeIndicatorIndex(): number[];
+    renderContent(): void;
+    private getRowCount;
+    private getResourceTdData;
+    renderContentTable(table: Element): void;
+    getContentRows(): Element[];
+    getContentTdClass(r: TimeSlotData): string[];
+    renderEvents(): void;
+    getAdjustedDate(date: Date): Date;
+    destroy(): void;
+}