HTML5 JavaScript Scheduler Improvements (v17.2)

Check out the new features of the DevExtreme HTML5 Scheduler widget that are coming in the v17.2 release. These features improve the Scheduler appearance and also help you to customize both appointments and views.

Display Several Days, Weeks and Months

Different tasks may require different planning periods. For example, training sessions require semesters, agile software development - iterations, etc. With the upcoming release, we've added a capability to display a custom period on a view by specifying an intervalCount option.

This option is available as a part of the view config. For example, here we set the interval for two work weeks:

$("#scheduler").dxScheduler({
    // …
    views: [
    {
        name: "2 Work Weeks",
        type: "workWeek",
        intervalCount: 2
    }]
});

Indicate the current time

Another feature in v17.2 for the Scheduler widget helps you to distinguish between past and future appointments, as well as tasks. The Scheduler will now provide a specific indicator that highlights the current day and time on views with the time scale. Note that the indicator changes its position with the interval that's specified in the indicatorUpdateInterval option.

The indicator is visible by default. You can hide it by setting the showCurrentTimeIndicator option to false.

Additionally, you can apply shading to cover the timetable up to the current time by assigning true to the shadeUntilCurrentTime option.

Limit number of full-sized appointments per cell

Previously, the Scheduler could show only two full-sized appointments in a cell, while collapsing others. This approach was not flexible and also didn't allow for showing more appointments on wider screen displays.

With v17.2, you can change the number of full-sized appointments per cell using the new maxAppointmentsPerCell option. This allows you to specify a strict limit on displayed appointments, calculate it automatically, or even remove the limitation. On exceeding the limit, appointments no longer become collapsed; instead, they are removed to an appointment collector, from which you can easily drag appointments back to the timetable.

Now, appointments in the appointment collector's drop-down list do not have an Edit button because a click on an appointment opens the edit form. Use the dropDownAppointmentTemplate option to customize these appointments.

Cell Size Customization

With v17.2, you can easily customize cell sizes keeping all elements aligned. Simply specify the desired cell width and height using the dx-scheduler-cell-sizes-horizontal and dx-scheduler-cell-sizes-vertical CSS classes.

Angular, ASP.NET MVC/Core, & More!

Note that all these new features are available on all the frameworks we support: Angular, jQuery, Knockout, ASP.NET MVC, and .NET Core.

Try it now

The new features of our dxScheduler widget are included in the v17.2 pre-release that is available via npm right now. Please note that this pre-release may contain some bugs and is not intended to be used in production:

npm install devextreme@17.2.2-pre-beta

Learn more about DevExtreme's pre-releases in this blog post.

What do you think about the DevExtreme Scheduler's improvements in the next release? Drop me a line below.

Email: mharry@devexpress.com

Twitter: @mehulharry

Free DevExpress Products - Get Your Copy Today