Blazor Scheduler - New Templates, Cell Customization, Adaptivity, and more (available in v21.2)

ASP.NET Team Blog
15 December 2021

As you may already know, our most recent release (v21.2) includes several enhancements for the DevExpress Blazor Scheduler component. In this post, I'll summarize these new features and briefly describe their use.

Templates

With v21.2, we added three new templates that allow you customize the appearance of our Blazor Scheduler:

  1. Resource Header Template
  2. Date Header Template
  3. Time Cell Template

These flexible templates allow you to add simple HTML elements (such as images) or other Blazor components.

1. Resource Header Template

You can use the new ResourceHeaderCellTemplate to customize our Blazor Scheduler's resource header area. Here's an example that uses ResourceHeaderCellTemplate to display an employee's profile image and name into the resource header region:

blazor-scheduler-resource-header-customization

Demo | Documentation

2. Date Header Template

A new DateHeaderCellTemplate will be of help when you need to display additional content in the date header cell region or if simply you want to change the header's default date format:

blazor-scheduler-set-custom-date-cell-format

Demo | Documentation

3. Time Cell Template

Use the new TimeCellTemplate to customize our Blazor Scheduler's time cells. For example, you can use this template to display the total number of appointments by day within the component's footer area:

blazor-scheduler-time-cell-template

Demo | Documentation

Responsive Layout Enhancements

Our Blazor Scheduler component's Day, Week, and Work Week Views now have compact date headers. These Views also adapt date headers and the time ruler depending on screen size.

blazor-scheduler-mobie-friendly-responsive-layout

In addition, all Scheduler Views can hide appointment captions (when space limits the component's ability to display the caption in full).

Cell Customization API

Our new HtmlCellDecoration event allows you to customize the appearance of Scheduler cells.

blazor-scheduler-cell-appearance-customization

Use this new API for scenarios such as highlighting cells within a specific interval for a specific resource, assigning different colors to different date header cells, highlighting the all-day area, etc.

The HtmlCellDecoration event also provides several data arguments to assign CSS classes and inline styles for cell customization:

Property Description
CellType Specifies the Scheduler cell's type.
CssClass Specifies the name of a CSS class applied to the Scheduler cell.
Intervals Specifies the interval(s) to which the Scheduler cell belongs.
Resources Specifies resources associated with the Scheduler cell.
Style Specifies the name of an HTML style attribute applied to the cell.

Other API Enhancements

The DevExpress Scheduler for Blazor (v21.1) also includes these following API enhancements:

  • All Blazor Scheduler Views now include a SnapToCellsMode property. With this property, you can enable/disable the snapping of appointments to time cells or enable automatic snapping (based on appointment time intervals). By default, appointments stretch to the nearest cell borders. You can change this behavior so that an appointment's width is proportional to its duration (SnapToCellsMode= SchedulerSnapToCellsMode.Never):

blazor-scheduler-set-appointment-duration-time

  • The AppointmentFormShowing event's arguments now include a Title property. Use it to change the Appointment Form title.

Your Feedback Matters

As always, we welcome your thoughts/feedback/suggestion. Please comment below or create a new DevExpress Support Center ticket to share feedback with us.

Happy Holidays and a Happy New Year!

Free DevExpress Products – Get Your Copy Today

The following free DevExpress product offers remain available. Should you have any questions about the free offers below, please submit a ticket via the DevExpress Support Center at your convenience. We’ll be happy to follow-up.
Tom Mcd
Tom Mcd
I like the enhancements.  Any chance you can implement nested/overlapping events?  That is the one feature I have been hoping Dev express would implement for a while now.
15 December 2021
Mehul Harry (DevExpress)
Mehul Harry (DevExpress)

Hi Tom,

Thanks. Unfortunately, this feature is not planned but we may reconsider it for a future release.

16 December 2021
CRM-552c0905-cad4-41cb-a99e-446ba4295b4e
Yousef

Hi, Is it support different date cultures and the Right-to-Left layout?


21 December 2021
Rick Mathers
Rick Mathers

Can you please consider the following ticket for future development on the Blazor scheduler?

https://supportcenter.devexpress.com/ticket/details/t324842/dxscheduler-how-to-implement-custom-groupping-by-resources-in-timeline-view

This is really important to our clients? 

8 January 2022

Please login or register to post comments.