devextreme/esm/__internal/scheduler/appointments_new/appointment/base_appointment.js

JavaScript/TypeScript Component Suite for Responsive Web Development

/**
 * DevExtreme (esm/__internal/scheduler/appointments_new/appointment/base_appointment.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 messageLocalization from "../../../../common/core/localization/message";
import registerComponent from "../../../../core/component_registrator";
import $ from "../../../../core/renderer";
import {
    getPublicElement
} from "../../../core/m_element";
import {
    EmptyTemplate
} from "../../../core/templates/m_empty_template";
import {
    FunctionTemplate
} from "../../../core/templates/m_function_template";
import {
    click
} from "../../../events/m_short";
import {
    APPOINTMENT_CLASSES,
    APPOINTMENT_TYPE_CLASSES,
    FOCUSED_STATE_CLASS
} from "../const";
import {
    DateFormatType,
    getDateTextFromTargetAppointment
} from "../utils/get_date_text";
import {
    EVENTS_NAMESPACE,
    ViewItem
} from "../view_item";
export class BaseAppointmentView extends ViewItem {
    get targetedAppointmentData() {
        return this.option().targetedAppointmentData
    }
    get appointmentData() {
        return this.option().appointmentData
    }
    _init() {
        super._init();
        this.defaultAppointmentTemplate = new FunctionTemplate(options => {
            this.defaultAppointmentContent($(options.container))
        })
    }
    _initMarkup() {
        super._initMarkup();
        this.resize();
        this.applyElementClasses();
        this.applyAria();
        this.attachFocusEvents();
        this.attachClickEvent();
        this.attachKeydownEvents();
        this.renderContentTemplate()
    }
    _dispose() {
        super._dispose();
        click.off(this.$element(), EVENTS_NAMESPACE)
    }
    applyElementClasses() {
        this.$element().addClass(APPOINTMENT_CLASSES.CONTAINER).toggleClass(APPOINTMENT_TYPE_CLASSES.RECURRING, this.isRecurring()).toggleClass(APPOINTMENT_TYPE_CLASSES.ALL_DAY, this.isAllDay())
    }
    applyAria() {
        this.$element().attr("role", "button").attr("tabindex", this.option().tabIndex)
    }
    attachClickEvent() {
        click.off(this.$element(), EVENTS_NAMESPACE);
        click.on(this.$element(), this.onClick.bind(this), EVENTS_NAMESPACE)
    }
    onFocusIn() {
        this.$element().addClass(FOCUSED_STATE_CLASS);
        super.onFocusIn()
    }
    onFocusOut(e) {
        this.$element().removeClass(FOCUSED_STATE_CLASS);
        super.onFocusOut(e)
    }
    setTabIndex(tabIndex) {
        super.setTabIndex(tabIndex);
        this.$element().attr("tabindex", tabIndex ?? null)
    }
    getTitleText() {
        const dataAccessor = this.option().getDataAccessor();
        const titleText = dataAccessor.get("text", this.targetedAppointmentData);
        if (!titleText) {
            return messageLocalization.format("dxScheduler-noSubject")
        }
        return titleText
    }
    getDateText() {
        const dateText = getDateTextFromTargetAppointment(this.targetedAppointmentData, this.isAllDay() ? DateFormatType.DATE : DateFormatType.TIME);
        return dateText
    }
    isRecurring() {
        const dataAccessor = this.option().getDataAccessor();
        const recurrenceRule = dataAccessor.get("recurrenceRule", this.targetedAppointmentData);
        return Boolean(recurrenceRule)
    }
    isAllDay() {
        const dataAccessor = this.option().getDataAccessor();
        const allDay = dataAccessor.get("allDay", this.targetedAppointmentData);
        return Boolean(allDay)
    }
    renderContentTemplate() {
        const $content = $("<div>").addClass(APPOINTMENT_CLASSES.CONTENT).appendTo(this.$element());
        const template = this.option().appointmentTemplate instanceof EmptyTemplate ? this.defaultAppointmentTemplate : this.option().appointmentTemplate;
        template.render({
            container: getPublicElement($content),
            model: {
                appointmentData: this.appointmentData,
                targetedAppointmentData: this.targetedAppointmentData
            },
            index: this.option().index,
            onRendered: () => {
                this.option().onRendered({
                    element: getPublicElement(this.$element()),
                    appointmentData: this.appointmentData,
                    targetedAppointmentData: this.targetedAppointmentData
                })
            }
        })
    }
    defaultAppointmentContent($container) {
        return $container
    }
}
registerComponent("dxSchedulerNewAppointment", BaseAppointmentView);