How can I call another function from renderDayCell in TypeScript

[Ameet]

I am trying to use RenderDayCell to display the event information for the hovered over date. But I need to call another typescript function. But if I use this it references the control itself and not the typescript code.

Any help is greatly appreciated.

FYI - I am using this in SharePoint Framework.

Thanks,

Am

[Sureshkumar P]

Hi Ameet, 

 

We can call another method as like below code in your renderdaycell event method. 

 

Find the sample here: https://ej2.syncfusion.com/demos/#/bootstrap5/calendar/special-dates.html  

 

Find the code example here:  

let calendar: Calendar = new Calendar({ 

  renderDayCell: customDates, 

  change: valueChange, 

}); 

calendar.appendTo('#calendar'); 

 

function customDates(args: RenderDayCellEventArgs): void { 

  updateCustomElement(args); 

} 

function updateCustomElement(args) { 

  /*Date need to be customized*/ 

  if (args.date.getDate() === 10) { 

    let span: HTMLElement; 

    span = document.createElement('span'); 

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

    args.element.firstElementChild.setAttribute('title', 'Birthday !'); 

    addClass([args.element], ['e-day', 'special', 'birthday']); 

    args.element.setAttribute('data-val', ' Birthday !'); 

    args.element.setAttribute('title', 'Birthday !'); 

    args.element.appendChild(span); 

  } 

  if (args.date.getDate() === 15) { 

    let span: HTMLElement; 

    span = document.createElement('span'); 

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

    args.element.firstElementChild.setAttribute('title', 'Farewell !'); 

    addClass([args.element], ['e-day', 'special', 'farewell']); 

    args.element.setAttribute('data-val', 'Farewell !'); 

    args.element.setAttribute('title', 'Farewell !'); 

    args.element.appendChild(span); 

  } 

  if (args.date.getDate() === 25) { 

    let span: HTMLElement; 

    span = document.createElement('span'); 

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

    args.element.firstElementChild.setAttribute('title', 'Vacation !'); 

    addClass([args.element], ['e-day', 'special', 'vacation']); 

    args.element.setAttribute('title', 'Vacation !'); 

    args.element.setAttribute('data-val', 'Vacation !'); 

    args.element.appendChild(span); 

  } 

} 

 

 

Regards, 

Sureshkumar P