Provide example for Custom Calendar section on Calendar demo page

[Eli]

On the Blazor Calendar page, you show an example in both the "Overview" and "Custom Calendar" section which show cell by cell customization. Can you please provide an example of how something like this can be achieved? 

[Ponmani Murugaiyan]

Hi Eli,  

Thanks for contacting Syncfusion support.  

We have checked the reported requirement and would like to inform you that we could not access the DOM element in the Blazor platform. But we can achieve your requirement by using JS interop file and can be implemented 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) => {  

    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;  

            }  

        }  

    }  

};  

Output: 

 

Sample:  https://www.syncfusion.com/downloads/support/directtrac/general/ze/Blazor_Calendar-176019905  

Regards, 

Ponmani M 

[Eli]

Thanks for the response, I just got around to implementing this. Since it's been several months since your response, I was wondering if the calendar component has been updated in a way to make this easier or by using C# code?

[Ponmani Murugaiyan]

Hi Eli, 

Thanks for the update. 

We would like to know you that in order achieve your reported requirement, we need to access the DOM elements to apply the required styles and color to the respective elements. But in Blazor platform, we could not access the DOM elements in razor file. So that we have achieved the requirement through scripts using JS Interop. 

Regards, 

Ponmani M  

[Eli]

Thanks for the response. I did a bit of testing out of curiosity and it seems that you can give the cell a true disabled property which then gives each cell a e-disabled class. This means that you can change the class list of the object from within Blazor. Why can you give each cell an e-disabled class, but not a class that I decide? 

This is the code that sets an e-disabled class:

 public void onRenderDayCellHandler(RenderDayCellEventArgs args)

    {

        args.IsDisabled = true;

    }

This is what I think you should be able to do to add a "Test" class:

public void onRenderDayCellHandler(RenderDayCellEventArgs args)

    {

        args.CellData.ClassList += "Test";

    }

[Ponmani Murugaiyan]

Hi Eli 

Thanks for the patience. 

Currently we didn’t have the support for adding custom class for particular cell in C# as per your provided code snippet. We have considered this requirement “Support for adding custom class for the particular cell using onRenderDayCell event” as improvement in our end. The support will be provided in the first patch release after Volume 1 main release scheduled on March 24, 2021. You can track the status using the below feedback link. 

Feedback : https://www.syncfusion.com/feedback/23297 

We appreciate your patience until then. 

Regards, 

Ponmani M