Hide the calendar

[Belle Cruz]

How to hide the calendar in the scheduler header

[Belle Cruz]

Is there any update my query?

[Vengatesh Maniraj]

Hi Bells,

Greetings from Syncfusion Support.

You can hide the calendar from the scheduler by disabling the ShowHeaderBar property. Please refer to the below UG documentation for more references. 

API: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_ShowHeaderBar 

UG: https://blazor.syncfusion.com/documentation/scheduler/header-bar#show-or-hide-header-bar

Sample: https://blazor.syncfusion.com/documentation/scheduler/header-bar#show-or-hide-header-bar 

Regards,

Vengatesh 

[Belle Cruz]

Thank you Vengatesh

But only the right and left icon will be displayed in the header. Only the calendar will be disable.

[Vengatesh Maniraj]

Hi Belle,

Thanks for the update.

You can customize the scheduler header based on your requirement by making use of the SFToolbar component. We have showcased how to customize the header in our live sample. So we suggest you check the source tab in the below sample to achieve your requirement.

https://blazor.syncfusion.com/demos/scheduler/header-bar?theme=bootstrap5

Regards,

Vengatesh

[Belle Cruz]

Thank you but I mean is only the Two icons will be left. And the calendar will be disable. I already use the sftoolbar but it didn't

[Belle Cruz]

Only this two icons will be left in the scheduler header. and the calendar will be disa

[Vengatesh Maniraj]

Hi Belle,

Thanks for the update.

Please check the attached runnable code file to achieve your requirement.

Regards,

Vengatesh

Attachment: Index_819e5d29.zip

[Belle Cruz]

I tried the link that you give but it really didn't work.

[Vengatesh Maniraj]

Hi Belle,

Is it possible to share the tried code snippet? 

We will check based on it at our end and provide the solution.

Regards,

Vengatesh 

[Belle Cruz]

Thank you Vengatesh,

I am happy to say that I already solve the query.

[Belle Cruz]

But I have one more problem. How to change or customize the color of the two icons on the toolbar? the 

PrefixIcon="e-icons e-chevron-left" and 

[Vengatesh Maniraj]

Hi Belle,

Thanks for the update.

We are happy that you have resolved this.

Regards,

Vengatesh

[Vengatesh Maniraj]

Hi Belle,

You can customize the toolbar icons color by overriding the CSS class like below.

<style>

    .e-toolbar .e-tbar-btn.e-btn .e-icons.e-chevron-left{

        color: red;

    }

    .e-toolbar .e-tbar-btn.e-btn .e-icons.e-chevron-right{

         color: red;

    }

</style>

[Belle Cruz]

One more question how to display 6 days only in a week? No sunday cells.

[Belle Cruz]

<style>

    .e-toolbar .e-tbar-btn.e-btn .e-icons.e-chevron-left{

        color: red;

    }

    .e-toolbar .e-tbar-btn.e-btn .e-icons.e-chevron-right{

         color: red;

    }

</style>

 

It didn't work on icons. 

[Belle Cruz]

@code {

public class AppointmentData

{

public DateTime StartTime { get; set; }

public DateTime EndTime { get; set; }

}

public DateTime CurrentDate { get; set; } = new DateTime(DateTime.Today.Year, 12, 22);

SfSchedule ScheduleRef;

List CurrentViewDates;

List CurrentViewMonths;

public DateTime Yearc { get; set; } = DateTime.Now;

DateTime p3 = new DateTime(2018,12,23);

DateTime p2 = new DateTime(2019,12,23);

DateTime p1 = new DateTime(2020,12,23);

public SfGrid GridHeader;

public void OnPopupOpen(PopupOpenEventArgs args)

{

if (args.Type == PopupType.Editor || args.Type == PopupType.QuickInfo)

{

args.Cancel = true;

}

}

public void Clicked(Syncfusion.Blazor.Navigations.ClickEventArgs args)

{

if (args.Item.Id == "Previous")

{

CurrentDate = CurrentDate.AddDays(-7);

CurrentViewDates = ScheduleRef.GetCurrentViewDates();

InvokeAsync(() => { StateHasChanged(); });

}

if (args.Item.Id == "Next")

{

CurrentDate = CurrentDate.AddDays(7);

CurrentViewDates = ScheduleRef.GetCurrentViewDates();

InvokeAsync(() => { StateHasChanged(); });

}

}

public void ClickedYear(Syncfusion.Blazor.Navigations.ClickEventArgs args)

{

if (args.Item.Id == "p3")

{

CurrentDate = CurrentDate.AddYears(-3);

InvokeAsync(() => { StateHasChanged(); });

}

if (args.Item.Id == "p2")

{

CurrentDate = CurrentDate.AddYears(-2);

InvokeAsync(() => { StateHasChanged(); });

}

if (args.Item.Id == "p1")

{

CurrentDate = CurrentDate.AddYears(-1);

InvokeAsync(() => { StateHasChanged(); });

}

if (args.Item.Id == "Yearc")

{

CurrentDate = CurrentDate.AddYears(1);

InvokeAsync(() => { StateHasChanged(); });

}

}

}

[Vengatesh Maniraj]

Hi Belle,

The customized color for the toolbar icons has been working as expected. for more reference, please refer to the below-attached sample.

Sample: https://www.syncfusion.com/downloads/support/forum/171363/ze/SchedulerWithToolbar-144853766

Also, you can display 6 days in a week by making use of the WorkDays property and WorkWeek view of the scheduler. 

 <SfSchedule TValue="AppointmentData" @ref="ScheduleObj" Height="650px" ShowHeaderBar="false" WorkDays="@WorkingDays" @bind-SelectedDate="@CurrentDate">

            <ScheduleEvents TValue="AppointmentData" Created="OnCreate"></ScheduleEvents>

            <ScheduleViews>

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

            </ScheduleViews>

        </SfSchedule>

@code {

 public int[] WorkingDays = new int[] { 1,2, 3,4, 5,6 };

}

These changes are also available in the above sample. Kindly check the sample and get back to us if you need any further assistance.

Note: Kindly create a new forum for the new query for the better tracking

Regards,

Vengatesh