Custom Header in Blazor Scheduler Component

29 Nov 20245 minutes to read

The Scheduler header bar can be hidden by setting false to ShowHeaderBar and use Syncfusion^® Toolbar control to customize our own header. In the following code example, the Scheduler views can be changed by using the Dropdowns available in the custom Header.

@using Syncfusion.Blazor.Schedule
@using Syncfusion.Blazor.Navigations
@using Syncfusion.Blazor.DropDowns

<SfToolbar>
    <ToolbarItems>
        <ToolbarItem Align="ItemAlign.Left" PrefixIcon="previous" OnClick="@Clicked" TooltipText="Previous"></ToolbarItem>
        <ToolbarItem Align="ItemAlign.Left" PrefixIcon="next" OnClick="@Clicked" TooltipText="Next"></ToolbarItem>
        <ToolbarItem Type="ItemType.Separator"></ToolbarItem>
        <ToolbarItem Type="ItemType.Input" Align="ItemAlign.Right">
            <Template>
                <SfDropDownList TItem="Views" TValue="string" ID="Views" DataSource="@ViewsList" Width="120" @bind-Index="@index">
                    <DropDownListEvents TItem="Views" TValue="string" ValueChange="OnValueChange"></DropDownListEvents>
                    <DropDownListFieldSettings Value="Text"></DropDownListFieldSettings>
                </SfDropDownList>
            </Template>
        </ToolbarItem>
    </ToolbarItems>
</SfToolbar>

<SfSchedule @bind-SelectedDate="@DateValue" TValue="AppointmentData" @bind-CurrentView="@MyView" Height="650px" ShowHeaderBar="false">
    <ScheduleEventSettings DataSource="@DataSource"></ScheduleEventSettings>
    <ScheduleViews>
        <ScheduleView Option="View.Day"></ScheduleView>
        <ScheduleView Option="View.Week"></ScheduleView>
        <ScheduleView Option="View.WorkWeek"></ScheduleView>
        <ScheduleView Option="View.Month"></ScheduleView>
        <ScheduleView Option="View.Agenda"></ScheduleView>
    </ScheduleViews>
</SfSchedule>

<style>
    .previous:before {
        content: '\e937';
    }

    .next:before {
        content: '\e956'
    }
</style>

@code{
    public DateTime DateValue { get; set; } = new DateTime(2020, 2, 11);
    public View MyView = View.Week;
    private int? index = 1;
    public void Clicked(ClickEventArgs args)
    {
        int addDay = 7;
        if (MyView == View.Day) addDay = 1;
        if (MyView == View.Week) addDay = 7;
        if (MyView == View.WorkWeek) addDay = 5;
        if (MyView == View.Month) addDay = 30;
        if (args.Item.PrefixIcon == "previous")
        {
            DateValue = DateValue.AddDays(-addDay);
        }
        if (args.Item.PrefixIcon == "next")
        {
            DateValue = DateValue.AddDays(addDay);
        }
    }
    public void OnValueChange(ChangeEventArgs<string, Views> args)
    {
        this.MyView = (View)Enum.Parse(typeof(View), args.Value);
    }
    public class Views
    {
        public string ID { get; set; }
        public string Text { get; set; }
    }
    List<Views> ViewsList = new List<Views> {
        new Views() { ID= "1", Text= "Day" },
        new Views() { ID= "2", Text= "Week" },
        new Views() { ID= "3", Text= "WorkWeek" },
        new Views() { ID= "4", Text= "Month" }
    };
    List<AppointmentData> DataSource = new List<AppointmentData>
    {
        new AppointmentData { Id = 1, Subject = "Paris", StartTime = new DateTime(2020, 2, 11, 10, 0, 0) , EndTime = new DateTime(2020, 2, 11, 12, 0, 0) },
        new AppointmentData { Id = 2, Subject = "Germany", StartTime = new DateTime(2020, 2, 13, 10, 0, 0) , EndTime = new DateTime(2020, 2, 13, 12, 0, 0) }
    };
    public class AppointmentData
    {
        public int Id { get; set; }
        public string Subject { get; set; }
        public string Location { get; set; }
        public DateTime StartTime { get; set; }
        public DateTime EndTime { get; set; }
        public string Description { get; set; }
        public bool IsAllDay { get; set; }
        public string RecurrenceRule { get; set; }
        public string RecurrenceException { get; set; }
        public Nullable<int> RecurrenceID { get; set; }
    }
}