DevExtreme Scheduler - Grouping Improvements and New Context Menu API (v18.1)

As part of the upcoming v18.1 release, we have added improvements to grouping, as well as a new context menu API to the DevExtreme Scheduler. Let's take a look at these enhancements.

Grouping Improvements

We've added the ability to change the default orientation of groups. You can now display groups vertically on the left side or horizontally on the top.

Grouping in a different area can be convenient when the work space is limited and you need to make the view more compact.

To set “vertical” or “horizontal” groups orientation use the groupOrientation option. The option is available on a view configuration level:

$("#scheduler").dxScheduler({ 
// …, 
       views: [{ 
           type: "week", 
           name: "Vertical Grouped Week", 
           groupOrientation: "vertical" 
       }] 
});

If you have questions or suggestions, then please take part in the discussion about this feature on GitHub.

New Context Menu API

We've also added API events for displaying the context menu for a cell or an appointment. The new onAppointmentContextMenu and onCellContextMenu events help you create your own context menu, and gives your end-users more and better capabilities for interaction with the Scheduler.

These new events help you to create your own context menu. It provides your end-users more capabilities for interaction with the Scheduler.

To customize the context menu appearance, add the following event handlers:

$("#scheduler").dxScheduler({ 
    // …, 
            onAppointmentContextMenu: function(e) { 
            …
        }, 
        onCellContextMenu: function(e) { 
    … 
    } 
});

For example, here's a couple of custom items that we've added near the bottom of each respective menu:

If you have questions or suggestions, then please take part in the discussion about this feature on GitHub.

Angular, Vue, React, ASP.NET MVC / Core and more

All of these new features will be available on all the frameworks we support: Angular, Vue, React, jQuery, Knockout, ASP.NET MVC and .NET Core.

Test It Today

If you want to give these features a test-drive then simply add DevExtreme to your project by adding this npm package:

npm install --save devextreme@18.1-unstable

If you're not using npm, check out my earlier blog post about pre-releases.

Watch the Webinar

Watch the “New in v18.1 - DevExtreme HTML / JS Controls” webinar where you’ll see all the new DevExtreme v18.1 items demonstrated for our ASP.NET MVC, ASP.NET Core, React, Vue, or other client-side offerings.

Like it?

We'd love to hear your feedback about the DevExtreme Scheduler improvements. Drop me a line below, thanks.

Email: mharry@devexpress.com

Twitter: @mehulharry

Free DevExpress Products - Get Your Copy Today