devextreme
Version:
JavaScript/TypeScript Component Suite for Responsive Web Development
126 lines (125 loc) • 4.82 kB
JavaScript
/**
* DevExtreme (esm/__internal/scheduler/header/m_calendar.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 registerComponent from "../../../core/component_registrator";
import devices from "../../../core/devices";
import $ from "../../../core/renderer";
import Popover from "../../../ui/popover/ui.popover";
import Popup from "../../../ui/popup/ui.popup";
import Widget from "../../core/widget/widget";
import Calendar from "../../ui/calendar/calendar";
import Scrollable from "../../ui/scroll_view/scrollable";
const CALENDAR_CLASS = "dx-scheduler-navigator-calendar";
const CALENDAR_POPOVER_CLASS = "dx-scheduler-navigator-calendar-popover";
export default class SchedulerCalendar extends Widget {
async show(target) {
var _this$_overlay2;
if (!SchedulerCalendar._isMobileLayout()) {
var _this$_overlay;
null === (_this$_overlay = this._overlay) || void 0 === _this$_overlay || _this$_overlay.option("target", target)
}
await (null === (_this$_overlay2 = this._overlay) || void 0 === _this$_overlay2 ? void 0 : _this$_overlay2.show())
}
async hide() {
var _this$_overlay3;
await (null === (_this$_overlay3 = this._overlay) || void 0 === _this$_overlay3 ? void 0 : _this$_overlay3.hide())
}
_keyboardHandler(opts) {
var _this$_calendar;
return (null === (_this$_calendar = this._calendar) || void 0 === _this$_calendar ? void 0 : _this$_calendar._keyboardHandler(opts)) ?? false
}
_init() {
super._init();
this.$element()
}
_render() {
super._render();
this._renderOverlay()
}
_renderOverlay() {
this.$element().addClass(CALENDAR_POPOVER_CLASS);
const isMobileLayout = SchedulerCalendar._isMobileLayout();
const overlayConfig = {
contentTemplate: () => this._createOverlayContent(),
onShown: () => {
var _this$_calendar2;
null === (_this$_calendar2 = this._calendar) || void 0 === _this$_calendar2 || _this$_calendar2.focus()
},
defaultOptionsRules: [{
device: () => isMobileLayout,
options: {
fullScreen: true,
showCloseButton: false,
toolbarItems: [{
shortcut: "cancel"
}],
_ignorePreventScrollEventsDeprecation: true,
preventScrollEvents: false,
enableBodyScroll: false
}
}]
};
if (isMobileLayout) {
this._overlay = this._createComponent(this.$element(), Popup, overlayConfig)
} else {
this._overlay = this._createComponent(this.$element(), Popover, overlayConfig)
}
}
_createOverlayContent() {
const result = $("<div>").addClass(CALENDAR_CLASS);
this._calendar = this._createComponent(result, Calendar, this._getCalendarOptions());
if (SchedulerCalendar._isMobileLayout()) {
const scrollable = this._createScrollable(result);
return scrollable.$element()
}
return result
}
_createScrollable(content) {
const result = this._createComponent("<div>", Scrollable, {
height: "auto",
direction: "both"
});
result.$content().append(content);
return result
}
_optionChanged(args) {
var _this$_calendar3;
const {
name: name,
value: value
} = args;
if ("value" === name) {
null === (_this$_calendar3 = this._calendar) || void 0 === _this$_calendar3 || _this$_calendar3.option("value", value)
}
}
_getCalendarOptions() {
const {
value: value,
min: min,
max: max,
firstDayOfWeek: firstDayOfWeek,
focusStateEnabled: focusStateEnabled,
tabIndex: tabIndex,
onValueChanged: onValueChanged
} = this.option();
return {
value: value,
min: min,
max: max,
firstDayOfWeek: firstDayOfWeek,
focusStateEnabled: focusStateEnabled,
tabIndex: tabIndex,
onValueChanged: onValueChanged,
skipFocusCheck: true
}
}
static _isMobileLayout() {
return !devices.current().generic
}
}
registerComponent("dxSchedulerCalendarPopup", SchedulerCalendar);