Adding Caption to Header Section of Scheduler

I would like to turn this 




into this



which means adding a caption in the center of the existing header.


I would also like to add an expand/collapse button since there will be 3 different schedulers and sometimes users might want to maximize one by c




1 Reply

RV Ravikumar Venkatesan Syncfusion Team July 19, 2022 04:32 PM UTC

Hi Frederic,


Greetings from Syncfusion support.


Q1: Adding Caption to Header Section of Scheduler

We have validated your requirement at our end and we regret to let you know that your requirement is not feasible with the current Schedule architecture. You can achieve your requirement by hiding the default Schedule toolbar using the ShowHeaderBar property value with false and rendering a custom toolbar as demonstrated in the below demo link. We have prepared a sample for your reference.


Demo(Custom header bar): https://blazor.syncfusion.com/demos/scheduler/header-bar?theme=bootstrap4


[Index.cshtml]

@using System.Globalization

@using Syncfusion.Blazor.Schedule

@using Syncfusion.Blazor.Navigations

 

<SfToolbar>

    <ToolbarItems>

        <ToolbarItem Align="ItemAlign.Left" PrefixIcon="e-icons e-chevron-left" TooltipText="Previous" Id="Previous" OnClick="@Clicked"></ToolbarItem>

        <ToolbarItem Align="ItemAlign.Left" PrefixIcon="e-icons e-chevron-right" TooltipText="Next" Id="Next" OnClick="@Clicked"></ToolbarItem>

        <ToolbarItem Align="ItemAlign.Left" SuffixIcon="e-icons e-chevron-down" Text="@(CurrentDate.ToString("dd MMMM yyyy", CultureInfo.CurrentCulture))"></ToolbarItem>

        <ToolbarItem Type="ItemType.Separator"></ToolbarItem>

 

        <ToolbarItem Align="ItemAlign.Center" Id="EQUIPMENTS" Text="EQUIPMENTS"></ToolbarItem>

 

        <ToolbarItem Type="ItemType.Separator"></ToolbarItem>

        <ToolbarItem Align="ItemAlign.Right" Type="ItemType.Button" Id="Today" Text="Today" OnClick="@Clicked"></ToolbarItem>

    </ToolbarItems>

</SfToolbar>

 

<SfSchedule TValue="AppointmentData" Height="550px" @bind-SelectedDate="@CurrentDate" CurrentView="View.TimelineDay" ShowHeaderBar="false">

        <ScheduleViews>

            <ScheduleView Option="View.TimelineDay"></ScheduleView>

        </ScheduleViews>

</SfSchedule>


Q2: I would also like to add an expand/collapse button since there will be 3 different schedulers and sometimes users might want to maximize

We are unable to understand your above query at our end. Can you kindly share more details about your requirement with like an image or a video demo it will help us to provide a solution for your requirement earlier?


Kindly try the shared sample and let us know if you need any further assistance.


Regards,

Ravikumar Venkatesan


Attachment: syncfusionblazorschedulecustomtoolbarsample_c3e6807a.zip

Loader.
Up arrow icon