DevExtreme jQuery/JS - Appointment Collector
Appointments are aggregated in an appointment collector when the limit of full-sized appointments per cell is exceeded. Users should click on it to open a drop-down list of appointments.
Use the appointmentCollectorTemplate and dropDownAppointmentTemplate options to customize the elements.
In the following code, the compact and non-compact appointment collectors have different texts, and a custom button that opens a details form is added near each appointment:
- $(function () {
- $("#schedulerContainer").dxScheduler({
- // ...
- dropDownAppointmentTemplate: function (data, index, element) {
- var container = $("<div>" + data.text + "</div>");
- var button = $("<span class='edit'>").dxButton({ icon: "event" });
- element.append(container.append(button));
- },
- appointmentCollectorTemplate: function(data, element) {
- if(data.isCompact) {
- element[0].innerText = data.appointmentCount;
- } else {
- element[0].innerText = "Total: " + data.appointmentCount;
- }
- element.addClass("collector");
- }
- });
- });
- .edit{
- margin-left: 10px;
- }
- .collector {
- font-style: italic;
- color: aliceblue;
- }
In case of jQuery, you can also use a 3rd-party template engine to customize the widget's appearance. See the 3rd-Party Template Engines article for more information.
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.