Mehul Harry's DevExpress Blog

This Blog

News


Mehul Harry is the DevExpress Web Program Manager. Follow him on twitter: @Mehulharry

Subscribe (RSS, Email)

Archives

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

Published Nov 13 2017, 11:00 AM by
Filed under: , ,
Bookmark and Share

Comments

Ehouarn Perret 1

A couple of questions:

- Does the shadeUntilCurrentTime option makes the control refreshed continusouly?

- Does it consider the timeZone setting?

November 17, 2017 9:45 AM

Ehouarn Perret 1

A couple of questions:

- Does the shadeUntilCurrentTime option makes the control refreshed continusouly?

- Does it consider the timeZone setting?

November 17, 2017 9:45 AM

Yana Y (DevExpress)

Hi, @Ehouarn Perret 1

1 Yes

2 No, it does not consider the timeZone setting. Would you please create a new SC ticket (www.devexpress.com/.../Create) and describe what task you wish to accomplish so that we can check for a possible solution?

November 20, 2017 2:37 AM

About Mehul Harry (DevExpress)

Mehul Harry is an ASP.NET technical evangelist at Developer Express. You can reach him directly at mharry@DevExpress.com. You can also follow him on Twitter: http://twitter.com/mehulharry
LIVE CHAT

Chat is one of the many ways you can contact members of the DevExpress Team.
We are available Monday-Friday between 7:30am and 4:30pm Pacific Time.

If you need additional product information, write to us at info@devexpress.com or call us at +1 (818) 844-3383

FOLLOW US

DevExpress engineers feature-complete Presentation Controls, IDE Productivity Tools, Business Application Frameworks, and Reporting Systems for Visual Studio, along with high-performance HTML JS Mobile Frameworks for developers targeting iOS, Android and Windows Phone. Whether using WPF, ASP.NET, WinForms, HTML5 or Windows 10, DevExpress tools help you build and deliver your best in the shortest time possible.

Copyright © 1998-2017 Developer Express Inc.
All trademarks or registered trademarks are property of their respective owners