Change background color of day in week and month view of scheduler from WebAPI list of holidays

[Tech (Dave)]

Hi,

I have a Scheduler that pulls data from a webapi that works fine.

I want to change the background color of holidays that are retrieved from another webapi endpoint (List<DateTime>). The days must NOT be disabled, they must still be able to schedule events on those days.

I have looked at this  💬1 - Blazor scheduler and disabling days for the public holidays | Blazor Forums | Syncfusion,

but it does not deal with modifying the CSS.

I assume I would need to work with custom templates for the schedule views, but I cannot see how to bind that to a webapi or how i could use that to modify the css.

Please would you supply a simple working example with the above requirements.

Thank you

[Satheesh Kumar Balasubramanian]

Hi Tech,

 

You can use OnRenderCell event to achieve your requirement.

 

Index.razor:

@using Syncfusion.Blazor.Schedule

@using BlazorApplication.Data

@inject WeatherForecastService ForecastService

 

@if (dateCollection == null)

{

    <p><em>Loading...</em></p>

}

else

{

    <SfSchedule @ref="ScheduleObj" TValue="AppointmentData" Height="650px" @bind-SelectedDate="@CurrentDate" @bind-CurrentView="@CurrentView">

        <ScheduleViews>

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

        </ScheduleViews>

        <ScheduleEvents TValue="AppointmentData" OnRenderCell="@OnRenderCell"></ScheduleEvents>

    </SfSchedule>

}

 

@code {

    public DateTime CurrentDate = new DateTime(2022, 1, 10);

    public View CurrentView { get; set; } = View.Week;

    public SfSchedule<AppointmentData> ScheduleObj;

    public string[] CellCustomClass = { "cell-custom-class" };

    public DateTime[]? dateCollection;

 

    protected override async Task OnInitializedAsync()

    {

        dateCollection = await ForecastService.GetDateCollectionAsync();

    }

    public void OnRenderCell(RenderCellEventArgs args)

    {

        var item = args.Date;

        bool exist = dateCollection.Any(d => d.Month == item.Month && d.Day == item.Day);

        if (exist)

        {

            args.CssClasses = new List<string>(CellCustomClass);

        }

    }

<style>

    .e-schedule .e-vertical-view .e-work-cells.cell-custom-class {

        background: red !important;

    }

</style>

 

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

 

Regards,

Satheesh Kumar B

Attachment: BlazorApplication_1254fd3a.zip

[Dave Arnoldi]

Thank you this works for day and week view.

What CSS classes would I use for month view?

Dave

[Vengatesh Maniraj]

Hi Dave,

Thanks for the update.

Please find the CSS class for month view below.

<style>

    .e-schedule .e-month-view .e-work-cells.cell-custom-class,

    .e-schedule .e-month-view .e-work-days.cell-custom-class  {

        background: red;

    }

</style>

[Tech (Dave)]

Thank you, this works perfectly.

Dave

[Vengatesh Maniraj]

You are most welcome!!!