RenderDayCellEventArgs.Element is null

[Razvan]

Hi,

I am trying to apply a css style on some cells depending on their dates.

I've added the following code:

<SfCalendar TValue="DateTime?" IsMultiSelection="true" WeekNumber="true">
                    <CalendarEvents TValue="DateTime?" OnRenderDayCell="OnRenderDayCell"></CalendarEvents>
                </SfCalendar>

I was expecting to be able to use

public void OnRenderDayCell(RenderDayCellEventArgs args)
    {
    }

get the args.Element and apply the css there; however the Element is always null.

How can I customize the cells?

Kind regards,

Razvan

[Ponmani Murugaiyan]

Hi Razvan, 

Thanks for contacting Syncfusion support. 

We have checked the reported issue and would like to inform you that we could not access the DOM element in the Blazor platform. But we can achieve the your requirement by using JS interop file and implement as mentioned in the below sample.    

<SfCalendar ID="calendar" TValue="DateTime?"> 

    <CalendarEvents TValue="DateTime?" Created="onCreated"></CalendarEvents> 

</SfCalendar> 

@code{ 

    [Inject] 

    protected IJSRuntime JsRuntime { get; set; } 

    public void onCreated() 

    { 

        JsRuntime.InvokeVoidAsync("OnCreated", "calendar"); 

    } 

} 

[wwwroot/calendar.js] 

 

window.OnCreated = (id) => { 

    debugger 

    var date = [{ Date: "October 05, 2020", Color: "#ea4e4e" }, { Date: "October 23, 2020", Color: "#25a025" }] 

    var day = document.getElementById('calendar').querySelectorAll('.e-day'); 

    for (var i = 0; i < date.length; i++) { 

        for (var j = 0; j < day.length; j++) { 

            if (day[j].title.includes(date[i].Date)) { 

                day[j].style.background = date[i].Color; 

            } 

        } 

    } 

}; 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Blazor_Calendar2097591135  

 

Regards, 

Ponmani M