How to handle custom button click event for p-fullCalendar?

UI Components for Angular
Post Reply
Aseem
Posts: 9
Joined: 21 Apr 2018, 05:36

17 Jan 2019, 21:40

I am using the `p-fullCalendar` control to display appointments.

I want to add a custom button in the header to add a new appointment.

I have done that by specifying it in the options as per full calendar docs :

Code: Select all

export class AppointmentsComponent implements OnInit {

  events: any[];
  options: any;
  displayAddAppointment: boolean;

  constructor() { }

  ngOnInit() {

    this.options = {
      header: {
        left: 'prev,next today',
        center: 'title',
        right: 'addAppointmentButton, month,agendaWeek,agendaDay'
      },
      customButtons: {
        addAppointmentButton:{
          text:"New appointment",
          click: r=> {
            //this works but displayAddAppointment within the component is inaccessible.
            //I would like to display a modal dialog to add a new appointment from this.
          }
        }
      }
    };
the html being :

Code: Select all

<div>
 <p-fullCalendar [events]="events" [options]="options"></p-fullCalendar>

 <p-dialog header="Schedule new appointment" 
         [(visible)]="displayAddAppointment" 
         modal="modal">
 </p-dialog>
<div>

The button is displayed fine and the click event gets fired too.

But how do I handle the click event of this button so that I can display the modal dialog?

"this" within the click event handler refers to the button:

Image

Aseem
Posts: 9
Joined: 21 Apr 2018, 05:36

19 Jan 2019, 07:50

In case anyone is wondering .. I managed to make it work :

Code: Select all

addAppointmentButton: {
    text: 'New appointment',
    click: this.click.bind(this)
}
// ...
click() {
    this.displayAddAppointment = !this.displayAddAppointment;
}

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 7 guests