custom button in event view

[Michael]

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.

[Vijay Ravi]

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.

[app.component.html]

 <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'}}

            </div>

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

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

            </ng-container>

          </div>

        </ng-template>

[app.component.ts]

 public onButtonClick(data: any) {

    // Add your customization for button function 

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

  }

Regards,

Vijay Ravi

[Michael]

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

Regards,

Michael

[Indumathi Ravichandran]

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: 

https://help.syncfusion.com/flutter/calendar/builders#appointment-builder

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

KB link:

https://support.syncfusion.com/kb/article/10679/how-to-customize-the-appointments-using-custom-builder-in-the-flutter-calendar

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

https://support.syncfusion.com/kb/article/9936/how-to-add-a-custom-appointments-or-objects-in-the-flutter-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.

Regards,

Indumathi R