DxScheduler.ToolbarItems Property

Specifies the collection of toolbar items.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v25.1.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public RenderFragment<SchedulerToolbarInfo> ToolbarItems { get; set; }

Property Value

Type	Description
RenderFragment<SchedulerToolbarInfo>	The toolbar item collection.

Remarks

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

• DxSchedulerDateNavigatorToolbarItem
• DxSchedulerNextIntervalToolbarItem
• DxSchedulerPreviousIntervalToolbarItem
• DxSchedulerResourceNavigatorToolbarItem
• DxSchedulerTodayToolbarItem
• DxSchedulerViewNavigatorToolbarItem

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

The following code snippet populates the Scheduler toolbar with predefined items and implements custom interval buttons:

Run Demo: Toolbar Customization

<DxScheduler @bind-StartDate="@StartDate"
             DataStorage="@DataStorage"
             CssClass="demo-sc-size">
    <Views>
        <DxSchedulerTimelineView Duration="@CurrentDuration">
            <Scales>
                <DxSchedulerTimeScale Unit="@SchedulerTimeScaleUnit.Day" UnitCount="1"></DxSchedulerTimeScale>
                <DxSchedulerTimeScale Unit="@SchedulerTimeScaleUnit.Hour" UnitCount="6"></DxSchedulerTimeScale>
            </Scales>
        </DxSchedulerTimelineView>
    </Views>
    <ToolbarItems>
        <DxSchedulerPreviousIntervalToolbarItem />
        <DxSchedulerNextIntervalToolbarItem />
        <DxSchedulerTodayToolbarItem />
        <DxSchedulerDateNavigatorToolbarItem />
        <DxToolbarItem GroupName="ScaleDuration"
                       Text="1 day"
                       Click="@((i) => CurrentDuration = TimeSpan.FromHours(24))"
                       Checked="@(CurrentDuration == TimeSpan.FromHours(24))"
                       BeginGroup="true"
                       Alignment="ToolbarItemAlignment.Right"></DxToolbarItem>
        <DxToolbarItem GroupName="ScaleDuration"
                       Text="2 days"
                       Click="@((i) => CurrentDuration = TimeSpan.FromHours(48))"
                       Checked="@(CurrentDuration == TimeSpan.FromHours(48))"></DxToolbarItem>
        <DxToolbarItem GroupName="ScaleDuration"
                       Text="3 days"
                       Click="@((i) => CurrentDuration = TimeSpan.FromHours(72))"
                       Checked="@(CurrentDuration == TimeSpan.FromHours(72))"></DxToolbarItem>
    </ToolbarItems>
</DxScheduler>
@* ... *@
@code {
    DateTime StartDate { get; set; } = DateTime.Today;
    TimeSpan CurrentDuration = @TimeSpan.FromHours(48);

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