Blazor: Scheduler-Customization

Appointment Templates

The DevExpress Scheduler allows you to use templates to customize the appearance of individual appointments:

HorizontalAppointmentTemplate - applied to all-day appointments that span an entire day or multiple days (displayed horizontally in the all-day panel).
VerticalAppointmentTemplate - applied to other appointments (displayed vertically).

These properties obtain a DxSchedulerAppointmentView object that contains information about appointment settings. To access this object, use the template's context parameter.

To define appointment appearance, use HTML markup within the HorizontalAppointmentTemplate and VerticalAppointmentTemplate tags.

	Sunday, November 22	Monday, November 23	Tuesday, November 24	Wednesday, November 25	Thursday, November 26	Friday, November 27	Saturday, November 28

9	00
9
10	00
10
11	00
11
12	PM
12
1	00
1
2	00
2
3	00
3
4	00
4
5	00
5

Razor Appointment AppointmentCollection

<DxScheduler StartDate="@DateTime.Today" DataStorage="@DataStorage" CssClass="mw-1100">
    <DxSchedulerWeekView ShowWorkTimeOnly="true">
        <HorizontalAppointmentTemplate>
            <div class="card shadow-sm p-1 bg-white text-dark" style="width:100%; font-size: .925em; font-weight:600;">
                @context.Appointment.Subject
            </div>
        </HorizontalAppointmentTemplate>
        <VerticalAppointmentTemplate>
            <div class="card shadow-sm bg-white p-2" style="overflow: hidden; height: 100%;box-shadow: .125rem .25rem rgba(34,34,34,0.15)">
                <div><span class="badge badge-info mb-1 @context.Status.CssClass">@context.Status.Caption</span></div>
                <span class="text-dark pl-0 mb-1" style="font-weight:600; font-size: .925em;">@context.Appointment.Subject</span>
                <div style="height: 100%; display: flex; flex-direction: column; justify-content: flex-end;">
                    <div><span class="badge badge-light"><span class="oi oi-clock pr-1"></span>@context.Appointment.End.ToString("MMM dd HH:mm")</span></div>
                </div>
            </div>
        </VerticalAppointmentTemplate>
    </DxSchedulerWeekView>
</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",
            LabelId = "Label",
            StatusId = "Status",
            RecurrenceInfo = "Recurrence"
        }
    };
}

Custom Fields and Appointment Form

The DevExpress Blazor Scheduler allows you to add custom properties to appointments, labels, and status items. To create these custom elements, define custom fields in source objects and add them to the CustomFieldMappings collection. In this demo, an appointment’s source object includes an Accepted custom field that is mapped to the IsAccepted appointment property. The property value is used in the HorizontalAppointmentTemplate and VerticalAppointmentTemplate to change appointment appearance.

The Scheduler also allows you to customize the appointment edit form as needed. Use the following properties to construct your custom form layout:

AppointmentFormLayout - 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.
AppointmentCompactFormLayout - the layout of the compact form that appears when you create an appointment.

The Scheduler ships with a set of predefined form layout items (DxSchedulerSubjectFormLayoutItem, DxSchedulerStartDateFormLayoutItem, DxSchedulerStartTimeFormLayoutItem, etc). You can also add a custom item (DxSchedulerCustomFormLayoutItem) and define its Template property. In this demo, custom layout items are used to display the IsAccepted property’s editor and its validation summary.

To pass information about custom properties to the edit form, implement a custom descendant from the SchedulerAppointmentFormInfo class and assign it in the AppointmentFormShowing event handler.

To enable form validation, mark appointment properties in your custom class with annotation attributes and set the Scheduler’s ValidateEditForm property to true.

	Monday, November 23	Tuesday, November 24	Wednesday, November 25	Thursday, November 26	Friday, November 27

8	00
8
9	00
9
10	00
10
11	00
11
12	PM
12
1	00
1
2	00
2
3	00
3
4	00
4
5	00
5
6	00
6

Razor Appointment AppointmentCollection


<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>
    <AppointmentFormLayout Context="formInfo">
        <DxSchedulerSubjectFormLayoutItem></DxSchedulerSubjectFormLayoutItem>
        <DxSchedulerAllDayFormLayoutItem></DxSchedulerAllDayFormLayoutItem>
        <DxSchedulerStartDateFormLayoutItem></DxSchedulerStartDateFormLayoutItem>
        <DxSchedulerStartTimeFormLayoutItem></DxSchedulerStartTimeFormLayoutItem>
        <DxSchedulerEndDateFormLayoutItem></DxSchedulerEndDateFormLayoutItem>
        <DxSchedulerEndTimeFormLayoutItem></DxSchedulerEndTimeFormLayoutItem>
        <DxSchedulerLocationFormLayoutItem></DxSchedulerLocationFormLayoutItem>
        <DxSchedulerDescriptionFormLayoutItem></DxSchedulerDescriptionFormLayoutItem>
        <DxSchedulerCustomFormLayoutItem ColSpanMd="12">
            <Template>
                <div style="margin-left: auto; margin-top: 14px;">
                    <DxCheckBox @bind-Checked="@(((CustomAppointmentFormInfo)formInfo).IsAccepted)"
                        Alignment="CheckBoxContentAlignment.Right">Accept</DxCheckBox>
                </div>
            </Template>
        </DxSchedulerCustomFormLayoutItem>
        <DxSchedulerCustomFormLayoutItem ColSpanMd="12">
            <Template>
                <ValidationSummary />
            </Template>
        </DxSchedulerCustomFormLayoutItem>
    </AppointmentFormLayout>
    <AppointmentCompactFormLayout Context="formInfo">
        <DxSchedulerSubjectFormLayoutItem></DxSchedulerSubjectFormLayoutItem>
        <DxSchedulerAllDayFormLayoutItem></DxSchedulerAllDayFormLayoutItem>
        <DxSchedulerStartDateFormLayoutItem></DxSchedulerStartDateFormLayoutItem>
        <DxSchedulerStartTimeFormLayoutItem></DxSchedulerStartTimeFormLayoutItem>
        <DxSchedulerEndDateFormLayoutItem></DxSchedulerEndDateFormLayoutItem>
        <DxSchedulerEndTimeFormLayoutItem></DxSchedulerEndTimeFormLayoutItem>
        <DxSchedulerCustomFormLayoutItem ColSpanMd="12">
            <Template>
                <div style="margin-left: auto; margin-top: 14px;">
                    <DxCheckBox @bind-Checked="@(((CustomAppointmentFormInfo)formInfo).IsAccepted)"
                        Alignment="CheckBoxContentAlignment.Right">Accept</DxCheckBox>
                </div>
            </Template>
        </DxSchedulerCustomFormLayoutItem>
        <DxSchedulerCustomFormLayoutItem ColSpanMd="12">
            <Template>
                <ValidationSummary />
            </Template>
        </DxSchedulerCustomFormLayoutItem>
    </AppointmentCompactFormLayout>
</DxScheduler>

@code {
    public class CustomAppointmentFormInfo : SchedulerAppointmentFormInfo {
        public CustomAppointmentFormInfo(DxSchedulerAppointmentItem AppointmentItem, DxSchedulerDataStorage DataStorage)
            : base(AppointmentItem, DataStorage) { }

        [Required]
        public override string Subject {
            get { return base.Subject; }
            set { base.Subject = value; }
        }

        public bool IsAccepted {
            get { return (bool)CustomFields["IsAccepted"]; }
            set { CustomFields["IsAccepted"] = value; }
        }
    }

    void OnAppointmentFormShowing(SchedulerAppointmentFormEventArgs args) {
        args.FormInfo = new CustomAppointmentFormInfo(args.Appointment, DataStorage);
    }

    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" }
            }
        }
    };
}

Customization

Appointment Templates Custom Fields and Appointment FormNew