How to add text with dates in Calender

[Tabinda Muslim]

Is it possible to customise Dates (adding text or icon) in Calendar?

[Sevvandhi Nagulan]

Hi Tabinda, 

Greetings from Syncfusion support. 

Before proceeding your query, can you please provide the information below to help us understand the requirement further? 

1. Requirement to display a screenshot / video  

 

2. Share any links or blogs that suggest the requirement 

Regards, 

Sevvandhi N 

[Tabinda Muslim]

I have attached a rar file for reference.

Attachment: Calender__cdb35cae.rar

[Tabinda Muslim]

How to add a custom popup on click of date as shown in attachment?

Attachment: calender_1_bfc38821.rar

[Sevvandhi Nagulan]

Hi Tabinda, 

Thanks for the update. 

While checking the screenshot provided, we suspect that your requirement was related to the schedule component. Please check the month view calendar in the below demo sample, 

https://ej2.syncfusion.com/demos/#/material/schedule/default.html 

Also find the calendar demo sample, 

https://ej2.syncfusion.com/angular/demos/#/material/calendar/default 

So, can you please confirm whether the schedule or calendar component is your requirement? 

Regards, 

Sevvandhi N 

[Tabinda Muslim]

Hello,

My requirement is in Calendar only. Through Calendar I want to achieve my requirements with css overriding.

I want to add text along with date also want to add a eventHandler on click of each date.

Thank you

[Sevvandhi Nagulan]

Hi Tabinda, 

Thanks for the update. 

Query1 : My requirement is in Calendar only. Through Calendar I want to achieve my requirements with css overriding. 

 

Solution: 

We have added some text along with the dates using the renderDayCell event. Refer to the code below, 

 

  onLoad(args: any) { 

    if(!args.element.classList.contains('e-other-month')){ 

          let span: HTMLElement; 

              span = document.createElement('span'); 

              span.textContent = "45 MT"; 

              span.setAttribute('class', 'e-icons highlight'); 

              args.element.appendChild(span); 

    } 

} 

Sample: https://stackblitz.com/edit/angular-1qq79q-eggjaf?file=app.component.ts 

Query 2: I want to add text along with date also want to add a eventHandler on click of each date. 

Solution:  

When click on each cell, then change event will be triggered. The change event can be used for performing the action as per your own. 

Regards, 

Sevvandhi N