Add, remove and edit blocked event in scheduler

[CalvinC]

Hi,

I would like to know how to add and remove blocked slots in the scheduler.

I follow example below:
https://ej2.syncfusion.com/angular/demos/#/bootstrap5/schedule/block-events

But I would like to allow user click blocked slot to edit it and click available slot to create blocked slot.

Thank you

[Satheesh Kumar Balasubramanian]

Hi Calvin,

 

Currently, we don’t have the option to add, remove and edit block events. But, you can use eventRendered event to bind click action for the block event and you can open your customized dialog in the click action there you can edit or delete the block appointment. You can use the cellClick or cellDoubleClick of the schedule event to add the block appointment.

 

https://stackblitz.com/edit/angular-blocked-event-click-action?file=app.component.html,app.component.ts

app.component.ts:

  public onEventRendered(args: EventRenderedArgs): void {

    if (args.type === 'blockEvent') {

      // Binding click event

      EventHandler.add(args.element, 'click', this.blockEventClick.bind(this));

    }

  }

  public blockEventClick(args: Event) {

    const blockAppCollection = this.scheduleObj.getBlockEvents();

    const blockEventData = blockAppCollection.filter(

      (event: { [key: string]: {} }) =>

        event.Id ===

        parseInt(

          (args.target as HTMLElement)

            .getAttribute('data-id')

            .replace('Appointment_', ''),

          10

        )

    )[0];

    if (blockEventData) {

      // You can open your customized dialog

    }

  }

 

Kindly try the above sample and let us know if this meets your requirement.

 

API:

https://ej2.syncfusion.com/angular/documentation/api/schedule/#eventrendered

https://ej2.syncfusion.com/angular/documentation/api/schedule/#cellclick

https://ej2.syncfusion.com/angular/documentation/api/schedule/#celldoubleclick

Regards,

Satheesh Kumar B