1. Home
  2. Forum
  3. Blazor
  4. Customizing with icons and background

Customizing with icons and background

Hello Syncfusion-Team,

I followed your advice as
and I get trouble getting it to work correctly.

Following issues:
  • I don't know how to call the script correct if it is in a subfolder instead of wwwroot (if I do it like in the attached example, it is called only after the calendar is clicked)
  • The sample is not culture insensitive. If I run it on a German machine, the comparison of the date is not working. I got it working as you can see in the attached sample, but an easy-to-parse date format should be supplied. The culture-sensitive format supplied is no good practice. Fetching the month and year from parent nodes is not acceptable either, since there are also days of the last month and the next month shown.
  • In some examples of the calendar for other frameworks you show icons. How can icons be displayed besides the days?
  • Is there a way to show the background in other ways? The square background is not looking too good. How to format it better, e. g. square with rounded corners or circlular background?

Best regards
Michael

Attachment: PID.SfTestBlazor_b84047b7.zip

10 Replies 1 reply marked as answer
PM Ponmani Murugaiyan Syncfusion Team March 6, 2021 09:54 AM UTC

Hi Michael, 

Greetings from Syncfusion support. 

Query1: I don't know how to call the script correct if it is in a subfolder instead of wwwroot (if I do it like in the attached example, it is called only after the calendar is clicked) 
 
We checked your provided project, but we couldn’t find the file from where you have called the script file calendar calendarappointments using JS Interop. So, we have prepared sample as per your requirement by placing the js file inside the sub folder. Also we would like know you that, you have to refer the script file in the Host.cshtml. Please find the steps below for using script file using interop in sub folders. 

#Step1: You need to refer the script file in _Host.cshtml file and also created the calendar.js file inside the appointment folder. You can refer the file by traversing the path as like below highlighted. 

 

#Step2: You need to use interop to call the js file. 

<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"); 
    } 
} 

Query2: In some examples of the calendar for other frameworks you show icons. How can icons be displayed besides the days? 
 
You can add additional wrapper to the specific span element and apply the customization with custom styles by adding the class name ‘e-specific dates’. 
 
<style> 
    .e-special-date { 
        margin-top: -12px; 
        display: block; 
        margin-left: 3px; 
        height: 5px; 
        color: blue !important; 
    } 
</style> 
 
window.OnCreated = (id) => { 
    var date = [{ Date: "March 05, 2021", Color: "#ea4e4e", radius: "13px" }, { Date: "March 23, 2021", Color: "#25a025", radius: "13px" }] 
    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; 
                day[j].style.borderRadius = date[i].radius; 
                var wrapper = document.createElement('div'); 
                wrapper.classList.add('wrap'); 
                day[j].parentElement.firstElementChild.insertAdjacentElement("afterend", wrapper); 
                wrapper.appendChild(day[j]); 
                var specialDate = document.createElement('span'); 
                wrapper.appendChild(specialDate); 
                specialDate.classList.add('e-special-date'); 
                specialDate.innerText = "•";  
            } 
        } 
    } 
}; 
 
 
 
Query3: Is there a way to show the background in other ways? The square background is not looking too good. How to format it better, e. g. square with rounded corners or circlular background? 

You can modify the cell styles dynamically as like below highlighted code snippet. 

window.OnCreated = (id) => { 
    var date = [{ Date: "March 05, 2021", Color: "#ea4e4e", radius: "13px" }, { Date: "March 23, 2021", Color: "#25a025", radius: "13px" }] 
    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; 
                day[j].style.borderRadius= date[i].radius; 
            } 
        } 
    } 
}; 

 


Please get back us if you need further assistance.  

Regards, 
Ponmani M 


Marked as answer
MP Michael Pusch replied to Ponmani Murugaiyan March 12, 2021 07:47 PM UTC

Hi Michael, 

Greetings from Syncfusion support. 

Query1: I don't know how to call the script correct if it is in a subfolder instead of wwwroot (if I do it like in the attached example, it is called only after the calendar is clicked) 
 
We checked your provided project, but we couldn’t find the file from where you have called the script file calendar calendarappointments using JS Interop. So, we have prepared sample as per your requirement by placing the js file inside the sub folder. Also we would like know you that, you have to refer the script file in the Host.cshtml. Please find the steps below for using script file using interop in sub folders. 

#Step1: You need to refer the script file in _Host.cshtml file and also created the calendar.js file inside the appointment folder. You can refer the file by traversing the path as like below highlighted. 

 

#Step2: You need to use interop to call the js file. 

<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"); 
    } 
} 

Query2: In some examples of the calendar for other frameworks you show icons. How can icons be displayed besides the days? 
 
You can add additional wrapper to the specific span element and apply the customization with custom styles by adding the class name ‘e-specific dates’. 
 
<style> 
    .e-special-date { 
        margin-top: -12px; 
        display: block; 
        margin-left: 3px; 
        height: 5px; 
        color: blue !important; 
    } 
</style> 
 
window.OnCreated = (id) => { 
    var date = [{ Date: "March 05, 2021", Color: "#ea4e4e", radius: "13px" }, { Date: "March 23, 2021", Color: "#25a025", radius: "13px" }] 
    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; 
                day[j].style.borderRadius = date[i].radius; 
                var wrapper = document.createElement('div'); 
                wrapper.classList.add('wrap'); 
                day[j].parentElement.firstElementChild.insertAdjacentElement("afterend", wrapper); 
                wrapper.appendChild(day[j]); 
                var specialDate = document.createElement('span'); 
                wrapper.appendChild(specialDate); 
                specialDate.classList.add('e-special-date'); 
                specialDate.innerText = "•";  
            } 
        } 
    } 
}; 
 
 
 
Query3: Is there a way to show the background in other ways? The square background is not looking too good. How to format it better, e. g. square with rounded corners or circlular background? 

You can modify the cell styles dynamically as like below highlighted code snippet. 

window.OnCreated = (id) => { 
    var date = [{ Date: "March 05, 2021", Color: "#ea4e4e", radius: "13px" }, { Date: "March 23, 2021", Color: "#25a025", radius: "13px" }] 
    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; 
                day[j].style.borderRadius= date[i].radius; 
            } 
        } 
    } 
}; 

 


Please get back us if you need further assistance.  

Regards, 
Ponmani M 


Hi Ponmani,

thank you for your quick response.

I got it working. The main error was that I had:
<SfCalendar ID="calendar" TValue="DateTime">
    <CalendarEvents TValue="DateTime?" Created="onCreated"></CalendarEvents>
</SfCalendar>
With TValue once DateTime and once DateTime? I got a null reference exception that I thought was related to the javascript. With DateTime OR DateTime? it is working.
  • Any drawback when going with DateTime instead of DateTime??

Thank you.

However, your example is not working on my machine which has German culture settings, see my second question. I have to exchange
var date = [{ Date: "March  05, 2021", Color: "#ea4e4e", radius: "13px" }, { Date: "March 23, 2021", Color: "#25a025", radius: "13px" }]
with
var date = [{ Date: "März 05, 2021", Color: "#ea4e4e", radius: "13px" }, { Date: "März 23, 2021", Color: "#25a025", radius: "13px" }]
to get it working.

If you look at my calendarappointment.js you see that I found a way to deal with these two cultures, but of course, I don't like that approach.
  • Can you please provide a culture insensitive example of how to deal with all cultures?

Best regards
Michael

MA Matt March 14, 2021 01:58 AM UTC

Hi Ponmani

Thanks for this guidance. I'm trying to get this to work with the DatePicker, I think the only thing I need is the class selector for the day element in datepicker (e-day as provided for calendar does not work).

Essentially I'm passing in a dictionary of key/value pairs with a number corresponding to each day of the month and trying to show a badge with the corresponding number on each day that ahs one. Like this:



PM Ponmani Murugaiyan Syncfusion Team March 15, 2021 12:25 PM UTC

Hi Michael and Matt, 

Query: Any drawback when going with DateTime instead of DateTime?? 
 
We would like to inform you that, while resetting or clear the value externally, the component updated with null value. So if you have provided TValue as DateTime will set the component value as its default value and so null reference issue will be caused. Hence, we suggest you to provide the DateTime?. 
 
Also, we would like to know you that in the previously provided sample, we have included achieved the cell customization using JSInterop and manually updated the dates in date variable. Now, we have considered the new requirement “Support for adding custom class for the particular cell using onRenderDayCell event” in our end. So that you can add the custom class for particular cell in C#, by which yu can customize the colors and styles of the cell as per your requirement without JSInterop or culture based.  

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.  


We appreciate your patience until then. 

Regards, 
Ponmani M 


MP Michael Pusch April 26, 2021 04:09 AM UTC

Hi Ponmani,

the "OnRenderDayCell" works fine, thank you!

Best regards
Michael

PM Ponmani Murugaiyan Syncfusion Team April 26, 2021 12:02 PM UTC

Hi Michael, 

Most welcome. 

Regards, 
Ponmani M 


MP Michael Pusch replied to Ponmani Murugaiyan June 20, 2021 09:21 AM UTC

Hello Ponmani,

can you please check the attached solution?

When I try to add a new date to the specially marked dates by clicking on the calendar that does not work and the markings go away. It seems that onRenderDayCell is called only once but not during later calls.


Best regards,

Michael


Attachment: Blazor_Calendar_388e3f51.zip

PM Ponmani Murugaiyan Syncfusion Team June 21, 2021 06:50 AM UTC

Hi Michael,  

Thanks for the update.  

We have alraedy considered the reported issue “Calendar day cell styles removed after select any date dynamically” as bug in our end. The fix will be included in the Volume 2 main release which is expected to be rolled out on end of June 2021. You can track the status using the below feedback link.  


We appreciate your patience until then.  

Regards  
Ponmani M 


MP Michael Pusch June 21, 2021 07:59 PM UTC

Awesome, thank you!


PM Ponmani Murugaiyan Syncfusion Team June 22, 2021 09:15 AM UTC

Hi Michael, 

Thanks for the update. We will let you know once the fix has been included. We appreciate your patience until then. 

Regards, 
Ponmani M 


Loader.
Up arrow icon