devextreme/esm/__internal/scheduler/m_scheduler.js

JavaScript/TypeScript Component Suite for Responsive Web Development

/**
 * DevExtreme (esm/__internal/scheduler/m_scheduler.js)
 * Version: 25.2.5
 * Build date: Fri Feb 20 2026
 *
 * Copyright (c) 2012 - 2026 Developer Express Inc. ALL RIGHTS RESERVED
 * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
 */
import {
    triggerResizeEvent
} from "../../common/core/events/visibility_change";
import dateLocalization from "../../common/core/localization/date";
import messageLocalization from "../../common/core/localization/message";
import registerComponent from "../../core/component_registrator";
import config from "../../core/config";
import {
    getPublicElement
} from "../../core/element";
import $ from "../../core/renderer";
import {
    BindableTemplate
} from "../../core/templates/bindable_template";
import {
    EmptyTemplate
} from "../../core/templates/empty_template";
import Callbacks from "../../core/utils/callbacks";
import {
    noop
} from "../../core/utils/common";
import {
    compileGetter
} from "../../core/utils/data";
import dateUtils from "../../core/utils/date";
import dateSerialization from "../../core/utils/date_serialization";
import {
    Deferred,
    fromPromise,
    when
} from "../../core/utils/deferred";
import {
    extend
} from "../../core/utils/extend";
import {
    getBoundingRect
} from "../../core/utils/position";
import {
    isDeferred,
    isDefined,
    isEmptyObject,
    isFunction,
    isObject,
    isPromise
} from "../../core/utils/type";
import {
    hasWindow
} from "../../core/utils/window";
import DataHelperMixin from "../../data_helper";
import {
    custom as customDialog
} from "../../ui/dialog";
import errors from "../../ui/widget/ui.errors";
import {
    dateUtilsTs
} from "../core/utils/date";
import {
    createA11yStatusContainer
} from "./a11y_status/a11y_status_render";
import {
    getA11yStatusText
} from "./a11y_status/a11y_status_text";
import {
    AppointmentForm
} from "./appointment_popup/m_form";
import {
    AppointmentForm as AppointmentLegacyForm
} from "./appointment_popup/m_legacy_form";
import {
    ACTION_TO_APPOINTMENT,
    AppointmentPopup as AppointmentLegacyPopup
} from "./appointment_popup/m_legacy_popup";
import {
    AppointmentPopup
} from "./appointment_popup/m_popup";
import AppointmentCollection from "./appointments/m_appointment_collection";
import NotifyScheduler from "./base/m_widget_notify_scheduler";
import {
    SchedulerHeader
} from "./header/m_header";
import {
    CompactAppointmentsHelper
} from "./m_compact_appointments_helper";
import {
    hide as hideLoading,
    show as showLoading
} from "./m_loading";
import subscribes from "./m_subscribes";
import {
    utils
} from "./m_utils";
import timeZoneUtils from "./m_utils_time_zone";
import {
    combineRemoteFilter
} from "./r1/filterting/remote";
import {
    createTimeZoneCalculator
} from "./r1/timezone_calculator/index";
import {
    excludeFromRecurrence,
    getToday,
    isAppointmentTakesAllDay,
    isDateAndTimeView,
    isTimelineView
} from "./r1/utils/index";
import {
    validateRRule
} from "./recurrence/validate_rule";
import {
    SchedulerOptionsBaseWidget
} from "./scheduler_options_base_widget";
import {
    DesktopTooltipStrategy
} from "./tooltip_strategies/m_desktop_tooltip_strategy";
import {
    MobileTooltipStrategy
} from "./tooltip_strategies/m_mobile_tooltip_strategy";
import {
    AppointmentAdapter
} from "./utils/appointment_adapter/appointment_adapter";
import {
    AppointmentDataAccessor
} from "./utils/data_accessor/appointment_data_accessor";
import {
    getTargetedAppointment
} from "./utils/get_targeted_appointment";
import {
    macroTaskArray
} from "./utils/index";
import {
    isAgendaWorkspaceComponent
} from "./utils/is_agenda_workpace_component";
import {
    VIEWS
} from "./utils/options/constants_view";
import {
    setAppointmentGroupValues
} from "./utils/resource_manager/appointment_groups_utils";
import {
    createResourceEditorModel
} from "./utils/resource_manager/popup_utils";
import {
    ResourceManager
} from "./utils/resource_manager/resource_manager";
import AppointmentLayoutManager from "./view_model/appointments_layout_manager";
import {
    AppointmentDataSource
} from "./view_model/m_appointment_data_source";
import SchedulerAgenda from "./workspaces/m_agenda";
import SchedulerTimelineDay from "./workspaces/m_timeline_day";
import SchedulerTimelineMonth from "./workspaces/m_timeline_month";
import SchedulerTimelineWeek from "./workspaces/m_timeline_week";
import SchedulerTimelineWorkWeek from "./workspaces/m_timeline_work_week";
import SchedulerWorkSpaceDay from "./workspaces/m_work_space_day";
import SchedulerWorkSpaceMonth from "./workspaces/m_work_space_month";
import SchedulerWorkSpaceWeek from "./workspaces/m_work_space_week";
import SchedulerWorkSpaceWorkWeek from "./workspaces/m_work_space_work_week";
const toMs = dateUtils.dateToMilliseconds;
const WIDGET_CLASS = "dx-scheduler";
const WIDGET_SMALL_CLASS = `${WIDGET_CLASS}-small`;
const WIDGET_ADAPTIVE_CLASS = `${WIDGET_CLASS}-adaptive`;
const WIDGET_READONLY_CLASS = `${WIDGET_CLASS}-readonly`;
export const POPUP_DIALOG_CLASS = "dx-dialog";
const WIDGET_SMALL_WIDTH = 400;
const FULL_DATE_FORMAT = "yyyyMMddTHHmmss";
const UTC_FULL_DATE_FORMAT = `${FULL_DATE_FORMAT}Z`;
const VIEWS_CONFIG = {
    day: {
        workSpace: SchedulerWorkSpaceDay,
        renderingStrategy: "vertical"
    },
    week: {
        workSpace: SchedulerWorkSpaceWeek,
        renderingStrategy: "vertical"
    },
    workWeek: {
        workSpace: SchedulerWorkSpaceWorkWeek,
        renderingStrategy: "vertical"
    },
    month: {
        workSpace: SchedulerWorkSpaceMonth,
        renderingStrategy: "horizontalMonth"
    },
    timelineDay: {
        workSpace: SchedulerTimelineDay,
        renderingStrategy: "horizontal"
    },
    timelineWeek: {
        workSpace: SchedulerTimelineWeek,
        renderingStrategy: "horizontal"
    },
    timelineWorkWeek: {
        workSpace: SchedulerTimelineWorkWeek,
        renderingStrategy: "horizontal"
    },
    timelineMonth: {
        workSpace: SchedulerTimelineMonth,
        renderingStrategy: "horizontalMonthLine"
    },
    agenda: {
        workSpace: SchedulerAgenda,
        renderingStrategy: "agenda"
    }
};
const StoreEventNames = {
    ADDING: "onAppointmentAdding",
    ADDED: "onAppointmentAdded",
    DELETING: "onAppointmentDeleting",
    DELETED: "onAppointmentDeleted",
    UPDATING: "onAppointmentUpdating",
    UPDATED: "onAppointmentUpdated"
};
const RECURRENCE_EDITING_MODE = {
    SERIES: "editSeries",
    OCCURRENCE: "editOccurrence",
    CANCEL: "cancel"
};
class Scheduler extends SchedulerOptionsBaseWidget {
    constructor() {
        super(...arguments);
        this._updatingAppointments = new Set
    }
    get timeZoneCalculator() {
        if (!this._timeZoneCalculator) {
            this._timeZoneCalculator = createTimeZoneCalculator(this.option("timeZone"))
        }
        return this._timeZoneCalculator
    }
    _postponeDataSourceLoading(promise) {
        this.postponedOperations.add("_reloadDataSource", this._reloadDataSource.bind(this), promise)
    }
    _postponeResourceLoading() {
        let forceReload = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : false;
        const whenLoaded = this.postponedOperations.add("loadResources", (() => {
            const groups = this.getViewOption("groups");
            return fromPromise(this.resourceManager.loadGroupResources(groups, forceReload))
        }));
        const resolveCallbacks = new Deferred;
        whenLoaded.done((() => {
            resolveCallbacks.resolve()
        }));
        this._postponeDataSourceLoading(whenLoaded);
        return resolveCallbacks.promise()
    }
    _optionChanged(args) {
        var _this$resourceManager;
        this.schedulerOptionChanged(args);
        const {
            value: value,
            name: name
        } = args;
        switch (args.name) {
            case "customizeDateNavigatorText":
                this._updateOption("header", name, value);
                break;
            case "firstDayOfWeek":
                this._updateOption("workSpace", name, value);
                this._updateOption("header", name, value);
                this._cleanPopup();
                break;
            case "currentDate": {
                const dateValue = this.getViewOption(name);
                this.option("selectedCellData", []);
                this._updateOption("workSpace", name, dateValue);
                this._updateOption("header", name, dateValue);
                this._updateOption("header", "startViewDate", this.getStartViewDate());
                this._appointments.option("items", []);
                this._setRemoteFilterIfNeeded();
                this._postponeDataSourceLoading();
                break
            }
            case "dataSource":
                this._initDataSource();
                this._postponeResourceLoading().done((() => {
                    this.appointmentDataSource.setDataSource(this._dataSource);
                    this._setRemoteFilterIfNeeded();
                    this._updateOption("workSpace", "showAllDayPanel", this.option("showAllDayPanel"))
                }));
                break;
            case "min":
            case "max": {
                const value = this.getViewOption(name);
                this._updateOption("header", name, value);
                this._updateOption("workSpace", name, value);
                break
            }
            case "views":
                if (this.currentView) {
                    this.repaint()
                } else {
                    this._updateOption("header", "views", this.views)
                }
                break;
            case "useDropDownViewSwitcher":
                this._updateOption("header", name, value);
                break;
            case "currentView":
                this._appointments.option({
                    items: [],
                    allowDrag: this._allowDragging(),
                    allowResize: this._allowResizing(),
                    itemTemplate: this._getAppointmentTemplate("appointmentTemplate")
                });
                this._postponeResourceLoading().done((() => {
                    var _this$_header;
                    this._refreshWorkSpace();
                    null === (_this$_header = this._header) || void 0 === _this$_header || _this$_header.option(this._headerConfig());
                    this._setRemoteFilterIfNeeded();
                    this._appointments.option("allowAllDayResize", "day" !== value)
                }));
                this.postponedOperations.callPostponedOperations();
                break;
            case "appointmentTemplate":
                this._appointments.option("itemTemplate", value);
                break;
            case "dateCellTemplate":
            case "resourceCellTemplate":
            case "dataCellTemplate":
            case "timeCellTemplate":
                this.repaint();
                break;
            case "groups":
                this._postponeResourceLoading().done((() => {
                    this._refreshWorkSpace();
                    this._setRemoteFilterIfNeeded()
                }));
                break;
            case "resources":
                null === (_this$resourceManager = this.resourceManager) || void 0 === _this$resourceManager || _this$resourceManager.dispose();
                this.resourceManager = new ResourceManager(this.option("resources"));
                this.updateAppointmentDataSource();
                this._postponeResourceLoading().done((() => {
                    this._appointments.option("items", []);
                    this._refreshWorkSpace();
                    this._setRemoteFilterIfNeeded();
                    this._createAppointmentPopupForm()
                }));
                break;
            case "startDayHour":
            case "endDayHour":
                this.updateAppointmentDataSource();
                this._appointments.option("items", []);
                this._updateOption("workSpace", name, value);
                this._appointments.repaint();
                this._setRemoteFilterIfNeeded();
                this._postponeDataSourceLoading();
                break;
            case "offset":
                this.updateAppointmentDataSource();
                this._appointments.option("items", []);
                this._updateOption("workSpace", "viewOffset", this.normalizeViewOffsetValue(value));
                this._appointments.repaint();
                this._setRemoteFilterIfNeeded();
                this._postponeDataSourceLoading();
                break;
            case StoreEventNames.ADDING:
            case StoreEventNames.ADDED:
            case StoreEventNames.UPDATING:
            case StoreEventNames.UPDATED:
            case StoreEventNames.DELETING:
            case StoreEventNames.DELETED:
            case "onAppointmentFormOpening":
            case "onAppointmentTooltipShowing":
                this._actions[name] = this._createActionByOption(name);
                break;
            case "onAppointmentRendered":
                this._appointments.option("onItemRendered", this._getAppointmentRenderedAction());
                break;
            case "onAppointmentClick":
                this._appointments.option("onItemClick", this._createActionByOption(name));
                break;
            case "onAppointmentDblClick":
                this._appointments.option(name, this._createActionByOption(name));
                break;
            case "onAppointmentContextMenu":
                this._appointments.option("onItemContextMenu", this._createActionByOption(name));
                this._appointmentTooltip._options.onItemContextMenu = this._createActionByOption(name);
                break;
            case "noDataText":
            case "allowMultipleCellSelection":
            case "selectedCellData":
            case "accessKey":
            case "onCellClick":
            case "onCellContextMenu":
                this._updateOption("workSpace", name, value);
                break;
            case "crossScrollingEnabled":
                this._postponeResourceLoading().done((() => {
                    this._appointments.option("items", []);
                    this._refreshWorkSpace();
                    if (this._readyToRenderAppointments) {
                        this._appointments.option("items", this._layoutManager.generateViewModel())
                    }
                }));
                break;
            case "cellDuration":
                this._updateOption("workSpace", name, value);
                this._appointments.option("items", []);
                if (this._readyToRenderAppointments) {
                    this._updateOption("workSpace", "hoursInterval", value / 60);
                    this._appointments.option("items", this._layoutManager.generateViewModel())
                }
                break;
            case "tabIndex":
            case "focusStateEnabled":
                this._updateOption("header", name, value);
                this._updateOption("workSpace", name, value);
                this._appointments.option(name, value);
                super._optionChanged(args);
                break;
            case "width":
                this._updateOption("header", name, value);
                if (this.option("crossScrollingEnabled")) {
                    this._updateOption("workSpace", "width", value)
                }
                this._updateOption("workSpace", "schedulerWidth", value);
                super._optionChanged(args);
                this._dimensionChanged(null, true);
                break;
            case "height":
                super._optionChanged(args);
                this._dimensionChanged(null, true);
                this._updateOption("workSpace", "schedulerHeight", value);
                break;
            case "editing": {
                this._initEditing();
                const editing = this._editing;
                this._bringEditingModeToAppointments(editing);
                this.hideAppointmentTooltip();
                this._cleanPopup();
                break
            }
            case "showAllDayPanel":
                this.updateAppointmentDataSource();
                this.repaint();
                break;
            case "showCurrentTimeIndicator":
            case "indicatorUpdateInterval":
            case "shadeUntilCurrentTime":
            case "groupByDate":
                this._updateOption("workSpace", name, value);
                this.repaint();
                break;
            case "indicatorTime":
                this._updateOption("workSpace", name, value);
                this._updateOption("header", name, value);
                this.repaint();
                break;
            case "appointmentDragging":
            case "appointmentTooltipTemplate":
            case "appointmentPopupTemplate":
            case "recurrenceEditMode":
            case "remoteFiltering":
            case "timeZone":
                this.updateAppointmentDataSource();
                this.repaint();
                break;
            case "appointmentCollectorTemplate":
            case "_appointmentTooltipOffset":
                this.repaint();
                break;
            case "dateSerializationFormat":
                break;
            case "maxAppointmentsPerCell":
                this.repaint();
                break;
            case "startDateExpr":
            case "endDateExpr":
            case "startDateTimeZoneExpr":
            case "endDateTimeZoneExpr":
            case "textExpr":
            case "descriptionExpr":
            case "allDayExpr":
            case "recurrenceRuleExpr":
            case "recurrenceExceptionExpr":
            case "disabledExpr":
            case "visibleExpr":
                this._updateExpression(name, value);
                this._initAppointmentTemplate();
                this.repaint();
                break;
            case "adaptivityEnabled":
                this._toggleAdaptiveClass();
                this.repaint();
                break;
            case "scrolling":
                this.option("crossScrollingEnabled", this._isHorizontalVirtualScrolling() || this.option("crossScrollingEnabled"));
                this._updateOption("workSpace", args.fullName, value);
                break;
            case "allDayPanelMode":
                this.updateAppointmentDataSource();
                this._updateOption("workSpace", args.fullName, value);
                break;
            case "renovateRender":
                this._updateOption("workSpace", name, value);
                break;
            case "_draggingMode":
                this._updateOption("workSpace", "draggingMode", value);
                break;
            case "toolbar":
                this._header ? this._header.onToolbarOptionChanged(args.fullName, value) : this.repaint();
                break;
            default:
                super._optionChanged(args)
        }
    }
    _bringEditingModeToAppointments(editing) {
        const editingConfig = {
            allowDelete: editing.allowUpdating && editing.allowDeleting
        };
        if (!this._isAgenda()) {
            editingConfig.allowDrag = editing.allowDragging;
            editingConfig.allowResize = editing.allowResizing;
            editingConfig.allowAllDayResize = editing.allowResizing && this._supportAllDayResizing()
        }
        this._appointments.option(editingConfig);
        this.repaint()
    }
    _isAgenda() {
        return "agenda" === this.currentView.type
    }
    _allowDragging() {
        return this._editing.allowDragging && !this._isAgenda()
    }
    _allowResizing() {
        return this._editing.allowResizing && !this._isAgenda()
    }
    _allowAllDayResizing() {
        return this._editing.allowResizing && this._supportAllDayResizing()
    }
    _supportAllDayResizing() {
        return "day" !== this.currentView.type || this.currentView.intervalCount > 1
    }
    _isAllDayExpanded() {
        return this.option("showAllDayPanel") && this._layoutManager.hasAllDayAppointments()
    }
    _setRemoteFilterIfNeeded() {
        const dataSource = this._dataSource;
        const remoteFiltering = this.option("remoteFiltering");
        if (!this._workSpace || !remoteFiltering || !dataSource) {
            return
        }
        const dateRange = this._workSpace.getDateRange();
        const startDate = this.timeZoneCalculator.createDate(dateRange[0], "fromGrid");
        const endDate = this.timeZoneCalculator.createDate(dateRange[1], "fromGrid");
        const dateSerializationFormat = this.option("dateSerializationFormat");
        const dataSourceFilter = dataSource.filter();
        const filter = combineRemoteFilter({
            dataSourceFilter: dataSourceFilter,
            dataAccessors: this._dataAccessors,
            min: startDate,
            max: endDate,
            dateSerializationFormat: dateSerializationFormat,
            forceIsoDateParsing: config().forceIsoDateParsing
        });
        dataSource.filter(filter)
    }
    _reloadDataSource() {
        const result = new Deferred;
        if (this._dataSource) {
            this._dataSource.load().done((() => {
                hideLoading();
                this._fireContentReadyAction(result)
            })).fail((() => {
                hideLoading();
                result.reject()
            }));
            this._dataSource.isLoading() && showLoading({
                container: this.$element(),
                position: {
                    of: this.$element()
                }
            })
        } else {
            this._fireContentReadyAction(result)
        }
        return result.promise()
    }
    _fireContentReadyAction(result) {
        const contentReadyBase = super._fireContentReadyAction.bind(this);
        const fireContentReady = () => {
            contentReadyBase();
            null === result || void 0 === result || result.resolve()
        };
        if (this._workSpaceRecalculation) {
            var _this$_workSpaceRecal;
            null === (_this$_workSpaceRecal = this._workSpaceRecalculation) || void 0 === _this$_workSpaceRecal || _this$_workSpaceRecal.done((() => {
                fireContentReady()
            }))
        } else {
            fireContentReady()
        }
    }
    _dimensionChanged(value) {
        let isForce = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : false;
        const isFixedHeight = "number" === typeof this.option("height");
        const isFixedWidth = "number" === typeof this.option("width");
        if (!this._isVisible()) {
            return
        }
        this._toggleSmallClass();
        const workspace = this.getWorkSpace();
        if (!this._isAgenda() && this._layoutManager && workspace && !isAgendaWorkspaceComponent(workspace)) {
            if (isForce || !isFixedHeight || !isFixedWidth) {
                workspace.option("allDayExpanded", this._isAllDayExpanded());
                workspace._dimensionChanged();
                const appointments = this._layoutManager.generateViewModel();
                this._appointments.option("items", appointments)
            }
        }
        this.hideAppointmentTooltip();
        this._appointmentPopup.triggerResize();
        this._appointmentPopup.updatePopupFullScreenMode()
    }
    _clean() {
        this._cleanPopup();
        super._clean()
    }
    _toggleSmallClass() {
        const {
            width: width
        } = getBoundingRect(this.$element().get(0));
        this.$element().toggleClass(WIDGET_SMALL_CLASS, width < 400)
    }
    _toggleAdaptiveClass() {
        this.$element().toggleClass(WIDGET_ADAPTIVE_CLASS, this.option("adaptivityEnabled"))
    }
    _visibilityChanged(visible) {
        visible && this._dimensionChanged(null, true)
    }
    _dataSourceOptions() {
        return {
            paginate: false
        }
    }
    _initAllDayPanel() {
        if ("hidden" === this.option("allDayPanelMode")) {
            this.option("showAllDayPanel", false)
        }
    }
    _init() {
        this._timeZonesPromise = timeZoneUtils.cacheTimeZones();
        this._initExpressions({
            startDateExpr: this.option("startDateExpr"),
            endDateExpr: this.option("endDateExpr"),
            startDateTimeZoneExpr: this.option("startDateTimeZoneExpr"),
            endDateTimeZoneExpr: this.option("endDateTimeZoneExpr"),
            allDayExpr: this.option("allDayExpr"),
            textExpr: this.option("textExpr"),
            descriptionExpr: this.option("descriptionExpr"),
            recurrenceRuleExpr: this.option("recurrenceRuleExpr"),
            recurrenceExceptionExpr: this.option("recurrenceExceptionExpr"),
            disabledExpr: this.option("disabledExpr"),
            visibleExpr: this.option("visibleExpr")
        });
        super._init();
        this._initAllDayPanel();
        this._initDataSource();
        this._customizeDataSourceLoadOptions();
        this.$element().addClass(WIDGET_CLASS);
        this._initEditing();
        this.updateAppointmentDataSource();
        this._initActions();
        this._compactAppointmentsHelper = new CompactAppointmentsHelper(this);
        this._asyncTemplatesTimers = [];
        this._dataSourceLoadedCallback = Callbacks();
        this._subscribes = subscribes;
        this.resourceManager = new ResourceManager(this.option("resources"));
        this._notifyScheduler = new NotifyScheduler({
            scheduler: this
        })
    }
    createAppointmentDataSource() {
        var _this$appointmentData;
        null === (_this$appointmentData = this.appointmentDataSource) || void 0 === _this$appointmentData || _this$appointmentData.destroy();
        this.appointmentDataSource = new AppointmentDataSource(this._dataSource)
    }
    updateAppointmentDataSource() {
        this._timeZoneCalculator = null;
        if (this.getWorkSpace()) {
            this.createAppointmentDataSource()
        }
    }
    _customizeDataSourceLoadOptions() {
        var _this$_dataSource;
        null === (_this$_dataSource = this._dataSource) || void 0 === _this$_dataSource || _this$_dataSource.on("customizeStoreLoadOptions", (_ref => {
            let {
                storeLoadOptions: storeLoadOptions
            } = _ref;
            storeLoadOptions.startDate = this.getStartViewDate();
            storeLoadOptions.endDate = this.getEndViewDate()
        }))
    }
    _initTemplates() {
        this._initAppointmentTemplate();
        this._templateManager.addDefaultTemplates({
            appointmentTooltip: new EmptyTemplate,
            dropDownAppointment: new EmptyTemplate
        });
        super._initTemplates()
    }
    _initAppointmentTemplate() {
        const {
            expr: expr
        } = this._dataAccessors;
        const createGetter = property => compileGetter(`appointmentData.${property}`);
        const getDate = getter => data => {
            const value = getter(data);
            if (value instanceof Date) {
                return value.valueOf()
            }
            return value
        };
        this._templateManager.addDefaultTemplates({
            item: new BindableTemplate((($container, data, model) => this.getAppointmentsInstance()._renderAppointmentTemplate($container, data, model)), ["html", "text", "startDate", "endDate", "allDay", "description", "recurrenceRule", "recurrenceException", "startDateTimeZone", "endDateTimeZone"], this.option("integrationOptions.watchMethod"), {
                text: createGetter(expr.textExpr),
                startDate: getDate(createGetter(expr.startDateExpr)),
                endDate: getDate(createGetter(expr.endDateExpr)),
                startDateTimeZone: createGetter(expr.startDateTimeZoneExpr),
                endDateTimeZone: createGetter(expr.endDateTimeZoneExpr),
                allDay: createGetter(expr.allDayExpr),
                recurrenceRule: createGetter(expr.recurrenceRuleExpr)
            })
        })
    }
    _renderContent() {
        this._renderContentImpl()
    }
    _dataSourceChangedHandler(result) {
        if (this._readyToRenderAppointments) {
            this._workSpaceRecalculation.done((() => {
                this._layoutManager.prepareAppointments(result);
                this._renderAppointments();
                this._updateA11yStatus()
            }))
        }
    }
    isVirtualScrolling() {
        const workspace = this.getWorkSpace();
        if (workspace) {
            return workspace.isVirtualScrolling()
        }
        const scrolling = this.getViewOption("scrolling");
        return "virtual" === (null === scrolling || void 0 === scrolling ? void 0 : scrolling.mode)
    }
    _renderAppointments() {
        const workspace = this.getWorkSpace();
        this._layoutManager.filterAppointments();
        workspace.option("allDayExpanded", this._isAllDayExpanded());
        const viewModel = this._isVisible() ? this._layoutManager.generateViewModel() : [];
        this._appointments.option("items", viewModel);
        this.appointmentDataSource.cleanState();
        if (this._isAgenda()) {
            this._workSpace.renderAgendaLayout(viewModel)
        }
    }
    _initExpressions(fields) {
        this._dataAccessors = new AppointmentDataAccessor(fields, Boolean(config().forceIsoDateParsing), this.option("dateSerializationFormat"))
    }
    _updateExpression(name, value) {
        this._dataAccessors.updateExpression(name, value)
    }
    _initEditing() {
        const editing = this.option("editing");
        this._editing = {
            allowAdding: Boolean(editing),
            allowUpdating: Boolean(editing),
            allowDeleting: Boolean(editing),
            allowResizing: Boolean(editing),
            allowDragging: Boolean(editing),
            legacyForm: false
        };
        if (isObject(editing)) {
            this._editing = extend(this._editing, editing)
        }
        this._editing.allowDragging = this._editing.allowDragging && this._editing.allowUpdating;
        this._editing.allowResizing = this._editing.allowResizing && this._editing.allowUpdating;
        const isReadOnly = Object.values(Object.assign({}, this._editing, {
            form: void 0,
            popup: void 0
        })).every((value => !value));
        this.$element().toggleClass(WIDGET_READONLY_CLASS, isReadOnly)
    }
    _dispose() {
        var _this$resourceManager2, _this$_appointmentToo, _this$_recurrenceDial;
        null === (_this$resourceManager2 = this.resourceManager) || void 0 === _this$resourceManager2 || _this$resourceManager2.dispose();
        null === (_this$_appointmentToo = this._appointmentTooltip) || void 0 === _this$_appointmentToo || _this$_appointmentToo.dispose();
        null === (_this$_recurrenceDial = this._recurrenceDialog) || void 0 === _this$_recurrenceDial || _this$_recurrenceDial.hide(RECURRENCE_EDITING_MODE.CANCEL);
        this.hideAppointmentPopup();
        this.hideAppointmentTooltip();
        this._asyncTemplatesTimers.forEach(clearTimeout);
        this._asyncTemplatesTimers = [];
        macroTaskArray.dispose();
        super._dispose()
    }
    _initActions() {
        this._actions = {
            onAppointmentAdding: this._createActionByOption(StoreEventNames.ADDING),
            onAppointmentAdded: this._createActionByOption(StoreEventNames.ADDED),
            onAppointmentUpdating: this._createActionByOption(StoreEventNames.UPDATING),
            onAppointmentUpdated: this._createActionByOption(StoreEventNames.UPDATED),
            onAppointmentDeleting: this._createActionByOption(StoreEventNames.DELETING),
            onAppointmentDeleted: this._createActionByOption(StoreEventNames.DELETED),
            onAppointmentFormOpening: this._createActionByOption("onAppointmentFormOpening"),
            onAppointmentTooltipShowing: this._createActionByOption("onAppointmentTooltipShowing")
        }
    }
    _getAppointmentRenderedAction() {
        return this._createActionByOption("onAppointmentRendered", {
            excludeValidators: ["disabled", "readOnly"]
        })
    }
    _renderFocusTarget() {
        return noop()
    }
    _updateA11yStatus() {
        const dateRange = this._workSpace.getDateRange();
        const indicatorTime = this.option("showCurrentTimeIndicator") ? getToday(this.option("indicatorTime"), this.timeZoneCalculator) : void 0;
        const label = getA11yStatusText(this.currentView, dateRange[0], dateRange[1], this._layoutManager.filteredItems.length, indicatorTime);
        this.setAria({
            label: label
        });
        this._a11yStatus.text(label)
    }
    _renderA11yStatus() {
        this._a11yStatus = createA11yStatusContainer();
        this._a11yStatus.prependTo(this.$element());
        this.setAria({
            role: "group"
        })
    }
    _initMarkupOnResourceLoaded() {
        if (!this._disposed) {
            this._initMarkupCore();
            this._reloadDataSource()
        }
    }
    _initMarkup() {
        super._initMarkup();
        this._renderA11yStatus();
        this._renderMainContainer();
        this._renderHeader();
        this._toggleAdaptiveClass();
        this._layoutManager = new AppointmentLayoutManager(this);
        this._appointments = this._createComponent("<div>", AppointmentCollection, this._appointmentsConfig());
        this._appointments.option("itemTemplate", this._getAppointmentTemplate("appointmentTemplate"));
        this._appointmentTooltip = new(this.option("adaptivityEnabled") ? MobileTooltipStrategy : DesktopTooltipStrategy)(this._getAppointmentTooltipOptions());
        this._createAppointmentPopupForm();
        if (this._isDataSourceLoaded() || this._isDataSourceLoading()) {
            this._initMarkupCore();
            this._dataSourceChangedHandler(this._dataSource.items());
            this._fireContentReadyAction()
        } else {
            const groups = this.getViewOption("groups");
            if (null !== groups && void 0 !== groups && groups.length) {
                this.resourceManager.loadGroupResources(groups, true).then((() => this._initMarkupOnResourceLoaded()))
            } else {
                this._initMarkupOnResourceLoaded()
            }
        }
    }
    _createAppointmentPopupForm() {
        var _this$_appointmentPop;
        if (this._appointmentForm) {
            var _this$_appointmentFor;
            null === (_this$_appointmentFor = this._appointmentForm.form) || void 0 === _this$_appointmentFor || _this$_appointmentFor.dispose()
        }
        this._appointmentForm = this.createAppointmentForm();
        null === (_this$_appointmentPop = this._appointmentPopup) || void 0 === _this$_appointmentPop || _this$_appointmentPop.dispose();
        this._appointmentPopup = this.createAppointmentPopup(this._appointmentForm)
    }
    _renderMainContainer() {
        this._mainContainer = $("<div>").addClass("dx-scheduler-container");
        this.$element().append(this._mainContainer)
    }
    createAppointmentForm() {
        const scheduler = {
            getResourceById: () => this.resourceManager.resourceById,
            getDataAccessors: () => this._dataAccessors,
            createComponent: (element, component, options) => this._createComponent(element, component, options),
            getEditingConfig: () => this._editing,
            getResourceManager: () => this.resourceManager,
            getFirstDayOfWeek: () => this.option("firstDayOfWeek"),
            getStartDayHour: () => this.option("startDayHour"),
            getCalculatedEndDate: startDateWithStartHour => this._workSpace.calculateEndDate(startDateWithStartHour),
            getTimeZoneCalculator: () => this.timeZoneCalculator
        };
        if (this._editing.legacyForm) {
            scheduler.createResourceEditorModel = () => createResourceEditorModel(this.resourceManager.resourceById);
            return new AppointmentLegacyForm(scheduler)
        }
        return new AppointmentForm(scheduler)
    }
    createAppointmentPopup(form) {
        const scheduler = {
            getElement: () => this.$element(),
            createComponent: (element, component, options) => this._createComponent(element, component, options),
            focus: () => this.focus(),
            getResourceManager: () => this.resourceManager,
            getEditingConfig: () => this._editing,
            getTimeZoneCalculator: () => this.timeZoneCalculator,
            getDataAccessors: () => this._dataAccessors,
            getAppointmentFormOpening: () => this._actions.onAppointmentFormOpening,
            processActionResult: (arg, canceled) => this._processActionResult(arg, canceled),
            addAppointment: appointment => this.addAppointment(appointment),
            updateAppointment: (sourceAppointment, updatedAppointment) => this.updateAppointment(sourceAppointment, updatedAppointment),
            updateScrollPosition: (startDate, appointmentGroupValues, inAllDayRow) => {
                this._workSpace.updateScrollPosition(startDate, appointmentGroupValues, inAllDayRow)
            }
        };
        return this._editing.legacyForm ? new AppointmentLegacyPopup(scheduler, form) : new AppointmentPopup(scheduler, form)
    }
    _getAppointmentTooltipOptions() {
        return {
            createComponent: this._createComponent.bind(this),
            container: this.$element(),
            getScrollableContainer: this.getWorkSpaceScrollableContainer.bind(this),
            addDefaultTemplates: this._templateManager.addDefaultTemplates.bind(this._templateManager),
            getAppointmentTemplate: this._getAppointmentTemplate.bind(this),
            showAppointmentPopup: this.showAppointmentPopup.bind(this),
            checkAndDeleteAppointment: this.checkAndDeleteAppointment.bind(this),
            isAppointmentInAllDayPanel: this.isAppointmentInAllDayPanel.bind(this),
            createFormattedDateText: (appointment, targetedAppointment, format) => this.fire("createFormattedDateText", appointment, targetedAppointment, format),
            getAppointmentDisabled: appointment => this._dataAccessors.get("disabled", appointment),
            onItemContextMenu: this._createActionByOption("onAppointmentContextMenu"),
            createEventArgs: this._createEventArgs.bind(this)
        }
    }
    _createEventArgs(e) {
        const config = {
            itemData: e.itemData.appointment,
            itemElement: e.itemElement,
            targetedAppointment: e.itemData.targetedAppointment
        };
        return extend({}, this.fire("mapAppointmentFields", config), {
            component: e.component,
            element: e.element,
            event: e.event,
            model: e.model
        })
    }
    checkAndDeleteAppointment(appointment, targetedAppointment) {
        const targetedAdapter = new AppointmentAdapter(targetedAppointment, this._dataAccessors);
        const deletingOptions = this.fireOnAppointmentDeleting(appointment, targetedAdapter);
        this._checkRecurringAppointment(appointment, targetedAppointment, targetedAdapter.startDate, (() => {
            this.processDeleteAppointment(appointment, deletingOptions)
        }), true)
    }
    _getExtraAppointmentTooltipOptions() {
        return {
            rtlEnabled: this.option("rtlEnabled"),
            focusStateEnabled: this.option("focusStateEnabled"),
            editing: this.option("editing"),
            offset: this.option("_appointmentTooltipOffset")
        }
    }
    isAppointmentInAllDayPanel(appointmentData) {
        const workSpace = this._workSpace;
        const itTakesAllDay = this.appointmentTakesAllDay(appointmentData);
        return itTakesAllDay && workSpace.supportAllDayRow() && workSpace.option("showAllDayPanel")
    }
    _initMarkupCore() {
        this._readyToRenderAppointments = hasWindow();
        this._workSpace && this._cleanWorkspace();
        this._renderWorkSpace();
        this._appointments.option({
            fixedContainer: this._workSpace.getFixedContainer(),
            allDayContainer: this._workSpace.getAllDayContainer()
        });
        this._waitAsyncTemplate((() => {
            var _this$_workSpaceRecal2;
            return null === (_this$_workSpaceRecal2 = this._workSpaceRecalculation) || void 0 === _this$_workSpaceRecal2 ? void 0 : _this$_workSpaceRecal2.resolve()
        }));
        this.createAppointmentDataSource();
        this._setRemoteFilterIfNeeded();
        this._validateKeyFieldIfAgendaExist();
        this._updateA11yStatus()
    }
    _isDataSourceLoaded() {
        var _this$_dataSource2;
        return null === (_this$_dataSource2 = this._dataSource) || void 0 === _this$_dataSource2 ? void 0 : _this$_dataSource2.isLoaded()
    }
    _render() {
        var _this$getWorkSpace;
        null === (_this$getWorkSpace = this.getWorkSpace()) || void 0 === _this$getWorkSpace || _this$getWorkSpace.updateHeaderEmptyCellWidth();
        super._render()
    }
    _renderHeader() {
        var _toolbarOptions$items;
        const toolbarOptions = this.option("toolbar");
        const isHeaderShown = Boolean(toolbarOptions.visible ?? (null === (_toolbarOptions$items = toolbarOptions.items) || void 0 === _toolbarOptions$items ? void 0 : _toolbarOptions$items.length));
        if (isHeaderShown) {
            const $header = $("<div>").appendTo(this._mainContainer);
            const headerOptions = this._headerConfig();
            this._header = this._createComponent($header, SchedulerHeader, headerOptions)
        }
    }
    _headerConfig() {
        return {
            currentView: this.currentView,
            views: this.views,
            currentDate: this.getViewOption("currentDate"),
            min: this.getViewOption("min"),
            max: this.getViewOption("max"),
            indicatorTime: this.option("indicatorTime"),
            startViewDate: this.getStartViewDate(),
            tabIndex: this.option("tabIndex"),
            focusStateEnabled: this.option("focusStateEnabled"),
            useDropDownViewSwitcher: this.option("useDropDownViewSwitcher"),
            firstDayOfWeek: this.getFirstDayOfWeek(),
            toolbar: this.option("toolbar"),
            customizeDateNavigatorText: this.option("customizeDateNavigatorText"),
            onCurrentViewChange: name => {
                this.option("currentView", name)
            },
            onCurrentDateChange: date => {
                this.option("currentDate", date)
            }
        }
    }
    _appointmentsConfig() {
        const config = {
            getResourceManager: () => this.resourceManager,
            getAppointmentDataSource: () => this.appointmentDataSource,
            dataAccessors: this._dataAccessors,
            notifyScheduler: this._notifyScheduler,
            onItemRendered: this._getAppointmentRenderedAction(),
            onItemClick: this._createActionByOption("onAppointmentClick"),
            onItemContextMenu: this._createActionByOption("onAppointmentContextMenu"),
            onAppointmentDblClick: this._createActionByOption("onAppointmentDblClick"),
            tabIndex: this.option("tabIndex"),
            focusStateEnabled: this.option("focusStateEnabled"),
            allowDrag: this._allowDragging(),
            allowDelete: this._editing.allowUpdating && this._editing.allowDeleting,
            allowResize: this._allowResizing(),
            allowAllDayResize: this._allowAllDayResizing(),
            rtlEnabled: this.option("rtlEnabled"),
            groups: this.getViewOption("groups"),
            groupByDate: this.getViewOption("groupByDate"),
            timeZoneCalculator: this.timeZoneCalculator,
            getResizableStep: () => this._workSpace ? this._workSpace.positionHelper.getResizableStep() : 0,
            getDOMElementsMetaData: () => {
                var _this$_workSpace;
                return null === (_this$_workSpace = this._workSpace) || void 0 === _this$_workSpace ? void 0 : _this$_workSpace.getDOMElementsMetaData()
            },
            getViewDataProvider: () => {
                var _this$_workSpace2;
                return null === (_this$_workSpace2 = this._workSpace) || void 0 === _this$_workSpace2 ? void 0 : _this$_workSpace2.viewDataProvider
            },
            isVerticalGroupedWorkSpace: () => this._workSpace._isVerticalGroupedWorkSpace(),
            isDateAndTimeView: () => isDateAndTimeView(this._workSpace.type),
            onContentReady: () => {
                var _this$_workSpace3;
                null === (_this$_workSpace3 = this._workSpace) || void 0 === _this$_workSpace3 || _this$_workSpace3.option("allDayExpanded", this._isAllDayExpanded())
            }
        };
        return config
    }
    _renderWorkSpace() {
        const currentViewOptions = this.currentView;
        if (!currentViewOptions) {
            return
        }
        if (this._isAgenda()) {
            this.renderAgendaWorkspace()
        } else {
            this.renderGridWorkspace()
        }
        this._recalculateWorkspace();
        if (currentViewOptions.startDate) {
            this._updateOption("header", "currentDate", this._workSpace._getHeaderDate())
        }
    }
    renderGridWorkspace() {
        if (this._readyToRenderAppointments) {
            this._toggleSmallClass();
            Promise.resolve().then((() => {
                var _this$_workSpace4;
                this._toggleSmallClass();
                null === (_this$_workSpace4 = this._workSpace) || void 0 === _this$_workSpace4 || _this$_workSpace4.updateHeaderEmptyCellWidth()
            }))
        }
        const $workSpace = $("<div>").appendTo(this._mainContainer);
        const currentViewType = this.currentView.type;
        const workSpaceComponent = VIEWS_CONFIG[currentViewType].workSpace;
        const workSpaceConfig = this._workSpaceConfig(this.currentView);
        this._workSpace = this._createComponent($workSpace, workSpaceComponent, workSpaceConfig);
        this._allowDragging() && this._workSpace.initDragBehavior(this, this._all);
        this._workSpace._attachTablesEvents();
        this._workSpace.getWorkArea().append(this._appointments.$element())
    }
    renderAgendaWorkspace() {
        const $workSpace = $("<div>").appendTo(this._mainContainer);
        const workSpaceConfig = this._workSpaceConfig(this.currentView);
        const workSpaceComponent = VIEWS_CONFIG.agenda.workSpace;
        this._workSpace = this._createComponent($workSpace, workSpaceComponent, workSpaceConfig);
        this._workSpace.getWorkArea().append(this._appointments.$element())
    }
    _recalculateWorkspace() {
        this._workSpaceRecalculation = new Deferred;
        triggerResizeEvent(this._workSpace.$element());
        this._waitAsyncTemplate((() => {
            this._workSpace.renderCurrentDateTimeLineAndShader()
        }))
    }
    _workSpaceConfig(currentViewOptions) {
        const scrolling = this.getViewOption("scrolling");
        const isVirtualScrolling = "virtual" === scrolling.mode;
        const horizontalVirtualScrollingAllowed = isVirtualScrolling && (!isDefined(scrolling.orientation) || ["horizontal", "both"].includes(scrolling.orientation));
        const crossScrollingEnabled = this.option("crossScrollingEnabled") || horizontalVirtualScrollingAllowed || isTimelineView(currentViewOptions.type);
        const result = extend({
            resources: this.option("resources"),
            getResourceManager: () => this.resourceManager,
            getFilteredItems: () => this._layoutManager.filteredItems,
            noDataText: this.option("noDataText") || messageLocalization.format("dxCollectionWidget-noDataText"),
            firstDayOfWeek: this.option("firstDayOfWeek"),
            startDayHour: this.option("startDayHour"),
            endDayHour: this.option("endDayHour"),
            viewOffset: this.getViewOffsetMs(),
            tabIndex: this.option("tabIndex"),
            accessKey: this.option("accessKey"),
            focusStateEnabled: this.option("focusStateEnabled"),
            cellDuration: this.option("cellDuration"),
            showAllDayPanel: this.option("showAllDayPanel"),
            showCurrentTimeIndicator: this.option("showCurrentTimeIndicator"),
            indicatorTime: this.option("indicatorTime"),
            indicatorUpdateInterval: this.option("indicatorUpdateInterval"),