Calendar

[Belle Cruz]

I want to center the calendar or date picker "December 12-18,2021".

[Satheesh Kumar Balasubramanian]

Hi Belle, 

  

Greetings from Syncfusion Support. 

  

We regret to let you know that currently we do not have property to customize the calendar in scheduler. But, we can achieve this requirement using our SfToolbar customization. 

  

Sample: https://www.syncfusion.com/downloads/support/forum/171216/ze/ScheduleComponent1376303686 

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

  

Index.razor: 

<div class="col-lg-9 control-section"> 

    <div class="content-wrapper"> 

        @if (ShowHeader) 

        { 

            <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.Center" SuffixIcon="e-icons e-chevron-down" Text="@dateRangeText" OnClick="@DateRangeClick"></ToolbarItem> 

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

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

                </ToolbarItems> 

            </SfToolbar> 

        } 

        <SfSchedule @ref="ScheduleRef" TValue="ScheduleData.AppointmentData" Height="650px" ShowHeaderBar="false" @bind-SelectedDate="@CurrentDate"> 

            <ChildContent> 

                @if (ShowHeader) 

                { 

                    <div class="e-header-popup"> 

                        @if (ShowCalendar) 

                        { 

                            <SfCalendar TValue="DateTime" @bind-Value="@CurrentDate"></SfCalendar> 

                        } 

                    </div> 

                    <div class="profile-wrapper" style="display: @ImageContent"> 

                        <div class="profile-container"> 

                            <span class="profile-image"></span> 

                            <div class="content-wrap"> 

                                <div class="name">Nancy</div> 

                                <div class="destination">Product Manager</div> 

                                <div class="status"><span class="status-icon"></span>Online</div> 

                            </div> 

                        </div> 

                    </div> 

                } 

                <ScheduleViews> 

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

                </ScheduleViews> 

                <ScheduleEvents TValue="ScheduleData.AppointmentData" EventRendered="@EventRendered"></ScheduleEvents> 

                <ScheduleEventSettings DataSource="@DataSource"></ScheduleEventSettings> 

            </ChildContent> 

        </SfSchedule> 

    </div> 

</div> 

  

@code{  

    private string dateRangeText { get; set; }
    SfSchedule<ScheduleData.AppointmentData> ScheduleRef; 

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

    { 

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

        { 

            CurrentDate = CurrentDate.AddDays(-7); 

            CurrentViewDates = ScheduleRef.GetCurrentViewDates(); 

            dateRangeText = CurrentViewDates.First().AddDays(-7).ToString("MMMM dd", CultureInfo.InvariantCulture) + " - " + CurrentViewDates.Last().AddDays(-7).ToString("dd, yyyy", CultureInfo.InvariantCulture); 

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

        } 

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

        { 

            CurrentDate = CurrentDate.AddDays(7); 

            CurrentViewDates = ScheduleRef.GetCurrentViewDates(); 

            dateRangeText = CurrentViewDates.First().AddDays(7).ToString("MMMM dd", CultureInfo.InvariantCulture) + " - " + CurrentViewDates.Last().AddDays(7).ToString("dd, yyyy", CultureInfo.InvariantCulture); 

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

        } 

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

        { 

            CurrentDate = DateTime.Now.Date; 

        } 

    } 

    protected override async Task OnAfterRenderAsync(bool firstRender) 

    { 

        if (firstRender) 

        { 

            CurrentViewDates = ScheduleRef.GetCurrentViewDates(); 

            dateRangeText = CurrentViewDates.First().ToString("MMMM dd", CultureInfo.InvariantCulture) + " - " + CurrentViewDates.Last().ToString("dd, yyyy", CultureInfo.InvariantCulture); 

            StateHasChanged(); 

        } 

        await base.OnAfterRenderAsync(firstRender); 

    } 

} 

  

Kindly try the above sample and let us know if this meets your requirement. 

  

Regards, 

Satheesh Kumar B