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

JavaScript/TypeScript Component Suite for Responsive Web Development

/**
 * DevExtreme (esm/__internal/scheduler/appointments_new/appointment/agenda_appointment.js)
 * Version: 26.1.4
 * Build date: Fri Jul 24 2026
 *
 * Copyright (c) 2012 - 2026 Developer Express Inc. ALL RIGHTS RESERVED
 * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
 */
import $ from "../../../../core/renderer";
import {
    AGENDA_APPOINTMENT_CLASSES,
    ALL_DAY_TEXT,
    APPOINTMENT_CLASSES,
    APPOINTMENT_TYPE_CLASSES,
    RECURRING_LABEL
} from "../const";
import {
    BaseAppointmentView
} from "./base_appointment";
export class AgendaAppointmentView extends BaseAppointmentView {
    applyElementClasses() {
        super.applyElementClasses();
        this.$element().toggleClass(AGENDA_APPOINTMENT_CLASSES.LAST_IN_DATE, this.option().modifiers.isLastInGroup)
    }
    resize() {
        this.$element().css({
            height: this.option().geometry.height,
            width: this.option().geometry.width
        })
    }
    defaultAppointmentContent($container) {
        this.renderMarker($container);
        this.renderInfo($container);
        return $container
    }
    renderMarker($container) {
        const $leftContainer = $("<div>").addClass(AGENDA_APPOINTMENT_CLASSES.LEFT_LAYOUT).appendTo($container);
        const $marker = $("<div>").addClass(AGENDA_APPOINTMENT_CLASSES.MARKER).appendTo($leftContainer);
        void this.option().getResourceColor().then(color => {
            if (color) {
                this.$element().addClass(APPOINTMENT_TYPE_CLASSES.HAS_RESOURCE);
                $marker.css("backgroundColor", color)
            }
        });
        if (this.isRecurring()) {
            $("<span>").addClass(`${APPOINTMENT_CLASSES.RECURRENCE_ICON} dx-icon-repeat`).attr("aria-label", RECURRING_LABEL).appendTo($marker)
        }
    }
    renderInfo($container) {
        const $rightContainer = $("<div>").addClass(AGENDA_APPOINTMENT_CLASSES.RIGHT_LAYOUT).appendTo($container);
        $("<div>").addClass(APPOINTMENT_CLASSES.TITLE).text(this.getTitleText()).appendTo($rightContainer);
        const $contentDetails = $("<div>").addClass(APPOINTMENT_CLASSES.DETAILS).appendTo($rightContainer);
        $("<div>").addClass(APPOINTMENT_CLASSES.DATE).text(this.getDateText()).appendTo($contentDetails);
        if (this.isAllDay()) {
            $("<div>").text(ALL_DAY_TEXT).addClass(APPOINTMENT_CLASSES.ALL_DAY_TEXT).prependTo($contentDetails)
        }
        this.renderResourceList($contentDetails)
    }
    renderResourceList($contentDetails) {
        void this.option().getResourcesValues(this.appointmentData).then(resources => {
            const container = $("<div>").addClass(AGENDA_APPOINTMENT_CLASSES.RESOURCE_LIST).appendTo($contentDetails);
            resources.forEach(resource => {
                const itemContainer = $("<div>").addClass(AGENDA_APPOINTMENT_CLASSES.RESOURCE_ITEM).appendTo(container);
                $("<div>").text(`${resource.label}:`).appendTo(itemContainer);
                $("<div>").addClass(AGENDA_APPOINTMENT_CLASSES.RESOURCE_ITEM_VALUE).text(resource.values.join(", ")).appendTo(itemContainer)
            })
        })
    }
}