devextreme/esm/__internal/scheduler/header/m_calendar.js

JavaScript/TypeScript Component Suite for Responsive Web Development

/**
 * DevExtreme (esm/__internal/scheduler/header/m_calendar.js)
 * Version: 25.2.7
 * Build date: Tue May 05 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);