@syncfusion/ej2-schedule
Version:
Flexible scheduling library with more built-in features and enhanced customization options similar to outlook and google calendar, allowing the users to plan and manage their appointments with efficient data-binding support.
1,394 lines (1,390 loc) • 1.41 MB
JavaScript
import { createElement, remove, isNullOrUndefined, closest, addClass, removeClass, append, extend, formatUnit, Touch, EventHandler, Browser, KeyboardEvents, HijriParser, getValue, getDefaultDateObject, cldrData, prepend, setStyleAttribute, Animation, initializeCSPTemplate, Component, L10n, classList, detach, Property, Event, NotifyPropertyChanges, SanitizeHtmlHelper, ChildProperty, Complex, Internationalization, compile, getElement, Collection, Draggable, print as print$1 } from '@syncfusion/ej2-base';
import { Popup, Dialog, isCollide, Tooltip, createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';
import { Toolbar, TreeView } from '@syncfusion/ej2-navigations';
import { Calendar, DatePicker, DateTimePicker } from '@syncfusion/ej2-calendars';
import { DataManager, Query, Predicate, Deferred } from '@syncfusion/ej2-data';
import { Button, RadioButton, CheckBox } from '@syncfusion/ej2-buttons';
import { FormValidator, Input, NumericTextBox } from '@syncfusion/ej2-inputs';
import { DropDownList, MultiSelect } from '@syncfusion/ej2-dropdowns';
import { ListBase } from '@syncfusion/ej2-lists';
import { Workbook } from '@syncfusion/ej2-excel-export';
/**
* Constants
*/
/** @private */
const cellClick = 'cellClick';
/** @private */
const cellDoubleClick = 'cellDoubleClick';
/** @private */
const moreEventsClick = 'moreEventsClick';
/** @private */
const select = 'select';
/** @private */
const hover = 'hover';
/** @private */
const actionBegin = 'actionBegin';
/** @private */
const actionComplete = 'actionComplete';
/** @private */
const actionFailure = 'actionFailure';
/** @private */
const navigating = 'navigating';
/** @private */
const renderCell = 'renderCell';
/** @private */
const eventClick = 'eventClick';
/** @private */
const eventDoubleClick = 'eventDoubleClick';
/** @private */
const eventRendered = 'eventRendered';
/** @private */
const dataBinding = 'dataBinding';
/** @private */
const dataBound = 'dataBound';
/** @private */
const popupOpen = 'popupOpen';
/** @private */
const popupClose = 'popupClose';
/** @private */
const dragStart = 'dragStart';
/** @private */
const drag = 'drag';
/** @private */
const dragStop = 'dragStop';
/** @private */
const resizeStart = 'resizeStart';
/** @private */
const resizing = 'resizing';
/** @private */
const resizeStop = 'resizeStop';
/** @private */
const inlineClick = 'inlineClick';
/** @private */
const cellSelect = 'cellSelect';
/** @private */
const virtualScrollStart = 'virtualScrollStart';
/** @private */
const virtualScrollStop = 'virtualScrollStop';
/** @private */
const noEvents = 'noEvents';
/** @private */
const agendaCells = 'agendaCells';
/** @private */
const resourceHeader = 'resourceHeader';
/** @private */
const dateHeader = 'dateHeader';
/** @private */
const beforePaste = 'beforePaste';
/** @private */
const beforePrint = 'beforePrint';
/** @private */
const excelExport = 'excelExport';
/** @private */
const tooltipOpen = 'tooltipOpen';
/**
* Specifies schedule internal events
*/
/** @private */
const initialLoad = 'initial-load';
/** @private */
const initialEnd = 'initial-end';
/** @private */
const print = 'print';
/** @private */
const dataReady = 'data-ready';
/** @private */
const eventsLoaded = 'events-loaded';
/** @private */
const contentReady = 'content-ready';
/** @private */
const scroll = 'scroll';
/** @private */
const virtualScroll = 'virtual-scroll';
/** @private */
const scrollUiUpdate = 'scroll-ui-update';
/** @private */
const uiUpdate = 'ui-update';
/** @private */
const documentClick = 'document-click';
/** @private */
const documentPaste = 'document-paste';
/** @private */
const cellMouseDown = 'cell-mouse-down';
/* eslint-disable @typescript-eslint/no-explicit-any */
/**
* Schedule common utilities
*/
const WEEK_LENGTH = 7;
const DEFAULT_WEEKS = 6;
const MS_PER_DAY = 86400000;
const MS_PER_MINUTE = 60000;
/**
* Method to get height from element
*
* @param {Element} container Accepts the DOM element
* @param {string} elementClass Accepts the element class
* @param {boolean} isTransformed Accepts the boolean value that indicates the status of the transform style applied to the element
* @returns {number} Returns the height of the element
*/
function getElementHeightFromClass(container, elementClass, isTransformed) {
let height = 0;
const el = createElement('div', { className: elementClass }).cloneNode();
el.style.visibility = 'hidden';
el.style.position = 'absolute';
container.appendChild(el);
height = getElementHeight(el, isTransformed);
remove(el);
return height;
}
/**
* Method to get width from element
*
* @param {Element} container Accepts the DOM element
* @param {string} elementClass Accepts the element class
* @param {boolean} isTransformed Accepts the boolean value that indicates the status of the transform style applied to the element
* @returns {number} Returns the width of the element
*/
function getElementWidthFromClass(container, elementClass, isTransformed) {
let width = 0;
const el = createElement('div', { className: elementClass }).cloneNode();
el.style.visibility = 'hidden';
el.style.position = 'absolute';
container.appendChild(el);
width = getElementWidth(el, isTransformed);
remove(el);
return width;
}
/**
* Method to get translateY value
*
* @param {HTMLElement | Element} element Accepts the DOM element
* @returns {number} Returns the translateY value of given element
*/
function getTranslateY(element) {
const style = getComputedStyle(element);
return window.WebKitCSSMatrix ?
new WebKitCSSMatrix(style.webkitTransform).m42 : 0;
}
/**
* Method to get translateX value
*
* @param {HTMLElement | Element} element Accepts the DOM element
* @returns {number} Returns the translateX value of given element
*/
function getTranslateX(element) {
const style = getComputedStyle(element);
return window.WebKitCSSMatrix ?
new WebKitCSSMatrix(style.webkitTransform).m41 : 0;
}
/**
* Method to get week first date
*
* @param {Date} date Accepts the date object
* @param {number} firstDayOfWeek Accepts the first day of week number
* @returns {Date} Returns the date object
*/
function getWeekFirstDate(date, firstDayOfWeek) {
const date1 = new Date(date.getTime());
firstDayOfWeek = (firstDayOfWeek - date1.getDay() + 7 * (-1)) % 7;
return new Date(date1.setDate(date1.getDate() + (isNaN(firstDayOfWeek) ? 0 : firstDayOfWeek)));
}
/**
* Method to get week last date
*
* @param {Date} date Accepts the date object
* @param {number} firstDayOfWeek Accepts the first day of week number
* @returns {Date} Returns the date object
*/
function getWeekLastDate(date, firstDayOfWeek) {
const weekFirst = getWeekFirstDate(date, firstDayOfWeek);
const weekLast = new Date(weekFirst.getFullYear(), weekFirst.getMonth(), weekFirst.getDate() + 6);
return new Date(weekLast.getTime());
}
/**
* Method to get first date of month
*
* @param {Date} date Accepts the date object
* @returns {Date} Returns the date object
*/
function firstDateOfMonth(date) {
return new Date(date.getFullYear(), date.getMonth(), 1);
}
/**
* Method to get last date of month
*
* @param {Date} date Accepts the date object
* @returns {Date} Returns the date object
*/
function lastDateOfMonth(date) {
return new Date(date.getFullYear(), date.getMonth() + 1, 0);
}
/**
* Method to get week number
*
* @param {Date} date Accepts the date object
* @returns {number} Returns the week number
*/
function getWeekNumber(date) {
const date1 = new Date(date.getFullYear(), 0, 1).valueOf();
const currentDate = new Date(date.getFullYear(), date.getMonth(), date.getDate()).valueOf();
const dayOfYear = ((currentDate - date1 + MS_PER_DAY) / MS_PER_DAY);
return Math.ceil(dayOfYear / 7);
}
/**
* Method to get week middle date
*
* @param {Date} weekFirst Accepts the week first date object
* @param {Date} weekLast Accepts the week last date object
* @returns {Date} Returns the date object
*/
function getWeekMiddleDate(weekFirst, weekLast) {
return new Date(weekLast.valueOf() - ((weekLast.valueOf() - weekFirst.valueOf()) / 2));
}
/**
* Method to set time to date object
*
* @param {Date} date Accepts the date object
* @param {number} time Accepts the milliseconds
* @returns {Date} Returns the date object
*/
function setTime(date, time) {
const tzOffsetBefore = date.getTimezoneOffset();
const d = new Date(date.getTime() + time);
const tzOffsetDiff = d.getTimezoneOffset() - tzOffsetBefore;
date.setTime(d.getTime() + tzOffsetDiff * MS_PER_MINUTE);
return date;
}
/**
* Method the reset hours in date object
*
* @param {Date} date Accepts the date object
* @returns {Date} Returns the date object
*/
function resetTime(date) {
return new Date(date.getFullYear(), date.getMonth(), date.getDate());
}
/**
* Method to get milliseconds from date object
*
* @param {Date} date Accepts the date object
* @returns {number} Returns the milliseconds from date object
*/
function getDateInMs(date) {
const localOffset = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0).getTimezoneOffset();
const dateOffset = date.getTimezoneOffset();
const timezoneOffset = dateOffset - localOffset;
return ((date.getTime() - new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0).getTime())
- (timezoneOffset * 60 * 1000));
}
/**
* Method to get date count between two dates
*
* @param {Date} startDate Accepts the date object
* @param {Date} endDate Accepts the date object
* @returns {number} Returns the date count
*/
function getDateCount(startDate, endDate) {
return Math.ceil((endDate.getTime() - startDate.getTime()) / MS_PER_DAY);
}
/**
* Method to add no of days in date object
*
* @param {Date} date Accepts the date object
* @param {number} noOfDays Accepts the number of days count
* @returns {Date} Returns the date object
*/
function addDays(date, noOfDays) {
date = new Date('' + date);
return new Date(date.setDate(date.getDate() + noOfDays));
}
/**
* Method to add no of months in date object
*
* @param {Date} date Accepts the date object
* @param {number} noOfMonths Accepts the number of month count
* @returns {Date} Returns the date object
*/
function addMonths(date, noOfMonths) {
date = new Date('' + date);
const day = date.getDate();
date.setDate(1);
date.setMonth(date.getMonth() + noOfMonths);
date.setDate(Math.min(day, getMaxDays(date)));
return date;
}
/**
* Method to add no of years in date object
*
* @param {Date} date Accepts the date object
* @param {number} noOfYears Accepts the number of month count
* @returns {Date} Returns the date object
*/
function addYears(date, noOfYears) {
date = new Date('' + date);
const day = date.getDate();
date.setDate(1);
date.setFullYear(date.getFullYear() + noOfYears);
date.setDate(Math.min(day, getMaxDays(date)));
return date;
}
/**
* Method to get start and end hours
*
* @param {Date} date Accepts the date object
* @param {Date} startHour Accepts the start hour date object
* @param {Date} endHour Accepts the end hour date object
* @returns {Object} Returns the start and end hour date objects
*/
function getStartEndHours(date, startHour, endHour) {
const date1 = new Date(date.getTime());
date1.setHours(startHour.getHours());
date1.setMinutes(startHour.getMinutes());
date1.setSeconds(startHour.getSeconds());
let date2 = new Date(date.getTime());
if (endHour.getHours() === 0) {
date2 = addDays(date2, 1);
}
else {
date2.setHours(endHour.getHours());
date2.setMinutes(endHour.getMinutes());
date2.setSeconds(endHour.getSeconds());
}
return { startHour: date1, endHour: date2 };
}
/**
* Method to get month last date
*
* @param {Date} date Accepts the date object
* @returns {number} Returns the month last date
*/
function getMaxDays(date) {
return lastDateOfMonth(date).getDate();
}
/**
* Method to get days count between two dates
*
* @param {Date} startDate Accepts the date object
* @param {Date} endDate Accepts the date object
* @returns {number} Returns the days count
*/
function getDaysCount(startDate, endDate) {
const strTime = resetTime(new Date(startDate));
const endTime = resetTime(new Date(endDate));
return Math.round((endTime.getTime() - strTime.getTime()) / MS_PER_DAY);
}
/**
* Method to get date object from date string
*
* @param {string} date Accepts the date string
* @returns {Date} Returns the date object
*/
function getDateFromString(date) {
return date.indexOf('Date') !== -1 ? new Date(parseInt(date.match(/\d+/g).toString(), 10)) :
date.indexOf('T') !== -1 ? new Date(date) : new Date(date.replace(/-/g, '/'));
}
/** @private */
let scrollWidth = null;
/** @private */
let pixelRatio = null;
/**
* Method to get scrollbar width
*
* @returns {number} Returns the scrollbar width
* @private
*/
function getScrollBarWidth() {
if (scrollWidth !== null) {
return scrollWidth;
}
if (pixelRatio === null) {
pixelRatio = window.devicePixelRatio || window.screen.availWidth / document.documentElement.clientWidth;
}
const divNode = createElement('div');
let value = 0;
divNode.style.cssText = 'width:100px;height: 100px;overflow: scroll;position: absolute;top: -9999px;';
document.body.appendChild(divNode);
const ratio = (devicePixelRatio) ? (devicePixelRatio.toFixed(2) === '1.10' || devicePixelRatio <= 1) ?
Math.ceil(devicePixelRatio % 1) : Math.floor(devicePixelRatio % 1) : 0;
value = (divNode.offsetWidth - divNode.clientWidth - ratio) | 0;
document.body.removeChild(divNode);
return scrollWidth = value;
}
/**
* Method to reset scrollbar width
*
* @private
* @returns {void}
*/
function resetScrollbarWidth() {
const zoomPixelRatio = window.devicePixelRatio || window.screen.availWidth / document.documentElement.clientWidth;
if (pixelRatio && pixelRatio !== zoomPixelRatio) {
scrollWidth = null;
pixelRatio = zoomPixelRatio;
}
}
/**
* Method to find the index from data collection
*
* @param {Object} data Accepts the data as object
* @param {string} field Accepts the field name
* @param {string} value Accepts the value name
* @param {Object} event Accepts the data as object
* @param {Object[]} resourceCollection Accepts the data collections
* @returns {number} Returns the index number
*/
// eslint-disable-next-line max-len
function findIndexInData(data, field, value, event, resourceCollection) {
for (let i = 0, length = data.length; i < length; i++) {
if (data[parseInt(i.toString(), 10)][`${field}`] === value) {
if (event) {
const field = resourceCollection.slice(-2)[0].field;
const res = (event[`${field}`] instanceof Array ? event[`${field}`] : [event[`${field}`]]);
const resData = res.join(',');
if (resData.includes(data[parseInt(i.toString(), 10)][resourceCollection.slice(-1)[0].groupIDField])) {
return i;
}
}
else {
return i;
}
}
}
return -1;
}
/**
* Method to get element outer height
*
* @param {HTMLElement} element Accepts the DOM element
* @returns {number} Returns the outer height of the given element
*/
function getOuterHeight(element) {
const style = getComputedStyle(element);
return element.offsetHeight + (parseInt(style.marginTop, 10) || 0) + (parseInt(style.marginBottom, 10) || 0);
}
/**
* Method to remove child elements
*
* @param {HTMLElement | Element} element Accepts the DOM element
* @returns {void}
*/
function removeChildren(element) {
const elementChildren = [].slice.call(element.children);
for (const elementChild of elementChildren) {
element.removeChild(elementChild);
}
}
/**
* Method to check DST is present or not in date object
*
* @param {Date} date Accepts the date object
* @returns {boolean} Returns the boolean value for either DST is present or not
*/
function isDaylightSavingTime(date) {
const jan = new Date(date.getFullYear(), 0, 1);
const jul = new Date(date.getFullYear(), 6, 1);
return date.getTimezoneOffset() < Math.max(jan.getTimezoneOffset(), jul.getTimezoneOffset());
}
/**
* Method to get UTC time value from date
*
* @param {Date} date Accepts the date
* @returns {number} Returns the UTC time value
*/
function getUniversalTime(date) {
const year = date.getFullYear();
const month = date.getMonth();
const day = date.getDate();
const hours = date.getHours();
const minutes = date.getMinutes();
const seconds = date.getSeconds();
const milliseconds = date.getMilliseconds();
return Date.UTC(year, month, day, hours, minutes, seconds, milliseconds);
}
/**
* Method to check the device
*
* @returns {boolean} Returns the boolean value for either device is present or not.
*/
function isMobile() {
return window.navigator.userAgent.toLowerCase().indexOf('mobi') > -1;
}
/**
* Method to check the IPad device
*
* @returns {boolean} Returns the boolean value for either IPad device is present or not.
*/
function isIPadDevice() {
return window.navigator.userAgent.toLowerCase().indexOf('ipad') > -1;
}
/**
* Method to capitalize the first word in string
*
* @param {string} inputString Accepts the string value
* @param {string} type Accepts the string type
* @returns {string} Returns the output string
*/
function capitalizeFirstWord(inputString, type) {
if (type === 'multiple') {
inputString = inputString.split(' ').map((e) => e.charAt(0).toLocaleUpperCase() + e.substring(1)).join(' ');
}
else if (type === 'single') {
if (inputString[0] >= '0' && inputString[0] <= '9') {
const array = inputString.match(/[a-zA-Z]/);
inputString = isNullOrUndefined(array) ? inputString :
inputString.slice(0, array.index) + inputString[array.index].toLocaleUpperCase() + inputString.slice(array.index + 1);
}
inputString = inputString[0].toLocaleUpperCase() + inputString.slice(1);
}
return inputString;
}
/**
* Method to get element cell width
*
* @param {HTMLElement} element Accepts the DOM element
* @param {boolean} isTransformed Accepts the boolean value that indicates the status of the transform style applied to the element
* @returns {number} Returns the width of the given element
*/
function getElementWidth(element, isTransformed) {
return isTransformed ? element.offsetWidth : element.getBoundingClientRect().width;
}
/**
* Method to get element cell Height
*
* @param {HTMLElement} element Accepts the DOM element
* @param {boolean} isTransformed Accepts the boolean value that indicates the status of the transform style applied to the element
* @returns {number} Returns the Height of the given element
*/
function getElementHeight(element, isTransformed) {
return isTransformed ? element.offsetHeight : element.getBoundingClientRect().height;
}
/**
* Method to get element cell Top
*
* @param {HTMLElement} element Accepts the DOM element
* @param {boolean} isTransformed Accepts the boolean value that indicates the status of the transform style applied to the element
* @returns {number} Returns the top value of the given element
*/
function getElementTop(element, isTransformed) {
return isTransformed ? element.offsetTop : element.getBoundingClientRect().top;
}
/**
* CSS Constants
*/
/** @private */
const ROOT = 'e-schedule';
/** @private */
const RTL = 'e-rtl';
/** @private */
const DEVICE_CLASS = 'e-device';
/** @private */
const ADAPTIVE_CLASS = 'e-adaptive';
/** @private */
const MULTI_DRAG = 'e-multi-drag';
/** @private */
const ICON = 'e-icons';
/** @private */
const ENABLE_CLASS = 'e-enable';
/** @private */
const DISABLE_CLASS = 'e-disable';
/** @private */
const TABLE_CONTAINER_CLASS = 'e-table-container';
/** @private */
const SCHEDULE_TABLE_CLASS = 'e-schedule-table';
/** @private */
const ALLDAY_CELLS_CLASS = 'e-all-day-cells';
/** @private */
const HEADER_POPUP_CLASS = 'e-header-popup';
/** @private */
const HEADER_CALENDAR_CLASS = 'e-header-calendar';
/** @private */
const ALLDAY_ROW_CLASS = 'e-all-day-row';
/** @private */
const CONTENT_TABLE_CLASS = 'e-content-table';
/** @private */
const WORK_CELLS_CLASS = 'e-work-cells';
/** @private */
const WORK_HOURS_CLASS = 'e-work-hours';
/** @private */
const POPUP_OPEN = 'e-popup-open';
/** @private */
const POPUP_CLOSE = 'e-popup-close';
/** @private */
const DATE_HEADER_WRAP_CLASS = 'e-date-header-wrap';
/** @private */
const DATE_HEADER_CONTAINER_CLASS = 'e-date-header-container';
/** @private */
const HEADER_CELLS_CLASS = 'e-header-cells';
/** @private */
const HEADER_WEEK_CELLS_CLASS = 'e-header-week-cell';
/** @private */
const HEADER_MONTH_CELLS_CLASS = 'e-header-month-cell';
/** @private */
const HEADER_YEAR_CELLS_CLASS = 'e-header-year-cell';
/** @private */
const WORKDAY_CLASS = 'e-work-days';
/** @private */
const OTHERMONTH_CLASS = 'e-other-month';
/** @private */
const CURRENT_DAY_CLASS = 'e-current-day';
/** @private */
const CURRENTDATE_CLASS = 'e-current-date';
/** @private */
const CURRENT_PANEL_CLASS = 'e-current-panel';
/** @private */
const PREVIOUS_PANEL_CLASS = 'e-previous-panel';
/** @private */
const NEXT_PANEL_CLASS = 'e-next-panel';
/** @private */
const PREVIOUS_DATE_CLASS = 'e-prev';
/** @private */
const NEXT_DATE_CLASS = 'e-next';
/** @private */
const TRANSLATE_CLASS = 'e-translate';
/** @private */
const LEFT_INDENT_CLASS = 'e-left-indent';
/** @private */
const LEFT_INDENT_WRAP_CLASS = 'e-left-indent-wrap';
/** @private */
const EVENT_TABLE_CLASS = 'e-event-table';
/** @private */
const RESOURCE_LEFT_TD_CLASS = 'e-resource-left-td';
/** @private */
const RESOURCE_GROUP_CELLS_CLASS = 'e-resource-group-cells';
/** @private */
const RESOURCE_TEXT_CLASS = 'e-resource-text';
/** @private */
const RESOURCE_COLUMN_WRAP_CLASS = 'e-resource-column-wrap';
/** @private */
const RESOURCE_COLUMN_TABLE_CLASS = 'e-resource-column-table';
/** @private */
const RESOURCE_CHILD_CLASS = 'e-child-node';
/** @private */
const RESOURCE_PARENT_CLASS = 'e-parent-node';
/** @private */
const RESOURCE_EXPAND_CLASS = 'e-resource-expand';
/** @private */
const RESOURCE_COLLAPSE_CLASS = 'e-resource-collapse';
/** @private */
const RESOURCE_TREE_ICON_CLASS = 'e-resource-tree-icon';
/** @private */
const RESOURCE_CELLS_CLASS = 'e-resource-cells';
/** @private */
const TIME_CELLS_WRAP_CLASS = 'e-time-cells-wrap';
/** @private */
const TIME_CELLS_CLASS = 'e-time-cells';
/** @private */
const TIME_SLOT_CLASS = 'e-time-slots';
/** @private */
const ALTERNATE_CELLS_CLASS = 'e-alternate-cells';
/** @private */
const CURRENT_TIME_CLASS = 'e-current-time';
/** @private */
const CURRENT_TIMELINE_CLASS = 'e-current-timeline';
/** @private */
const PREVIOUS_TIMELINE_CLASS = 'e-previous-timeline';
/** @private */
const HIDE_CHILDS_CLASS = 'e-hide-childs';
/** @private */
const SCROLL_CONTAINER_CLASS = 'e-scroll-container';
/** @private */
const TIMELINE_WRAPPER_CLASS = 'e-timeline-wrapper';
/** @private */
const APPOINTMENT_WRAPPER_CLASS = 'e-appointment-wrapper';
/** @private */
const APPOINTMENT_WRAPPER_HIDDEN_CLASS = 'e-appointment-wrapper-hidden';
/** @private */
const DAY_WRAPPER_CLASS = 'e-day-wrapper';
/** @private */
const TOOLBAR_CONTAINER = 'e-schedule-toolbar-container';
/** @private */
const RESOURCE_TOOLBAR_CONTAINER = 'e-schedule-resource-toolbar-container';
/** @private */
const HEADER_TOOLBAR = 'e-schedule-toolbar';
/** @private */
const RESOURCE_HEADER_TOOLBAR = 'e-schedule-resource-toolbar';
/** @private */
const SELECTED_CELL_CLASS = 'e-selected-cell';
/** @private */
const WEEK_NUMBER_WRAPPER_CLASS = 'e-week-number-wrapper';
/** @private */
const WEEK_NUMBER_CLASS = 'e-week-number';
/** @private */
const APPOINTMENT_WRAP_CLASS = 'e-appointment-wrap';
/** @private */
const WRAPPER_CONTAINER_CLASS = 'e-wrapper-container';
/** @private */
const APPOINTMENT_CONTAINER_CLASS = 'e-appointment-container';
/** @private */
const APPOINTMENT_CLASS = 'e-appointment';
/** @private */
const BLOCK_APPOINTMENT_CLASS = 'e-block-appointment';
/** @private */
const BLOCK_INDICATOR_CLASS = 'e-block-indicator';
/** @private */
const APPOINTMENT_BORDER = 'e-appointment-border';
/** @private */
const APPOINTMENT_DETAILS = 'e-appointment-details';
/** @private */
const SUBJECT_WRAP = 'e-subject-wrap';
/** @private */
const RESOURCE_NAME = 'e-resource-name';
/** @private */
const APPOINTMENT_TIME = 'e-time';
/** @private */
const TABLE_WRAP_CLASS = 'e-table-wrap';
/** @private */
const OUTER_TABLE_CLASS = 'e-outer-table';
/** @private */
const CONTENT_WRAP_CLASS = 'e-content-wrap';
/** @private */
const VIRTUAL_TRACK_CLASS = 'e-virtual-track';
/** @private */
const AGENDA_CELLS_CLASS = 'e-agenda-cells';
/** @private */
const AGENDA_CURRENT_DAY_CLASS = 'e-current-day';
/** @private */
const AGENDA_SELECTED_CELL = 'e-active-appointment-agenda';
/** @private */
const MONTH_HEADER_CLASS = 'e-month-header';
/** @private */
const AGENDA_HEADER_CLASS = 'e-day-date-header';
/** @private */
const AGENDA_RESOURCE_CLASS = 'e-resource-column';
/** @private */
const AGENDA_DATE_CLASS = 'e-date-column';
/** @private */
const NAVIGATE_CLASS = 'e-navigate';
/** @private */
const DATE_HEADER_CLASS = 'e-date-header';
/** @private */
const AGENDA_DAY_BORDER_CLASS = 'e-day-border';
/** @private */
const DATE_BORDER_CLASS = 'e-date-border';
/** @private */
const AGENDA_DAY_PADDING_CLASS = 'e-day-padding';
/** @private */
const DATE_TIME_CLASS = 'e-date-time';
/** @private */
const DATE_TIME_WRAPPER_CLASS = 'e-date-time-wrapper';
/** @private */
const AGENDA_EMPTY_EVENT_CLASS = 'e-empty-event';
/** @private */
const AGENDA_NO_EVENT_CLASS = 'e-no-event';
/** @private */
const APPOINTMENT_INDICATOR_CLASS = 'e-appointment-indicator';
/** @private */
const EVENT_INDICATOR_CLASS = 'e-indicator';
/** @private */
const EVENT_ICON_UP_CLASS = 'e-up-icon';
/** @private */
const EVENT_ICON_DOWN_CLASS = 'e-down-icon';
/** @private */
const EVENT_ICON_LEFT_CLASS = 'e-left-icon';
/** @private */
const EVENT_ICON_RIGHT_CLASS = 'e-right-icon';
/** @private */
const EVENT_ACTION_CLASS = 'e-event-action';
/** @private */
const NEW_EVENT_CLASS = 'e-new-event';
/** @private */
const CLONE_ELEMENT_CLASS = 'e-schedule-event-clone';
/** @private */
const MONTH_CLONE_ELEMENT_CLASS = 'e-month-event';
/** @private */
const CLONE_TIME_INDICATOR_CLASS = 'e-clone-time-indicator';
/** @private */
const DRAG_CLONE_CLASS = 'e-drag-clone';
/** @private */
const EVENT_RESIZE_CLASS = 'e-event-resize';
/** @private */
const RESIZE_CLONE_CLASS = 'e-resize-clone';
/** @private */
const LEFT_RESIZE_HANDLER = 'e-left-handler';
/** @private */
const RIGHT_RESIZE_HANDLER = 'e-right-handler';
/** @private */
const TOP_RESIZE_HANDLER = 'e-top-handler';
/** @private */
const BOTTOM_RESIZE_HANDLER = 'e-bottom-handler';
/** @private */
const EVENT_RECURRENCE_ICON_CLASS = 'e-recurrence-icon';
/** @private */
const EVENT_RECURRENCE_EDIT_ICON_CLASS = 'e-recurrence-edit-icon';
/** @private */
const HEADER_ROW_CLASS = 'e-header-row';
/** @private */
const ALLDAY_APPOINTMENT_WRAPPER_CLASS = 'e-all-day-appointment-wrapper';
/** @private */
const ALLDAY_APPOINTMENT_CLASS = 'e-all-day-appointment';
/** @private */
const EVENT_COUNT_CLASS = 'e-appointment-hide';
/** @private */
const ROW_COUNT_WRAPPER_CLASS = 'e-row-count-wrapper';
/** @private */
const ALLDAY_APPOINTMENT_SECTION_CLASS = 'e-all-day-appointment-section';
/** @private */
const APPOINTMENT_ROW_EXPAND_CLASS = 'e-appointment-expand';
/** @private */
const APPOINTMENT_ROW_COLLAPSE_CLASS = 'e-appointment-collapse';
/** @private */
const MORE_INDICATOR_CLASS = 'e-more-indicator';
/** @private */
const CELL_POPUP_CLASS = 'e-cell-popup';
/** @private */
const EVENT_POPUP_CLASS = 'e-event-popup';
/** @private */
const MULTIPLE_EVENT_POPUP_CLASS = 'e-multiple-event-popup';
/** @private */
const POPUP_HEADER_CLASS = 'e-popup-header';
/** @private */
const POPUP_HEADER_ICON_WRAPPER = 'e-header-icon-wrapper';
/** @private */
const POPUP_CONTENT_CLASS = 'e-popup-content';
/** @private */
const POPUP_FOOTER_CLASS = 'e-popup-footer';
/** @private */
const DATE_TIME_DETAILS_CLASS = 'e-date-time-details';
/** @private */
const RECURRENCE_SUMMARY_CLASS = 'e-recurrence-summary';
/** @private */
const QUICK_POPUP_EVENT_DETAILS_CLASS = 'e-event-details';
/** @private */
const EVENT_CREATE_CLASS = 'e-event-create';
/** @private */
const EDIT_EVENT_CLASS = 'e-event-edit';
/** @private */
const DELETE_EVENT_CLASS = 'e-event-delete';
/** @private */
const TEXT_ELLIPSIS = 'e-text-ellipsis';
/** @private */
const MORE_POPUP_WRAPPER_CLASS = 'e-more-popup-wrapper';
/** @private */
const MORE_EVENT_POPUP_CLASS = 'e-more-event-popup';
/** @private */
const MORE_EVENT_HEADER_CLASS = 'e-more-event-header';
/** @private */
const MORE_EVENT_DATE_HEADER_CLASS = 'e-more-event-date-header';
/** @private */
const MORE_EVENT_HEADER_DAY_CLASS = 'e-header-day';
/** @private */
const MORE_EVENT_HEADER_DATE_CLASS = 'e-header-date';
/** @private */
const MORE_EVENT_CLOSE_CLASS = 'e-more-event-close';
/** @private */
const MORE_EVENT_CONTENT_CLASS = 'e-more-event-content';
/** @private */
const MORE_EVENT_WRAPPER_CLASS = 'e-more-appointment-wrapper';
/** @private */
const QUICK_DIALOG_CLASS = 'e-quick-dialog';
/** @private */
const QUICK_DIALOG_OCCURRENCE_CLASS = 'e-quick-dialog-occurrence-event';
/** @private */
const QUICK_DIALOG_SERIES_CLASS = 'e-quick-dialog-series-event';
/** @private */
const QUICK_DIALOG_FOLLOWING_EVENTS_CLASS = 'e-quick-dialog-following-events';
/** @private */
const FOLLOWING_EVENTS_DIALOG = 'e-following-events-dialog';
/** @private */
const QUICK_DIALOG_DELETE_CLASS = 'e-quick-dialog-delete';
/** @private */
const QUICK_DIALOG_CANCEL_CLASS = 'e-quick-dialog-cancel';
/** @private */
const QUICK_DIALOG_ALERT_OK = 'e-quick-alertok';
/** @private */
const QUICK_DIALOG_ALERT_CANCEL = 'e-quick-alertcancel';
/** @private */
const QUICK_DIALOG_ALERT_FOLLOWING = 'e-quick-alertfollowing';
/** @private */
const QUICK_DIALOG_ALERT_BTN_CLASS = 'e-quick-dialog-alert-btn';
/** @private */
const EVENT_WINDOW_DIALOG_CLASS = 'e-schedule-dialog';
/** @private */
const FORM_CONTAINER_CLASS = 'e-form-container';
/** @private */
const FORM_CLASS = 'e-schedule-form';
/** @private */
const EVENT_WINDOW_ALLDAY_TZ_DIV_CLASS = 'e-all-day-time-zone-row';
/** @private */
const EVENT_WINDOW_ALL_DAY_CLASS = 'e-all-day';
/** @private */
const TIME_ZONE_CLASS = 'e-time-zone';
/** @private */
const TIME_ZONE_ICON_CLASS = 'e-time-zone-icon';
/** @private */
const TIME_ZONE_DETAILS_CLASS = 'e-time-zone-details';
/** @private */
const EVENT_WINDOW_REPEAT_DIV_CLASS = 'e-repeat-parent-row';
/** @private */
const EVENT_WINDOW_REPEAT_CLASS = 'e-repeat';
/** @private */
const EVENT_WINDOW_TITLE_LOCATION_DIV_CLASS = 'e-title-location-row';
/** @private */
const SUBJECT_CLASS = 'e-subject';
/** @private */
const LOCATION_CLASS = 'e-location';
/** @private */
const LOCATION_ICON_CLASS = 'e-location-icon';
/** @private */
const LOCATION_DETAILS_CLASS = 'e-location-details';
/** @private */
const EVENT_WINDOW_START_END_DIV_CLASS = 'e-start-end-row';
/** @private */
const EVENT_WINDOW_START_CLASS = 'e-start';
/** @private */
const EVENT_WINDOW_END_CLASS = 'e-end';
/** @private */
const EVENT_WINDOW_RESOURCES_DIV_CLASS = 'e-resources-row';
/** @private */
const DESCRIPTION_CLASS = 'e-description';
/** @private */
const DESCRIPTION_ICON_CLASS = 'e-description-icon';
/** @private */
const DESCRIPTION_DETAILS_CLASS = 'e-description-details';
/** @private */
const EVENT_WINDOW_TIME_ZONE_DIV_CLASS = 'e-time-zone-row';
/** @private */
const EVENT_WINDOW_START_TZ_CLASS = 'e-start-time-zone';
/** @private */
const EVENT_WINDOW_END_TZ_CLASS = 'e-end-time-zone';
/** @private */
const EVENT_WINDOW_BACK_ICON_CLASS = 'e-back-icon';
/** @private */
const EVENT_WINDOW_SAVE_ICON_CLASS = 'e-save-icon';
/** @private */
const EVENT_WINDOW_CANCEL_BUTTON_CLASS = 'e-event-cancel';
/** @private */
const EVENT_WINDOW_SAVE_BUTTON_CLASS = 'e-event-save';
/** @private */
const EVENT_WINDOW_DIALOG_PARENT_CLASS = 'e-dialog-parent';
/** @private */
const EVENT_WINDOW_TITLE_TEXT_CLASS = 'e-title-text';
/** @private */
const EVENT_WINDOW_ICON_DISABLE_CLASS = 'e-icon-disable';
/** @private */
const EDIT_CLASS = 'e-edit';
/** @private */
const EDIT_ICON_CLASS = 'e-edit-icon';
/** @private */
const DELETE_CLASS = 'e-delete';
/** @private */
const DELETE_ICON_CLASS = 'e-delete-icon';
/** @private */
const CLOSE_CLASS = 'e-close';
/** @private */
const CLOSE_ICON_CLASS = 'e-close-icon';
/** @private */
const ERROR_VALIDATION_CLASS = 'e-schedule-error';
/** @private */
const EVENT_TOOLTIP_ROOT_CLASS = 'e-schedule-event-tooltip';
/** @private */
const TOOLTIP_HIDDEN_CLASS = 'e-tooltip-hidden';
/** @private */
const ALLDAY_ROW_ANIMATE_CLASS = 'e-animate';
/** @private */
const TIMESCALE_DISABLE = 'e-timescale-disable';
/** @private */
const DISABLE_DATE = 'e-disable-date';
/** @private */
const HIDDEN_CLASS = 'e-hidden';
/** @private */
const DISABLE_DATES = 'e-disable-dates';
/** @private */
const POPUP_WRAPPER_CLASS = 'e-quick-popup-wrapper';
/** @private */
const POPUP_TABLE_CLASS = 'e-popup-table';
/** @private */
const RESOURCE_MENU = 'e-resource-menu';
/** @private */
const RESOURCE_MENU_ICON = 'e-icon-menu';
/** @private */
const RESOURCE_LEVEL_TITLE = 'e-resource-level-title';
/** @private */
const RESOURCE_TREE = 'e-resource-tree';
/** @private */
const RESOURCE_TREE_POPUP_OVERLAY = 'e-resource-tree-popup-overlay';
/** @private */
const RESOURCE_TREE_POPUP = 'e-resource-tree-popup';
/** @private */
const RESOURCE_CLASS = 'e-resource';
/** @private */
const RESOURCE_ICON_CLASS = 'e-resource-icon';
/** @private */
const RESOURCE_DETAILS_CLASS = 'e-resource-details';
/** @private */
const DATE_TIME_ICON_CLASS = 'e-date-time-icon';
/** @private */
const VIRTUAL_SCROLL_CLASS = 'e-virtual-scroll';
/** @private */
const ICON_DISABLE_CLASS = 'e-icon-disable';
/** @private */
const AUTO_HEIGHT = 'e-auto-height';
/** @private */
const IGNORE_WHITESPACE = 'e-ignore-whitespace';
/** @private */
const EVENT_TEMPLATE = 'e-template';
/** @private */
const READ_ONLY = 'e-read-only';
/** @private */
const MONTH_HEADER_WRAPPER = 'e-month-header-wrapper';
/** @private */
const INLINE_SUBJECT_CLASS = 'e-inline-subject';
/** @private */
const INLINE_APPOINTMENT_CLASS = 'e-inline-appointment';
/** @private */
const INLINE_EDIT_CLASS = 'e-inline-edit';
/** @hidden */
const SCROLL_HIDDEN = 'e-scroll-hidden';
/** @private */
const ALLDAY_APPOINTMENT_SCROLL = 'e-all-day-scroll';
/** @private */
const ALLDAY_APPOINTMENT_AUTO = 'e-all-day-auto';
/** @private */
const CLIPBOARD_CLASS = 'e-clipboard';
/* eslint-disable @typescript-eslint/no-explicit-any */
/**
* Header module
*/
class HeaderRenderer {
constructor(parent) {
this.parent = parent;
this.l10n = this.parent.localeObj;
this.renderHeader();
this.addEventListener();
}
addEventListener() {
this.parent.on(documentClick, this.closeHeaderPopup, this);
}
removeEventListener() {
this.parent.off(documentClick, this.closeHeaderPopup);
}
closeHeaderPopup(e) {
const closestEle = closest(e.event.target, '.e-date-range,.e-header-popup,.e-day,.e-selected');
const closestPop = closest(e.event.target, '.e-hor-nav,.e-toolbar-pop');
const contentWrap = this.parent.element.querySelector('.' + CONTENT_WRAP_CLASS);
const toolbarPop = this.parent.element.querySelector('.e-toolbar-pop');
if (this.parent.isAdaptive) {
if (!isNullOrUndefined(closestPop) && (closestPop.classList.contains('e-toolbar-pop') ||
closestPop.classList.contains('e-hor-nav')) && !(closestPop.classList.contains('e-hor-nav') &&
toolbarPop && toolbarPop.classList.contains(POPUP_OPEN))) {
addClass([contentWrap], SCROLL_HIDDEN);
}
else {
removeClass([contentWrap], SCROLL_HIDDEN);
const popupEle = this.element.querySelector('.e-toolbar-pop');
if (!isNullOrUndefined(popupEle)) {
const popupObj = popupEle.ej2_instances[0];
if (popupObj && !(!isNullOrUndefined(closestPop) && closestPop.classList.contains('e-hor-nav') &&
popupEle.classList.contains(POPUP_OPEN))) {
popupObj.hide();
}
}
}
}
if (!isNullOrUndefined(closestEle)) {
return;
}
this.hideHeaderPopup();
}
hideHeaderPopup() {
if (this.headerPopup) {
this.headerPopup.hide();
}
}
renderHeader() {
this.element = createElement('div', { className: TOOLBAR_CONTAINER });
const toolbarEle = createElement('div', { className: HEADER_TOOLBAR });
this.element.appendChild(toolbarEle);
this.parent.element.insertBefore(this.element, this.parent.element.firstElementChild);
this.renderToolbar();
}
renderToolbar() {
const items = (this.parent.toolbarItems && this.parent.toolbarItems.length > 0) ?
this.getToolbarItems() : this.getItems();
this.parent.trigger(actionBegin, { requestType: 'toolbarItemRendering', items: items }, (args) => {
this.toolbarObj = new Toolbar({
items: args.items,
overflowMode: 'Popup',
clicked: this.toolbarClickHandler.bind(this),
created: this.toolbarCreateHandler.bind(this),
enableRtl: this.parent.enableRtl,
enableHtmlSanitizer: this.parent.enableHtmlSanitizer,
locale: this.parent.locale
});
this.toolbarObj.isStringTemplate = true;
this.toolbarObj.root = this.parent.root ? this.parent.root : this.parent;
this.toolbarObj.appendTo(this.parent.element.querySelector('.' + HEADER_TOOLBAR));
this.toolbarObj.element.setAttribute('aria-label', 'Scheduler');
const prevNavEle = this.toolbarObj.element.querySelector('.e-prev');
if (prevNavEle) {
prevNavEle.firstElementChild.setAttribute('title', this.l10n.getConstant('previous'));
}
const nextNavEle = this.toolbarObj.element.querySelector('.e-next');
if (nextNavEle) {
nextNavEle.firstElementChild.setAttribute('title', this.l10n.getConstant('next'));
}
this.updateAddIcon();
this.updateActiveView();
this.parent.trigger(actionComplete, { requestType: 'toolBarItemRendered', items: this.toolbarObj.items });
});
}
updateItems() {
if (this.toolbarObj) {
const items = this.getItems();
this.parent.trigger(actionBegin, { requestType: 'toolbarItemRendering', items: items }, (args) => {
this.toolbarObj.items = args.items;
this.toolbarObj.dataBind();
this.parent.trigger(actionComplete, { requestType: 'toolBarItemRendered', items: this.toolbarObj.items });
});
}
}
getPopUpRelativeElement() {
if (this.parent.isAdaptive) {
return this.toolbarObj.element;
}
return this.element.querySelector('.e-date-range');
}
setDayOfWeek(index) {
if (this.headerCalendar) {
this.headerCalendar.firstDayOfWeek = index;
this.headerCalendar.dataBind();
}
}
setCalendarDate(date) {
if (this.headerCalendar) {
this.headerCalendar.value = date;
this.headerCalendar.dataBind();
}
}
setCalendarMinMaxDate() {
if (this.headerCalendar) {
this.headerCalendar.min = this.parent.minDate;
this.headerCalendar.max = this.parent.maxDate;
this.headerCalendar.dataBind();
}
}
getCalendarView() {
if (['Month', 'MonthAgenda', 'TimelineMonth'].indexOf(this.parent.currentView) > -1) {
return 'Year';
}
else if (['Year', 'TimelineYear'].indexOf(this.parent.currentView) > -1) {
return 'Decade';
}
else {
return 'Month';
}
}
setCalendarView() {
if (this.headerCalendar) {
const calendarView = this.getCalendarView();
this.headerCalendar.depth = calendarView;
this.headerCalendar.start = calendarView;
this.headerCalendar.refresh();
}
}
updateActiveView() {
const selEle = [].slice.call(this.toolbarObj.element.querySelectorAll('.e-views'));
removeClass(selEle, ['e-active-view']);
if (selEle.length > 0 && selEle[this.parent.viewIndex]) {
addClass([selEle[this.parent.viewIndex]], ['e-active-view']);
}
}
updateDateRange(date) {
const selEle = this.toolbarObj.element.querySelector('.e-date-range');
if (!selEle) {
return;
}
selEle.firstElementChild.setAttribute('aria-haspopup', 'true');
const textEle = selEle.querySelector('.e-tbar-btn-text');
if (this.parent.activeViewOptions.dateRangeTemplate) {
textEle.textContent = '';
const args = {
startDate: this.parent.activeView.getStartDate(),
endDate: this.parent.activeView.getEndDate(), currentView: this.parent.currentView
};
const viewName = this.parent.activeViewOptions.dateRangeTemplateName;
const templateId = this.parent.element.id + '_' + viewName + 'dateRangeTemplate';
const dateTemplate = [].slice.call(this.parent.getDateRangeTemplate()(args, this.parent, 'dateRangeTemplate', templateId, false, undefined, undefined, this.parent.root));
append(dateTemplate, textEle);
}
else {
const text = this.parent.activeView.getDateRangeText(date);
selEle.firstElementChild.setAttribute('aria-label', text);
textEle.textContent = text;
}
this.refresh();
}
refresh() {
if (this.toolbarObj) {
this.toolbarObj.refreshOverflow();
}
}
updateAddIcon() {
const addEle = this.toolbarObj.element.querySelector('.e-add');
if (addEle) {
if (!this.parent.eventSettings.allowAdding) {
addClass([addEle], HIDDEN_CLASS);
}
else {
removeClass([addEle], HIDDEN_CLASS);
}
}
}
getDateRangeText() {
const dateString = this.parent.globalize.formatDate(this.parent.selectedDate, {
format: 'MMMM y', calendar: this.parent.getCalendarMode()
});
return capitalizeFirstWord(dateString, 'single');
}
getItemModel(propItem) {
const item = {};
if (propItem.id) {
item.id = propItem.id;
}
if (propItem.text) {
item.text = propItem.text;
}
if (propItem.tooltipText) {
item.tooltipText = propItem.tooltipText;
}
if (propItem.prefixIcon) {
item.prefixIcon = propItem.prefixIcon;
}
if (propItem.cssClass) {
item.cssClass = propItem.cssClass;
}
if (propItem.showTextOn !== 'Both') {
item.showTextOn = propItem.showTextOn;
}
if (propItem.template) {
item.template = propItem.template;
}
if (propItem.disabled) {
item.disabled = propItem.disabled;
}
if (propItem.width !== 'auto') {
item.width = propItem.width;
}
if (propItem.suffixIcon) {
item.suffixIcon = propItem.suffixIcon;
}
if (propItem.align !== 'Left') {
item.align = propItem.align;
}
if (propItem.overflow !== 'None') {
item.overflow = propItem.overflow;
}
if (propItem.htmlAttributes) {
item.htmlAttributes = propItem.htmlAttributes;
}
if (propItem.type !== 'Button') {
item.type = propItem.type;
}
if (propItem.visible !== true) {
item.visible = propItem.visible;
}
if (propItem.showAlwaysInPopup) {
item.showAlwaysInPopup = propItem.showAlwaysInPopup;
}
if (propItem.tabIndex !== -1) {
item.tabIndex = propItem.tabIndex;
}
return item;
}
getToolbarItems() {
const items = [];
let propItem;
for (const item of this.parent.toolbarItems) {
propItem = this.getItemModel(item);
let tbItem;
if (item.name) {
switch (item.name) {
case 'Today':
tbItem = {
showAlwaysInPopup: (this.parent.isAdaptive || this.parent.enableAdaptiveUI), prefixIcon: 'e-icon-today',
text: this.l10n.getConstant('today'), cssClass: 'e-today', overflow: 'Show'
};
tbItem.align = propItem.align ? propItem.align : item.align;
items.push(Object.assign({}, tbItem, propItem));
break;
case 'Previous':
tbItem = {
prefixIcon: 'e-icon-prev', tooltipText: 'Previous', overflow: 'Show',
cssClass: 'e-prev', htmlAttributes: { 'role': 'navigation' }
};
tbItem.align = propItem.align ? propItem.align : item.align;
items.push(Object.assign({}, tbItem, propItem));
break;
case 'Next':
tbItem = {
prefixIcon: 'e-icon-next', tooltipText: 'Next', overflow: 'Show',
cssClass: 'e-next', htmlAttributes: { 'role': 'navigation' }
};
tbItem.align = propItem.align ? propItem.align : item.align;
items.push(Object.assign({}, tbItem, propItem));
break;
case 'DateRangeText':
tbItem = {
text: this.getDateRangeText(), suffixIcon: 'e-icon-down-arrow', cssClass: 'e-date-range',
overflow: 'Show',
htmlAttributes: { 'aria-atomic': 'true', 'aria-live': 'assertive', 'role': 'navigation' }
};
tbItem.align = propItem.align ? propItem.align : item.align;
items.push(Object.assign({}, tbItem, propItem));
break;
case 'NewEvent':
tbItem = {
showAlwaysInPopup: (this.parent.isAdaptive || this.parent.enableAdaptiveUI), prefixIcon: 'e-icon-add',
text: this.l10n.getConstant('newEvent'), cssClass: 'e-add', overflow: 'Show'
};
tbItem.align = propItem.align ? propItem.align : item.align;
items.push(Object.assign({}, tbItem, propItem));
break;
case 'Views':
if (!isNullOrUndefined(this.parent.views) && this.parent.views.length > 1) {
for (const view of this.parent.views) {
tbItem = this.getItemObject(view);
tbItem.align = propItem.align ? propItem.align : item.align;
items.push(Object.assign({}, tbItem, propItem));
}
}
break;
case 'Custom':
items.push(item);
break;
}
}
else {
items.push(item);
}
}
return items;
}
getItems() {
const items = [];
items.push({
align: 'Left', prefixIcon: 'e-icon-prev', tooltipText: 'Previous', overflow: 'Show',
cssClass: 'e-prev'
});
items.push({
align: 'Left', prefixIcon: 'e-icon-next', tooltipText: 'Next', overflow: 'Show',
cssClass: 'e-next'
});
items.push({
align: 'Left', text: this.getDateRangeText(), suffixIcon: 'e-icon-down-arrow', cssClass: 'e-date-range',
overflow: 'Show',
htmlAttributes: { 'aria-atomic': 'true', 'aria-live': 'assertive' }
});
if (this.parent.isAdaptive || this.parent.enableAdaptiveUI) {
items.push({
align: 'Right', showAlwaysInPopup: (this.parent.isAdaptive || this.parent.enableAdaptiveUI), prefixIcon: 'e-icon-add',
text: this.l10n.getConstant('newEvent'), cssClass: 'e-add', overflow: 'Show'
});
items.push({
align: 'Right', showAlwaysInPopup: (this.parent.isAdaptive || this.parent.enableAdaptiveUI), prefixIcon: 'e-icon-today',
text: this.l10n.getConstant('today'), cssClass: 'e-today', overflow: 'Show'
});
}
else {
items.push({
align: 'Right', showAlwaysInPopup: (this.parent.isAdaptive || this.parent.enableAdaptiveUI), prefixIcon: 'e-icon-today',
text: this.l10n.getConstant('today'), cssClass: 'e-