Scheduler for Blazor - Resources, Custom Fields, Form Customization (available in v20.2)

ASP.NET Team Blog
03 December 2020

Our most recent release (v20.2), includes a series of new features/capabilities for existing DevExpress Blazor UI controls. In this post, I'll focus on the most recent enhancements to our Blazor Scheduler component.

Before I proceed, a quick word about v20.1 and our expired free Blazor UI component offer. If you downloaded v20.1 free-of-charge, you are entitled to use v20.1 as long as you wish. With our v20.2, our Blazor UI controls are no longer available free-of-charge. Should you require additional information on v20.1, please forward your comments to clientservices@devexpress.com.

Resources

Our Blazor Scheduler now allows you to assign resources to appointments and browse multiple schedules simultaneously. You can group appointments by resources or by dates and display resources in different views:

Blazor Scheduler Resources

Demo | Documentation

We've integrated Resource Navigation into our Blazor Scheduler. Your users can show or hide calendars via our integrated Resource Navigator.

Blazor Scheduler Resource Navigation

You can also create a custom UI as needed. For instance, you can introduce a tree-like resource navigator to filter resources:

Blazor Scheduler Resource Navigation Filter

Demo | Documentation

Custom Appointment Form

Our Blazor Scheduler has two built-in dialogs to edit appointments: compact and detailed. We've added a flexible new API to create custom layouts for these Appointment Dialogs. You can customize the forms to do the following:

  • Add your own editors and bind them to custom fields
  • Use custom editors for built-in Appointment items
  • Mix custom content with default items
  • Combine items into groups to better address your business requirements

Use the following new properties to manage these dialogs:

AppointmentCompactFormLayout - Specifies the layout of the compact form that appears when you create an appointment.

Blazor Scheduler Edit Form Customization

AppointmentFormLayout - Specifies the layout of the pop-up form that appears when you create an appointment and click the expand button, or when you edit an appointment.

Blazor Scheduler Custom Edit Form

Demo | Documentation

Appointment Templates

You can now customize appointment appearance via templates. New templates include:

Blazor Scheduler Appointment Templates

Demo | Documentation

Custom Fields

Custom fields allow you to add custom data to appointments, labels, and status fields. For example, use the AppointmentMappings.CustomFieldMappings collection to add custom fields for appointments:

DxSchedulerDataStorage DataStorage = new DxSchedulerDataStorage() {
  AppointmentsSource = AppointmentCollection.GetAppointments(),
  AppointmentMappings = new DxSchedulerAppointmentMappings() {
    ...
    CustomFieldMappings = new List<DxSchedulerCustomFieldMapping> {
      new DxSchedulerCustomFieldMapping { Name = "IsAccepted", Mapping = "Accepted" }
    }
  }
};

Demo | Documentation

New API to assign CSS classes

The TextCssClass and BackgroundCssClass properties allow you to assign CSS classes to appointment labels and status fields. You can also map the label's properties to the data source fields:

AppointmentLabelMappings = new DxSchedulerAppointmentLabelMappings()
{
  Id = "Id",
  Caption = "LabelName",
  Color = "LabelColor",
  TextCssClass = "TextCssClass",
  BackgroundCssClass = "BackgroundCssClass"
}

Documentation

Should you have any questions about these new features, or if you require assistance on our Blazor product line, please comment below. Please remember, that the features described in this post relate to v20.2. v20.2 is not available free-of-charge. The capabilities described in this post are available to those who own an active ASP.NET/DXperience/Universal Subscription.

Showcase Your Apps on DevExpress.com

Highlight your business app and share your development experiences with the DevExpress community. To include your app in our upcoming App Showcase, please forward an application screenshot to clientservices@devexpress.com and tell us which DevExpress products you currently use within your organization.
3 comment(s)
Manuel Grundner [DevExpress MVP]
Manuel Grundner [DevExpress MVP]
Awesome work!
4 December 2020
Andrew Fraser
Andrew Fraser

Great work on the new features of the scheduler component.

Please keep new features and new Blazor controls coming.

Andy

4 December 2020
Rick Mathers
Rick Mathers

Mehul,

Unfortunately, when I am looking at online demo's I generally see People as the resource.

Can DevExpress consider the following scenario for future development?

Imagine you have a large banquet room.  This banquet room can be split into two (or more rooms) using dividers.  So for resources, I have Banquet Room 1, Break Out Room 1, Break Out Room 2 (Break out rooms are the split resources from Banquet Room 1).

If Break out room 1 has an appointment, Break out room 2 is still available; however Banquet room 1 is considered blocked because a portion of it is booked.  

The inverse scenario is that if Banquet room 1 has an appointment, both break out room are considered blocked as well.

This is a frequent scenario with event venues and conferences.  And unfortunately in my case; I am generally have to consider all 3 (or more) as separate resources and copy appointment data around to simulate the block. I guess what I am looking for is some kind of parent resource hierarchy.

Thanks for your consideration and excellent work on Blazor so far. I can't wait to see what is coming next.

4 December 2020

Please login or register to post comments.