devextreme
Version:
JavaScript/TypeScript Component Suite for Responsive Web Development
117 lines (116 loc) • 4.68 kB
JavaScript
/**
* DevExtreme (esm/__internal/scheduler/appointments_new/appointment_collector.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 dateLocalization from "../../../common/core/localization/date";
import messageLocalization from "../../../common/core/localization/message";
import registerComponent from "../../../core/component_registrator";
import $ from "../../../core/renderer";
import {
EmptyTemplate
} from "../../../core/templates/empty_template";
import Button from "../../../ui/button";
import {
FunctionTemplate
} from "../../core/templates/m_function_template";
import {
APPOINTMENT_COLLECTOR_CLASSES
} from "./const";
import {
ViewItem
} from "./view_item";
export class AppointmentCollector extends ViewItem {
get appointmentsCount() {
return this.option().items.length
}
_setOptionsByReference() {
super._setOptionsByReference();
this._optionsByReference = Object.assign({}, this._optionsByReference, {
items: true,
targetedAppointmentData: true
})
}
_init() {
super._init();
this.defaultAppointmentCollectorTemplate = new FunctionTemplate(options => {
this.defaultAppointmentCollectorContent($(options.container))
})
}
_initMarkup() {
super._initMarkup();
this.resize();
this.applyElementClasses();
this.applyElementAria();
this.attachFocusEvents();
this.attachKeydownEvents();
this.renderContentTemplate()
}
resize(geometry) {
var _this$buttonInstance;
const newGeometry = geometry ?? this.option().geometry;
const {
top: top,
left: left,
width: width,
height: height
} = newGeometry;
this.$element().css({
top: top,
left: left
});
null === (_this$buttonInstance = this.buttonInstance) || void 0 === _this$buttonInstance || _this$buttonInstance.option({
width: width,
height: height
})
}
setTabIndex(tabIndex) {
var _this$buttonInstance2;
super.setTabIndex(tabIndex);
null === (_this$buttonInstance2 = this.buttonInstance) || void 0 === _this$buttonInstance2 || _this$buttonInstance2.option("tabIndex", tabIndex)
}
applyElementClasses() {
this.$element().addClass(APPOINTMENT_COLLECTOR_CLASSES.CONTAINER).toggleClass(APPOINTMENT_COLLECTOR_CLASSES.COMPACT, this.option().isCompact)
}
applyElementAria() {
const localizeDate = date => `${dateLocalization.format(date,"monthAndDay")}, ${dateLocalization.format(date,"year")}`;
const {
targetedAppointmentData: targetedAppointmentData
} = this.option();
const startDateText = localizeDate(targetedAppointmentData.displayStartDate);
const endDateText = localizeDate(targetedAppointmentData.displayEndDate);
const dateText = startDateText === endDateText ? startDateText : `${startDateText} - ${endDateText}`;
this.$element().attr("aria-roledescription", dateText)
}
renderContentTemplate() {
const template = this.option().appointmentCollectorTemplate instanceof EmptyTemplate ? this.defaultAppointmentCollectorTemplate : this.option().appointmentCollectorTemplate;
this.buttonInstance = this._createComponent(this.$element(), Button, {
type: "default",
tabIndex: this.option().tabIndex,
width: this.option().geometry.width,
height: this.option().geometry.height,
template: new FunctionTemplate(e => template.render({
container: e.container,
model: {
appointmentCount: this.appointmentsCount,
isCompact: this.option().isCompact,
items: this.option().items.map(item => item.itemData)
}
})),
onClick: e => {
this.option().onClick(this, e.event)
}
})
}
defaultAppointmentCollectorContent($container) {
const count = this.appointmentsCount;
const text = this.option().isCompact ? count : messageLocalization.getFormatter("dxScheduler-moreAppointments")(count);
$("<span>").text(text).appendTo($container);
$container.addClass(APPOINTMENT_COLLECTOR_CLASSES.CONTENT);
return $container
}
}
registerComponent("dxSchedulerNewAppointmentCollector", AppointmentCollector);