devextreme
Version:
JavaScript/TypeScript Component Suite for Responsive Web Development
71 lines (70 loc) • 2.53 kB
JavaScript
/**
* DevExtreme (esm/__internal/scheduler/appointments_new/appointment/grid_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 Resizable from "../../../ui/resizable/resizable";
import {
ALL_DAY_TEXT,
APPOINTMENT_CLASSES,
APPOINTMENT_TYPE_CLASSES,
RECURRING_LABEL
} from "../const";
import {
BaseAppointmentView
} from "./base_appointment";
export class GridAppointmentView extends BaseAppointmentView {
_initMarkup() {
super._initMarkup();
this.renderResizable();
void this.applyElementColor()
}
renderResizable() {
if (!this.option().allowResize) {
return
}
this._createComponent(this.$element(), Resizable, this.option().resizableConfig ?? {})
}
resize(geometry) {
const newGeometry = geometry ?? this.option().geometry;
const {
top: top,
left: left,
width: width,
height: height
} = newGeometry;
this.$element().css({
height: height,
width: width,
top: top,
left: left
})
}
applyElementClasses() {
super.applyElementClasses();
this.$element().toggleClass(APPOINTMENT_TYPE_CLASSES.EMPTY, this.option().modifiers.empty)
}
defaultAppointmentContent($container) {
$("<div>").text(this.getTitleText()).addClass(APPOINTMENT_CLASSES.TITLE).appendTo($container);
if (this.isRecurring()) {
$("<span>").addClass(`${APPOINTMENT_CLASSES.RECURRENCE_ICON} dx-icon-repeat`).attr("aria-label", RECURRING_LABEL).attr("role", "img").appendTo($container)
}
const $contentDetails = $("<div>").addClass(APPOINTMENT_CLASSES.DETAILS).appendTo($container);
$("<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)
}
return $container
}
async applyElementColor() {
const color = await this.option().getResourceColor();
if (color) {
this.$element().addClass(APPOINTMENT_TYPE_CLASSES.HAS_RESOURCE);
this.$element().css("backgroundColor", color)
}
}
}