devextreme
Version:
HTML5 JavaScript Component Suite for Responsive Web Development
1,185 lines (1,184 loc) • 93 kB
JavaScript
/**
* DevExtreme (esm/__internal/scheduler/m_scheduler.js)
* Version: 24.2.6
* Build date: Mon Mar 17 2025
*
* Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
*/
import _extends from "@babel/runtime/helpers/esm/extends";
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 devices from "../../core/devices";
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 {
each
} from "../../core/utils/iterator";
import {
getBoundingRect
} from "../../core/utils/position";
import {
isDeferred,
isDefined,
isEmptyObject,
isFunction,
isObject,
isPromise,
isString
} from "../../core/utils/type";
import {
hasWindow
} from "../../core/utils/window";
import DataHelperMixin from "../../data_helper";
import {
custom as customDialog
} from "../../ui/dialog";
import {
isMaterial,
isMaterialBased
} from "../../ui/themes";
import errors from "../../ui/widget/ui.errors";
import Widget from "../../ui/widget/ui.widget";
import {
dateUtilsTs
} from "../core/utils/date";
import {
createTimeZoneCalculator
} from "../scheduler/r1/timezone_calculator/index";
import {
excludeFromRecurrence,
getAppointmentTakesAllDay,
getPreparedDataItems,
isDateAndTimeView,
isTimelineView,
viewsUtils
} from "../scheduler/r1/utils/index";
import {
macroTaskArray
} from "../scheduler/utils/index";
import {
AppointmentForm
} from "./appointment_popup/m_form";
import {
ACTION_TO_APPOINTMENT,
AppointmentPopup
} from "./appointment_popup/m_popup";
import {
AppointmentDataProvider
} from "./appointments/data_provider/m_appointment_data_provider";
import AppointmentCollection from "./appointments/m_appointment_collection";
import {
SchedulerHeader
} from "./header/m_header";
import {
createAppointmentAdapter
} from "./m_appointment_adapter";
import AppointmentLayoutManager from "./m_appointments_layout_manager";
import {
CompactAppointmentsHelper
} from "./m_compact_appointments_helper";
import {
VIEWS
} from "./m_constants";
import {
AppointmentTooltipInfo
} from "./m_data_structures";
import {
ExpressionUtils
} from "./m_expression_utils";
import {
hide as hideLoading,
show as showLoading
} from "./m_loading";
import {
getRecurrenceProcessor
} from "./m_recurrence";
import subscribes from "./m_subscribes";
import {
utils
} from "./m_utils";
import timeZoneUtils from "./m_utils_time_zone";
import {
SchedulerOptionsValidator,
SchedulerOptionsValidatorErrorsHandler
} from "./options_validator/index";
import {
AgendaResourceProcessor
} from "./resources/m_agenda_resource_processor";
import {
createExpressions,
createResourceEditorModel,
getAppointmentColor,
getCellGroups,
loadResources,
setResourceToAppointment
} from "./resources/m_utils";
import {
DesktopTooltipStrategy
} from "./tooltip_strategies/m_desktop_tooltip_strategy";
import {
MobileTooltipStrategy
} from "./tooltip_strategies/m_mobile_tooltip_strategy";
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 DEFAULT_AGENDA_DURATION = 7;
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`;
const WIDGET_SMALL_WIDTH = 400;
const FULL_DATE_FORMAT = "yyyyMMddTHHmmss";
const UTC_FULL_DATE_FORMAT = `${FULL_DATE_FORMAT}Z`;
const DEFAULT_APPOINTMENT_TEMPLATE_NAME = "item";
const DEFAULT_APPOINTMENT_COLLECTOR_TEMPLATE_NAME = "appointmentCollector";
const DEFAULT_DROP_DOWN_APPOINTMENT_TEMPLATE_NAME = "dropDownAppointment";
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",
OCCURENCE: "editOccurence",
CANCEL: "cancel"
};
class Scheduler extends Widget {
_getDefaultOptions() {
const defaultOptions = extend(super._getDefaultOptions(), {
views: ["day", "week"],
currentView: "day",
currentDate: dateUtils.trimTime(new Date),
min: void 0,
max: void 0,
dateSerializationFormat: void 0,
firstDayOfWeek: void 0,
groups: [],
resources: [],
loadedResources: [],
resourceLoaderMap: new Map,
dataSource: null,
customizeDateNavigatorText: void 0,
appointmentTemplate: "item",
dropDownAppointmentTemplate: "dropDownAppointment",
appointmentCollectorTemplate: "appointmentCollector",
dataCellTemplate: null,
timeCellTemplate: null,
resourceCellTemplate: null,
dateCellTemplate: null,
startDayHour: 0,
endDayHour: 24,
offset: 0,
editing: {
allowAdding: true,
allowDeleting: true,
allowDragging: true,
allowResizing: true,
allowUpdating: true,
allowTimeZoneEditing: false
},
showAllDayPanel: true,
showCurrentTimeIndicator: true,
shadeUntilCurrentTime: false,
indicatorUpdateInterval: 3e5,
indicatorTime: void 0,
recurrenceEditMode: "dialog",
cellDuration: 30,
maxAppointmentsPerCell: "auto",
selectedCellData: [],
groupByDate: false,
onAppointmentRendered: null,
onAppointmentClick: null,
onAppointmentDblClick: null,
onAppointmentContextMenu: null,
onCellClick: null,
onCellContextMenu: null,
onAppointmentAdding: null,
onAppointmentAdded: null,
onAppointmentUpdating: null,
onAppointmentUpdated: null,
onAppointmentDeleting: null,
onAppointmentDeleted: null,
onAppointmentFormOpening: null,
onAppointmentTooltipShowing: null,
appointmentTooltipTemplate: "appointmentTooltip",
appointmentPopupTemplate: "appointmentPopup",
crossScrollingEnabled: false,
useDropDownViewSwitcher: false,
startDateExpr: "startDate",
endDateExpr: "endDate",
textExpr: "text",
descriptionExpr: "description",
allDayExpr: "allDay",
recurrenceRuleExpr: "recurrenceRule",
recurrenceExceptionExpr: "recurrenceException",
disabledExpr: "disabled",
remoteFiltering: false,
timeZone: "",
startDateTimeZoneExpr: "startDateTimeZone",
endDateTimeZoneExpr: "endDateTimeZone",
noDataText: messageLocalization.format("dxCollectionWidget-noDataText"),
adaptivityEnabled: false,
allowMultipleCellSelection: true,
scrolling: {
mode: "standard"
},
allDayPanelMode: "all",
renovateRender: true,
_draggingMode: "outlook",
_appointmentTooltipOffset: {
x: 0,
y: 0
},
_appointmentTooltipButtonsPosition: "bottom",
_appointmentTooltipOpenButtonText: messageLocalization.format("dxScheduler-openAppointment"),
_appointmentCountPerCell: 2,
_collectorOffset: 0,
_appointmentOffset: 26,
toolbar: [{
location: "before",
defaultElement: "dateNavigator"
}, {
location: "after",
defaultElement: "viewSwitcher"
}]
});
return extend(true, defaultOptions, {
integrationOptions: {
useDeferUpdateForTemplates: false
}
})
}
get filteredItems() {
if (!this._filteredItems) {
this._filteredItems = []
}
return this._filteredItems
}
set filteredItems(value) {
this._filteredItems = value
}
get preparedItems() {
if (!this._preparedItems) {
this._preparedItems = []
}
return this._preparedItems
}
set preparedItems(value) {
this._preparedItems = value
}
get currentView() {
return viewsUtils.getCurrentView(this.option("currentView"), this.option("views"))
}
get currentViewType() {
return isObject(this.currentView) ? this.currentView.type : this.currentView
}
get timeZoneCalculator() {
if (!this._timeZoneCalculator) {
this._timeZoneCalculator = createTimeZoneCalculator(this.option("timeZone"))
}
return this._timeZoneCalculator
}
_setDeprecatedOptions() {
super._setDeprecatedOptions();
extend(this._deprecatedOptions, {
dropDownAppointmentTemplate: {
since: "19.2",
message: "appointmentTooltipTemplate"
}
})
}
_defaultOptionsRules() {
return super._defaultOptionsRules().concat([{
device: () => "desktop" === devices.real().deviceType && !devices.isSimulator(),
options: {
focusStateEnabled: true
}
}, {
device: () => !devices.current().generic,
options: {
useDropDownViewSwitcher: true,
editing: {
allowDragging: false,
allowResizing: false
}
}
}, {
device: () => isMaterialBased(),
options: {
useDropDownViewSwitcher: true,
dateCellTemplate(data, index, element) {
const {
text: text
} = data;
text.split(" ").forEach(((text, index) => {
const span = $("<span>").text(text).addClass("dx-scheduler-header-panel-cell-date");
$(element).append(span);
if (!index) {
$(element).append(" ")
}
}))
},
_appointmentTooltipButtonsPosition: "top",
_appointmentTooltipOpenButtonText: null,
_appointmentCountPerCell: 1,
_collectorOffset: 20,
_appointmentOffset: 30
}
}, {
device: () => isMaterial(),
options: {
_appointmentTooltipOffset: {
x: 0,
y: 11
}
}
}])
}
_postponeDataSourceLoading(promise) {
this.postponedOperations.add("_reloadDataSource", this._reloadDataSource.bind(this), promise)
}
_postponeResourceLoading() {
const whenLoaded = this.postponedOperations.add("loadResources", (() => {
const groups = this._getCurrentViewOption("groups");
return loadResources(groups, this.option("resources"), this.option("resourceLoaderMap"))
}));
const resolveCallbacks = new Deferred;
whenLoaded.done((resources => {
this.option("loadedResources", resources);
resolveCallbacks.resolve(resources)
}));
this._postponeDataSourceLoading(whenLoaded);
return resolveCallbacks.promise()
}
_optionChanged(args) {
var _this$_header, _this$_header2, _this$_header4;
this.validateOptions();
let {
value: value
} = args;
const {
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);
break;
case "currentDate":
value = this._dateOption(name);
value = dateUtils.trimTime(new Date(value));
this.option("selectedCellData", []);
this._workSpace.option(name, new Date(value));
null === (_this$_header = this._header) || void 0 === _this$_header || _this$_header.option(name, new Date(value));
null === (_this$_header2 = this._header) || void 0 === _this$_header2 || _this$_header2.option("startViewDate", this.getStartViewDate());
this._appointments.option("items", []);
this._filterAppointmentsByDate();
this._postponeDataSourceLoading();
break;
case "dataSource":
this._initDataSource();
this.appointmentDataProvider.setDataSource(this._dataSource);
this._postponeResourceLoading().done((() => {
this._filterAppointmentsByDate();
this._updateOption("workSpace", "showAllDayPanel", this.option("showAllDayPanel"))
}));
break;
case "min":
case "max":
value = this._dateOption(name);
this._updateOption("header", name, new Date(value));
this._updateOption("workSpace", name, new Date(value));
break;
case "views":
if (this._getCurrentViewOptions()) {
this.repaint()
} else {
var _this$_header3;
null === (_this$_header3 = this._header) || void 0 === _this$_header3 || _this$_header3.option(name, value)
}
break;
case "useDropDownViewSwitcher":
null === (_this$_header4 = this._header) || void 0 === _this$_header4 || _this$_header4.option(name, value);
break;
case "currentView":
this._renderAriaAttributes();
this._appointments.option({
items: [],
allowDrag: this._allowDragging(),
allowResize: this._allowResizing(),
itemTemplate: this._getAppointmentTemplate("appointmentTemplate")
});
this._postponeResourceLoading().done((resources => {
var _this$_header5;
this._refreshWorkSpace(resources);
null === (_this$_header5 = this._header) || void 0 === _this$_header5 || _this$_header5.option(this._headerConfig());
this._filterAppointmentsByDate();
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((resources => {
this._refreshWorkSpace(resources);
this._filterAppointmentsByDate()
}));
break;
case "resources":
this._dataAccessors.resources = createExpressions(this.option("resources"));
this.agendaResourceProcessor.initializeState(this.option("resources"));
this.updateInstances();
this.option("resourceLoaderMap").clear();
this._postponeResourceLoading().done((resources => {
this._appointments.option("items", []);
this._refreshWorkSpace(resources);
this._filterAppointmentsByDate();
this._createAppointmentPopupForm()
}));
break;
case "startDayHour":
case "endDayHour":
this.updateInstances();
this._appointments.option("items", []);
this._updateOption("workSpace", name, value);
this._appointments.repaint();
this._filterAppointmentsByDate();
this._postponeDataSourceLoading();
break;
case "offset":
this.updateInstances();
this._appointments.option("items", []);
this._updateOption("workSpace", "viewOffset", this.normalizeViewOffsetValue(value));
this._appointments.repaint();
this._filterAppointmentsByDate();
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._workSpace.option(name, value);
break;
case "crossScrollingEnabled":
this._postponeResourceLoading().done((resources => {
this._appointments.option("items", []);
this._refreshWorkSpace(resources);
if (this._readyToRenderAppointments) {
this._appointments.option("items", this._getAppointmentsToRepaint())
}
}));
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._getAppointmentsToRepaint())
}
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.updateInstances();
this.repaint();
break;
case "showCurrentTimeIndicator":
case "indicatorTime":
case "indicatorUpdateInterval":
case "shadeUntilCurrentTime":
case "groupByDate":
this._updateOption("workSpace", name, value);
this.repaint();
break;
case "appointmentDragging":
case "appointmentTooltipTemplate":
case "appointmentPopupTemplate":
case "recurrenceEditMode":
case "remoteFiltering":
case "timeZone":
this.updateInstances();
this.repaint();
break;
case "dropDownAppointmentTemplate":
case "appointmentCollectorTemplate":
case "_appointmentTooltipOffset":
case "_appointmentTooltipButtonsPosition":
case "_appointmentTooltipOpenButtonText":
case "_appointmentCountPerCell":
case "_collectorOffset":
case "_appointmentOffset":
this.repaint();
break;
case "dateSerializationFormat":
case "maxAppointmentsPerCell":
break;
case "startDateExpr":
case "endDateExpr":
case "startDateTimeZoneExpr":
case "endDateTimeZoneExpr":
case "textExpr":
case "descriptionExpr":
case "allDayExpr":
case "recurrenceRuleExpr":
case "recurrenceExceptionExpr":
case "disabledExpr":
this._updateExpression(name, value);
this.appointmentDataProvider.updateDataAccessors(this._dataAccessors);
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.updateInstances();
this._updateOption("workSpace", args.fullName, value);
break;
case "renovateRender":
this._updateOption("workSpace", name, value);
break;
case "_draggingMode":
this._workSpace.option("draggingMode", value);
break;
case "toolbar":
this._header ? this._header.option("items", value) : this.repaint();
break;
case "loadedResources":
case "resourceLoaderMap":
break;
default:
super._optionChanged(args)
}
}
_dateOption(optionName) {
const optionValue = this._getCurrentViewOption(optionName);
return dateSerialization.deserializeDate(optionValue)
}
_getSerializationFormat(optionName) {
const value = this._getCurrentViewOption(optionName);
if ("number" === typeof value) {
return "number"
}
if (!isString(value)) {
return
}
return dateSerialization.getDateSerializationFormat(value)
}
_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.getLayoutManager().appointmentRenderingStrategyName
}
_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.currentViewType || this.currentView.intervalCount > 1
}
_isAllDayExpanded() {
return this.option("showAllDayPanel") && this.appointmentDataProvider.hasAllDayAppointments(this.filteredItems, this.preparedItems)
}
_getTimezoneOffsetByOption(date) {
return timeZoneUtils.calculateTimezoneByValue(this.option("timeZone"), date)
}
_filterAppointmentsByDate() {
const dateRange = this._workSpace.getDateRange();
const startDate = this.timeZoneCalculator.createDate(dateRange[0], {
path: "fromGrid"
});
const endDate = this.timeZoneCalculator.createDate(dateRange[1], {
path: "fromGrid"
});
this.appointmentDataProvider.filterByDate(startDate, endDate, this.option("remoteFiltering"), this.option("dateSerializationFormat"))
}
_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.filteredItems && workspace) {
if (isForce || !isFixedHeight || !isFixedWidth) {
workspace.option("allDayExpanded", this._isAllDayExpanded());
workspace._dimensionChanged();
const appointments = this.getLayoutManager().createAppointmentsMap(this.filteredItems);
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._initExpressions({
startDate: this.option("startDateExpr"),
endDate: this.option("endDateExpr"),
startDateTimeZone: this.option("startDateTimeZoneExpr"),
endDateTimeZone: this.option("endDateTimeZoneExpr"),
allDay: this.option("allDayExpr"),
text: this.option("textExpr"),
description: this.option("descriptionExpr"),
recurrenceRule: this.option("recurrenceRuleExpr"),
recurrenceException: this.option("recurrenceExceptionExpr"),
disabled: this.option("disabledExpr")
});
super._init();
this._initAllDayPanel();
this._initDataSource();
this._customizeDataSourceLoadOptions();
this.$element().addClass(WIDGET_CLASS);
this._initEditing();
this.updateInstances();
this._initActions();
this._compactAppointmentsHelper = new CompactAppointmentsHelper(this);
this._asyncTemplatesTimers = [];
this._dataSourceLoadedCallback = Callbacks();
this._subscribes = subscribes;
this.agendaResourceProcessor = new AgendaResourceProcessor(this.option("resources"));
this._optionsValidator = new SchedulerOptionsValidator;
this._optionsValidatorErrorHandler = new SchedulerOptionsValidatorErrorsHandler
}
createAppointmentDataProvider() {
var _this$appointmentData;
null === (_this$appointmentData = this.appointmentDataProvider) || void 0 === _this$appointmentData || _this$appointmentData.destroy();
this.appointmentDataProvider = new AppointmentDataProvider({
dataSource: this._dataSource,
dataAccessors: this._dataAccessors,
timeZoneCalculator: this.timeZoneCalculator,
dateSerializationFormat: this.option("dateSerializationFormat"),
resources: this.option("resources"),
startDayHour: this._getCurrentViewOption("startDayHour"),
endDayHour: this._getCurrentViewOption("endDayHour"),
viewOffset: this.getViewOffsetMs(),
appointmentDuration: this._getCurrentViewOption("cellDuration"),
allDayPanelMode: this._getCurrentViewOption("allDayPanelMode"),
showAllDayPanel: this.option("showAllDayPanel"),
getLoadedResources: () => this.option("loadedResources"),
getIsVirtualScrolling: () => this.isVirtualScrolling(),
getSupportAllDayRow: () => this._workSpace.supportAllDayRow(),
getViewType: () => this._workSpace.type,
getViewDirection: () => this._workSpace.viewDirection,
getDateRange: () => this._workSpace.getDateRange(),
getGroupCount: () => this._workSpace._getGroupCount(),
getViewDataProvider: () => this._workSpace.viewDataProvider
})
}
updateInstances() {
this._timeZoneCalculator = null;
if (this.getWorkSpace()) {
this.createAppointmentDataProvider()
}
}
_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()
}
_updatePreparedItems(items) {
this.preparedItems = getPreparedDataItems(items, this._dataAccessors, this._getCurrentViewOption("cellDuration"), this.timeZoneCalculator)
}
_dataSourceChangedHandler(result) {
if (this._readyToRenderAppointments) {
this._workSpaceRecalculation.done((() => {
this._updatePreparedItems(result);
this._renderAppointments();
this.getWorkSpace().onDataSourceChanged(this.filteredItems)
}))
}
}
isVirtualScrolling() {
var _currentViewOptions$s;
const workspace = this.getWorkSpace();
if (workspace) {
return workspace.isVirtualScrolling()
}
const currentViewOptions = this._getCurrentViewOptions();
const scrolling = this.option("scrolling");
return "virtual" === (null === scrolling || void 0 === scrolling ? void 0 : scrolling.mode) || "virtual" === (null === currentViewOptions || void 0 === currentViewOptions || null === (_currentViewOptions$s = currentViewOptions.scrolling) || void 0 === _currentViewOptions$s ? void 0 : _currentViewOptions$s.mode)
}
_filterAppointments() {
this.filteredItems = this.appointmentDataProvider.filter(this.preparedItems)
}
_renderAppointments() {
const workspace = this.getWorkSpace();
this._filterAppointments();
workspace.option("allDayExpanded", this._isAllDayExpanded());
let viewModel = [];
if (this._isVisible()) {
viewModel = this._getAppointmentsToRepaint()
}
this._appointments.option("items", viewModel);
this.appointmentDataProvider.cleanState()
}
_getAppointmentsToRepaint() {
const layoutManager = this.getLayoutManager();
const appointmentsMap = layoutManager.createAppointmentsMap(this.filteredItems);
return layoutManager.getRepaintedAppointments(appointmentsMap, this.getAppointmentsInstance().option("items"))
}
_initExpressions(fields) {
this._dataAccessors = utils.dataAccessors.create(fields, this._dataAccessors, config().forceIsoDateParsing, this.option("dateSerializationFormat"));
this._dataAccessors.resources = createExpressions(this.option("resources"))
}
_updateExpression(name, value) {
const exprObj = {};
exprObj[name.replace("Expr", "")] = value;
this._initExpressions(exprObj)
}
getResourceDataAccessors() {
return this._dataAccessors.resources
}
_initEditing() {
const editing = this.option("editing");
this._editing = {
allowAdding: !!editing,
allowUpdating: !!editing,
allowDeleting: !!editing,
allowResizing: !!editing,
allowDragging: !!editing
};
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;
this.$element().toggleClass(WIDGET_READONLY_CLASS, this._isReadOnly())
}
_isReadOnly() {
let result = true;
const editing = this._editing;
for (const prop in editing) {
if (Object.prototype.hasOwnProperty.call(editing, prop)) {
result = result && !editing[prop]
}
}
return result
}
_dispose() {
var _this$_recurrenceDial;
this._appointmentTooltip && this._appointmentTooltip.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()
}
_renderAriaAttributes() {
const viewTypeLabel = messageLocalization.format({
agenda: "dxScheduler-switcherAgenda",
day: "dxScheduler-switcherDay",
month: "dxScheduler-switcherMonth",
week: "dxScheduler-switcherWeek",
workWeek: "dxScheduler-switcherWorkWeek",
timelineDay: "dxScheduler-switcherTimelineDay",
timelineMonth: "dxScheduler-switcherTimelineMonth",
timelineWeek: "dxScheduler-switcherTimelineWeek",
timelineWorkWeek: "dxScheduler-switcherTimelineWorkWeek"
} [this.currentViewType]);
const label = messageLocalization.format("dxScheduler-ariaLabel", viewTypeLabel);
this.setAria({
label: label,
role: "group"
})
}
_initMarkup() {
super._initMarkup();
this._renderMainContainer();
this._renderAriaAttributes();
this._renderHeader();
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.option("loadedResources"));
this._dataSourceChangedHandler(this._dataSource.items());
this._fireContentReadyAction()
} else {
const groups = this._getCurrentViewOption("groups");
loadResources(groups, this.option("resources"), this.option("resourceLoaderMap")).done((resources => {
this.option("loadedResources", resources);
this._initMarkupCore(resources);
this._reloadDataSource()
}))
}
}
_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 = {
createResourceEditorModel: () => createResourceEditorModel(this.option("resources"), this.option("loadedResources")),
getDataAccessors: () => this._dataAccessors,
createComponent: (element, component, options) => this._createComponent(element, component, options),
getEditingConfig: () => this._editing,
getFirstDayOfWeek: () => this.option("firstDayOfWeek"),
getStartDayHour: () => this.option("startDayHour"),
getCalculatedEndDate: startDateWithStartHour => this._workSpace.calculateEndDate(startDateWithStartHour),
getTimeZoneCalculator: () => this.timeZoneCalculator
};
return new AppointmentForm(scheduler)
}
createAppointmentPopup(form) {
const scheduler = {
getElement: () => this.$element(),
createComponent: (element, component, options) => this._createComponent(element, component, options),
focus: () => this.focus(),
getResources: () => this.option("resources"),
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, resourceItem, inAllDayRow) => {
this._workSpace.updateScrollPosition(startDate, resourceItem, inAllDayRow)
}
};
return 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("getTextAndFormatDate", appointment, targetedAppointment, format),
getAppointmentDisabled: appointment => createAppointmentAdapter(appointment, this._dataAccessors, this.timeZoneCalculator).disabled,
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 = createAppointmentAdapter(targetedAppointment, this._dataAccessors, this.timeZoneCalculator);
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")