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.v22.1.dll

NuGet Package: DevExpress.Blazor

Declaration

public class DxSchedulerCustomFieldMapping :
    BindableBase

Remarks

Scheduler items (DxSchedulerAppointmentItem, DxSchedulerAppointmentLabelItem, DxSchedulerAppointmentStatusItem) contain predefined sets of properties. When you bind a Scheduler to data, you map these properties to data source fields (see the AppointmentMappings, AppointmentLabelMappings, and AppointmentStatusMappings 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 to change appointment appearance. To obtain property values, use the CustomFields property. For example, the code below demonstrates how to:

• Add the Accepted custom field to an appointment’s source object.
• Map the field to the IsAccepted appointment property.
• Use the property value in the VerticalAppointmentTemplate and HorizontalAppointmentTemplate (@context.CustomFields[...])).

Index.razor

<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 dx-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 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>
                        <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" }
            }
        }
    };

Appointment

public static partial class Appointment {
    public class Appointment {
        public Appointment() { }
        public int AppointmentType { get; set; }
        public DateTime StartDate { get; set; }
        public DateTime EndDate { get; set; }
        //...
        // Custom field
        public bool Accepted { get; set; }
    }
}

AppointmentCollection

public static partial class AppointmentCollection {
    public static List<Appointment> GetAppointments() {
        DateTime date = DateTimeUtils.CreateWeekStart();
        var dataSource = new List<Appointment>() {
                new Appointment {
                    Caption = "Install New Router in Dev Room",
                    StartDate = date + (new TimeSpan(0, 10, 0, 0)),
                    EndDate = date + (new TimeSpan(0, 12, 30, 0)),
                    Label = 6,
                    Status = 4
                },
                new Appointment {
                    Caption = "Upgrade Personal Computers",
                    StartDate = date + (new TimeSpan(0, 13, 0, 0)),
                    EndDate = date + (new TimeSpan(0, 15, 30, 0)),
                    Label = 1,
                    Status = 4
                },
                new Appointment {
                    Caption = "Website Redesign Plan",
                    StartDate = date + (new TimeSpan(1, 9, 30, 0)),
                    EndDate = date + (new TimeSpan(1, 12, 0, 0)),
                    Label = 1,
                    Status = 1,
                    Accepted = true
                },
                new Appointment {
                    Caption = "New Brochures",
                    StartDate = date + (new TimeSpan(1, 13, 30, 0)),
                    EndDate = date + (new TimeSpan(1, 15, 15, 0)),
                    Label = 8,
                    Status = 2,
                    Accepted = true
                },
                // ...
            };
        return dataSource;
    }
    public static class DateTimeUtils {
        public static DateTime GetWeekStart(DateTime date) {
            return date.DayOfWeek == DayOfWeek.Sunday ? ValidWeekStart(date.Date) : ValidWeekStart(date.Date - CreateWeekOffset(date, DayOfWeek.Sunday));
        }
        public static DateTime GetBeginOfMonth(DateTime date) {
            return new DateTime(date.Year, date.Month, 1);
        }
        static DateTime ValidWeekStart(DateTime date) {
            TimeSpan weekSpan = new TimeSpan(7, 0, 0, 0);
            DateTime baseDate = date.Date;
            if(DateTime.MaxValue - date < weekSpan)
                return baseDate - weekSpan;
            return baseDate;
        }
        static TimeSpan CreateWeekOffset(DateTime date, DayOfWeek firstDayOfWeek) {
            int offset = (date.DayOfWeek + 7 - firstDayOfWeek) % 7;
            TimeSpan result = TimeSpan.FromDays(offset);
            if(date.Ticks < result.Ticks)
                result = TimeSpan.FromDays(offset - 7);
            return result;
        }
    }
}

Run Demo: Scheduler - Custom Fields and Appointment Form

Watch Video: Scheduler - Customization

The code below demonstrates how to add a custom field to LabelObject and map 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" }
            }
        }
    };
}

Implements

INotifyPropertyChanged

Inheritance

Object

DevExpress.Blazor.Scheduler.Internal.BindableBase

DxSchedulerCustomFieldMapping