Custom event tooltip content that calls functions with parameters

[Diana]

Hello, I am using your schedule component and I would like to fully customize tooltip of events inside calendar. I got away with simple templates that just display whatever values event holds inside that are not complicated such as 

'<div> ${subject} </div>'

However I would like to display for example formatted start and end times (${startTime.toLocaleString()} is not enough for me) and I would like to call my function (defined inside component that uses this calendar) inside of this string template with parameter of start or end times

'<div> ${myWhateverFunction(someValue)} </div>' ??? 

I looked at your documentation and found https://ej2.syncfusion.com/documentation/common/template-engine/#custom-helper however I could not make it work.

Could you please provide some example of html template as string variable that calls some function with specific parameter or something that could make this work? In the future I will have to use this approach not only for Dates but for other values as well. Thank you.

[Satheesh Kumar Balasubramanian]

Hi Diana, 

  

Greetings from Syncfusion Support..! 

  

We have validated your reported query "Custome event tooltip content that calls functions with parameters" at our end and prepared sample to meet your requirement which can be viewed from the following link. 

  

Sample: https://stackblitz.com/edit/angular-schedule-tooltip?file=app.component.ts 

  

app.component.html:  

    <ejs-schedule #scheduleObj width='100%' height='650px' [selectedDate]="selectedDate" 

      [eventSettings]="eventSettings" [currentView]="currentView"> 

      <ng-template #eventSettingsTooltipTemplate let-data> 

        <div class="tooltip-wrap"> 

          <div class="content-area"> 

            <div class="name">{{data.Subject}}</div> 

            <div class="time">From&nbsp;:&nbsp;{{formatTimeString(data.StartTime)}} </div> 

            <div class="time">To&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp;{{data.EndTime.toLocaleString()}}</div> 

            <div class="loc">{{data.Location}}: {{getWeather(data.Location)}}</div> 

          </div> 

        </div> 

      </ng-template> 

    </ejs-schedule> 

  

app.component.ts: 

  public instance: Internationalization = new Internationalization(); 

  formatTimeString: Function = (value: Date) => { 

    return this.instance.formatDate(value, { skeleton: 'Ed' }); 

  }; 

  getWeather: Function = (value: String) => { 

    return value === "Chennai" ? "35°C" : "Nil"; 

  } 

  

Kindly try the above sample and get back to us, if you need further assistance.  

  

Regards,   

Satheesh Kumar B