Skip to main content

DxSchedulerCustomFieldMapping Class

Specifies how a source object’s custom fields are mapped to custom properties of a scheduler item (appointment, label, or status).

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

public class DxSchedulerCustomFieldMapping :
    BindableBase

Remarks

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 following code snippet implements the following scenario:

<DxScheduler StartDate="@DateTime.Today"
             DataStorage="@DataStorage"
             ActiveViewType="SchedulerViewType.WorkWeek"
             AppointmentFormShowing="OnAppointmentFormShowing"
             ValidateEditForm="true"
             CssClass="mw-1100">
    <Views>
        <DxSchedulerWorkWeekView VisibleTime="@(new DxSchedulerTimeSpanRange(TimeSpan.FromHours(8), 
                                 TimeSpan.FromHours(19)))">
            <HorizontalAppointmentTemplate>
                <div class="demo-sc-apt @((bool)context.CustomFields["IsAccepted"] ? 
                            "demo-sc-accepted " : "")" style="width: 100%;">
                    <div class="card demo-apt-bg dxbl-purple-color" style="width: 100%;"></div>
                    <div class="card shadow-sm p-1 demo-sc-apt-content text-white" style="width:100%;">
                        @context.Appointment.Subject
                    </div>
                </div>
            </HorizontalAppointmentTemplate>
            <VerticalAppointmentTemplate>
                <div class="shadow-sm demo-sc-apt @((bool)context.CustomFields["IsAccepted"] ? 
                            "demo-sc-accepted" : "")">
                    <div class="card demo-apt-bg dxbl-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 dxbl-purple-color"></div>
                        </div>
                        <div class="demo-apt-subject">
                            @context.Appointment.Subject
                        </div>
                    </div>
                </div>
            </VerticalAppointmentTemplate>
        </DxSchedulerWorkWeekView>
    </Views>
</DxScheduler>

@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 following code snippet 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.

Inheritance

Object
DevExpress.Blazor.Scheduler.Internal.BindableBase
DxSchedulerCustomFieldMapping
See Also