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.

Scheduler Appointment Collector and Drop-Down List

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:

JavaScript
CSS
  • $(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