Skip to main content
All docs
V25.1
  • DevExpress v25.1 Update — Your Feedback Matters

    Our What's New in v25.1 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

    Take the survey Not interested

    Custom Appointment Fields in Blazor Scheduler

    • 4 minutes to read
    Accept "Target Cookies" to watch embedded YouTube videos Open cookie settings
    Or
    Watch this video on Youtube Watch on youtube

    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. These objects must have both getter and setter, and must not implement the readonly modifier.
    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

    #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:

    C#
    @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.