We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

custom button in event view

Hi Support,

In Scheduler, is it possible to add a custom button to the event view in Scheduler?

I would like to use a scheduler for recurring events and have the ability for a user to click on the button to indicate they are going to the event.

I'm using Firestore as my back end.

3 Replies

VR Vijay Ravi Syncfusion Team April 24, 2023 09:55 AM UTC

Hi Michael,

Sample:  https://stackblitz.com/edit/https-stackblitz-com-angular-custom-button-event-hy1vlg?file=src%2Fapp.component.html,src%2Fapp.component.ts

You can achieve your requirement of adding a custom button to the event view by using the eventTemplate. You can add a button component and bind the click function to customize your button click function, as shown in the code snippet below. Please try the sample shared above and let us know if you need further assistance.


 <ng-template #eventTemplate let-data>

          <div class='template-wrap'>

            <div class='event-title'>{{data.Subject}}</div>

            <div class='event-time'>{{data.StartTime | date: 'MMM d, y h:mm a'}} - {{data.EndTime | date: 'h:mm a'}}


            <ng-container *ngIf="data.RecurrenceRule">

              <button class='event-button' (click)="onButtonClick(data)" style="background-color:crimson">Button</button>





 public onButtonClick(dataany) {

    // Add your customization for button function 

    alert(`Subject: ${data.Subject}Start Time: ${data.StartTime}`);



Vijay Ravi

MI Michael May 6, 2023 01:31 PM UTC

Thank you Vijay,
Is this the same in the Flutter control?



IR Indumathi Ravichandran Syncfusion Team May 8, 2023 01:56 PM UTC

Hi Michael,

As per the shared information, we suspect your requirement is Builder support for events in the Flutter Calendar. We have UG documentation for the same. Please find the documentation from the following link.

UG link: 


Also, we have a KB documentation for the appointment builder. Please find the documentation from the following link.

KB link:


We have documentation for getting the tapped appointment details using the onTap callback of the calendar.


We hope that this helps you. If this is not your requirement please share more details about your requirement clearly. It would be helpful for us to analyze and provide you with a solution at the earliest.


Indumathi R

Live Chat Icon For mobile
Up arrow icon