Skip to main content

DxSchedulerMappingsBase.CustomFieldMappings Property

Returns the collection of custom field mappings.

Namespace: DevExpress.Blazor.Base

Assembly: DevExpress.Blazor.v23.2.dll

NuGet Package: DevExpress.Blazor


public IEnumerable<DxSchedulerCustomFieldMapping> CustomFieldMappings { get; set; }

Property Value

Type Description

The collection of custom field mappings.


The DevExpress Blazor Scheduler works with the DxSchedulerDataStorage object that contains source data for the following objects:

These items contain predefined sets of properties. When you bind a Scheduler to data, you map these properties to data source fields (see the AppointmentMappings, AppointmentLabelMappings, AppointmentStatusMappings, ResourceMappings properties).

You can add custom properties to Scheduler items:

  1. Define custom fields in source objects.
  2. Add created fields to the CustomFieldMappings collection.

You can use custom properties in appointment templates and custom appointment forms.

Add a Custom Field to an Appointment

The code below implements the following scenario:

<DxScheduler StartDate="@DateTime.Today"
        <DxSchedulerWorkWeekView VisibleTime="@(new DxSchedulerTimeSpanRange(TimeSpan.FromHours(8), 
                <div class="demo-sc-apt @((bool)context.CustomFields["IsAccepted"] ? 
                            "demo-sc-accepted " : "")" style="width: 100%;">
                    <div class="card demo-apt-bg dx-purple-color" style="width: 100%;"></div>
                    <div class="card shadow-sm p-1 demo-sc-apt-content text-white" style="width:100%;">
                <div class="shadow-sm demo-sc-apt @((bool)context.CustomFields["IsAccepted"] ? 
                            "demo-sc-accepted" : "")">
                    <div class="card demo-apt-bg dx-purple-color"></div>
                    <div class="card demo-sc-apt-content text-white">
                        <div class="card demo-sc-status-container">
                            <div class="card demo-apt-status dx-purple-color"></div>
                        <div class="demo-apt-subject">

@code {
    DxSchedulerDataStorage DataStorage = new DxSchedulerDataStorage() {
        AppointmentsSource = AppointmentCollection.GetAppointments(),
        AppointmentMappings = new DxSchedulerAppointmentMappings() {
            Type = "AppointmentType",
            Start = "StartDate",
            End = "EndDate",
            Subject = "Caption",
            AllDay = "AllDay",
            Location = "Location",
            Description = "Description",
            CustomFieldMappings = new List<DxSchedulerCustomFieldMapping> {
                new DxSchedulerCustomFieldMapping { Name = "IsAccepted", Mapping = "Accepted" }

Scheduler - Custom fields

Run Demo: Scheduler - Custom Fields and Appointment Form

Watch Video: Scheduler - Customization

Add a Custom Field to a Label

The code below adds a custom field to LabelObject and maps this field to the appointment label’s custom property:

@code {
    public class LabelObject {
        public int Id { get; set; }
        public string LabelName { get; set; }
        public System.Drawing.Color LabelColor { get; set; }
        public string MyCustomField { get; set; } // a custom field

    DxSchedulerDataStorage DataStorage = new DxSchedulerDataStorage() {
        AppointmentLabelsSource = new List<LabelObject>() {
            new LabelObject() { 
                Id = 1, 
                LabelName = "Label One", 
                LabelColor = System.Drawing.Color.Aqua, 
                MyCustomField = "custom text for Label One" 
            new LabelObject() { 
                Id = 2, 
                LabelName = "Label Two", 
                LabelColor = System.Drawing.Color.Beige, 
                MyCustomField = "custom text for Label Two"
        AppointmentLabelMappings = new DxSchedulerAppointmentLabelMappings() {
            Id = "Id",
            Caption = "LabelName",
            Color = "LabelColor",
            // Map the source object's custom field to the label's custom property
            CustomFieldMappings = new List<DxSchedulerCustomFieldMapping> {
                new DxSchedulerCustomFieldMapping { Name = "MyCustomProperty", Mapping = "MyCustomField" }

Refer to AppointmentLabelMappings for more information.

See Also