OnRenderDayCell event not working for Month view

[Roman]

I'm trying to use Calendar control with custom dates. I have added a code into OnRenderDayCell event:

<SfCalendar TValue="DateTime" @bind-Value="@Model.SelectedDate" Start="CalendarView.Year" Depth="@(CalendarView.Year)" >

    <CalendarEvents TValue="DateTime" OnRenderDayCell="CustomDates"></CalendarEvents>

</SfCalendar>

public void CustomDates(RenderDayCellEventArgs args)

{

    var date =args.Date.ToLocalDate();

    if (Agreement?.IsInAgreement(date)==true)

    {

        args.CellData.ClassList += " agreement";

    }

}

The problem is that the agreement style is missing in the output html (even though OnRenderDayCell event is invoked correctly).

However, if I changed calendar mode to show Days:

Depth="CalendarView.Month"

then agreement style is applied correctly and I see a different background color in the cell.

I think, OnRenderDayCell event should works correctly with all calendar views (year, month and days).

[Kokila Poovendran]

Hi Roman,

We appreciate your feedback and apologize for any inconvenience caused while using the SfCalendar control with the "OnRenderDayCell" event.

After carefully reviewing your scenario, we would like to inform you that the "OnRenderDayCell" event is designed to work with the day view alone and is not supported for the month view. This behavior aligns with the intended design of the component.

If you have any further questions or need assistance with any other aspects of the SfCalendar control, please don't hesitate to reach out. We're here to help and provide support for your development needs.

[Roman]

Thanks for the info. In this case maybe it would be good idea to introduce a new event like  OnRenderMonthCell or  OnRenderYearCell.​ From my point of view it make sens to add a custom look also for entire month/year. 

Real example:

My app shows on the calendar view days belong to the specific Agreement. But if agreement last for 2 years, user probably would change the calendar view to see months. And in this view, he also would like to see months belong to this agreement - in other words, I don't see any difference between showing days and moths - in both cases we could have a need to show additional info.

[Kokila Poovendran]

Hi Roman,

Thank you for sharing your suggestion. Based on your feedback, we've prepared a sample code snippet to demonstrate how you can achieve this using Syncfusion Blazor Calendars:

@using Syncfusion.Blazor.Calendars

@inject IJSRuntime JSRuntime

 

<div class="control-section">

    <div class="control-wrapper">

        <SfCalendar ID="month-view" TValue="DateTime?" @bind-Value="@SelectedDate" Start="@CalendarView.Year" Depth="@CalendarView.Year">

            <CalendarEvents TValue="DateTime?" Created="OnCreated" ValueChange="OnChange"></CalendarEvents>

        </SfCalendar>

    </div>

    <div class="display-date">

        <span class="example-label">Selected date is: <b>@SelectedValue</b></span>

    </div>

</div>

@code {

 

 

    public DateTime? SelectedDate { get; set; } = DateTime.Now;

 

    public string SelectedValue { get; set; } = DateTime.Now.ToString("MMMM yyyy");

 

 

    public async Task OnCreated()

    {

        await JSRuntime.InvokeAsync<object>("RenderMonthView", "month-view");

    }

 

    public void OnChange(ChangedEventArgs<DateTime?> args)

    {

        var Count = 0;

        if (args.Value.Value.Month == 1 || args.Value.Value.Month == 8)

        {

            this.SelectedValue = this.SelectedDate?.ToString("MMMM yyyy") + " (Personal appointment)";

            Count++;

        }

        if (Count == 0)

        {

            this.SelectedValue = this.SelectedDate?.ToString("MMMM yyyy");

        }

    }

 

}

<style>

    .agreement{

        background: #0dcaf0 !important;

    }

</style>

 

 

[RestrictKeyBoard.js]

 

function RenderMonthView(args) {

    var instances = document.getElementById(args).ej2_instances[0];

    var nodeList = instances.element.querySelectorAll('.e-day');

    nodeList.forEach(function (element) {

        if (element.textContent === "Jan" || element.textContent === "Aug") {

            element.classList.add("agreement");

        }

    });

}

We've also attached the sample code for your convenience. Please let us know if this meets your requirement. If you have any further questions or suggestions, feel free to share them with us.

Attachment: BlazorServerProject_8fcb7fb8.zip