Skip to main content
All docs
V25.1
  • Templates in Blazor Scheduler

    • 4 minutes to read

    The DevExpress Blazor Scheduler implements a number of templates that allow you to customize the content and appearance of different Scheduler elements. Templates implement a context parameter that contains element-related data.

    Appointments

    Use the following templates to customize appointment appearance:

    Appointment Templates

    To define appointment content and appearance, use HTML markup within <HorizontalAppointmentTemplate> and <VerticalAppointmentTemplate> tags.

    When you build a template, you can use the template’s context parameter to access appointment data. This parameter returns a DxSchedulerAppointmentView object.

    <DxScheduler StartDate="@DateTime.Today" DataStorage="@DataStorage">
        <DxSchedulerDayView ShowWorkTimeOnly="true" DayCount="3">
            <HorizontalAppointmentTemplate>
                <div class="card p-1 @context.Label.BackgroundCssClass">@context.Appointment.Subject</div>
            </HorizontalAppointmentTemplate>
            <VerticalAppointmentTemplate>
                <div class="card @context.Label.BackgroundCssClass" style="height: 100%; padding: 0.2em 0.5em; opacity: 0.9;">
                    @context.Appointment.Subject
                </div>
            </VerticalAppointmentTemplate>
        </DxSchedulerDayView>
    </DxScheduler>
    

    Run Demo: Scheduler - Appointment Templates

    Appointment Tooltips

    Use AppointmentTooltipTemplate and AppointmentTooltipHeaderTemplate properties to customize the tooltip’s body and header. Refer to the following topic for more information: Custom Appointment Tooltip.

    Appointment Forms

    Use the following properties to create a custom appointment edit form:

    Refer to the following topic for more information: Custom Appointment Form.

    Time Cells, Date Headers, Resource Headers

    You can customize the content and appearance of time cells, date headers, and resource headers.

    View

    Cell type

    API members

    Day
    Work Week
    Week

    Time cell
    Resource header
    Date header
    All-day cell

    TimeCellTemplate
    ResourceHeaderCellTemplate
    DateHeaderCellTemplate
    AllDayTimeCellTemplate

    Month

    Time cell
    Horizontal resource header
    Vertical resource header
    Date header
    Day of the week header

    TimeCellTemplate
    HorizontalResourceHeaderCellTemplate
    VerticalResourceHeaderCellTemplate
    DateHeaderCellTemplate
    DayOfWeekHeaderCellTemplate

    Timeline

    Time cell
    Resource header
    Date header

    TimeCellTemplate
    ResourceHeaderCellTemplate
    DateHeaderCellTemplate

    You can also handle the HtmlCellDecoration event to customize the appearance of different Scheduler cells.

    The following example displays placeholder text for time cells that do not contain appointments:

    @using Data
    
    <DxScheduler StartDate="@DateTime.Today"
                 DataStorage="@DataStorage">
        <DxSchedulerDayView ShowWorkTimeOnly="true">
            <TimeCellTemplate>
                @{
                    var appointments = DataStorage.GetAppointments(context.Interval).ToList();
                    if (appointments.Count == 0) {
                        <div style="height: 100%; display: flex; justify-content:center">
                            Nothing planned</div>
                    }
                }
            </TimeCellTemplate>
        </DxSchedulerDayView>
    </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"
            }
        };
    }
    

    Scheduler Time Cell Template in Day View

    Run Demo: Scheduler - Date Header

    Run Demo: Scheduler - Time Cell

    Run Demo: Scheduler - Resource Header

    Toolbar

    A Scheduler toolbar can contain the following built-in items:

    Use the ToolbarItems tag to modify the collection of displayed toolbar items. Declare DxToolbarItem objects to add custom items to this collection.

    Refer to the following topic for more information: ToolbarItems.

    Run Demo: Toolbar Customization