Angular 10 Fullcalendar - How to edit event title, content and how to delete event?

Question

I'm using Angular 10, and fullcalendar 5.5.1, and trying to understand how the API works. I found some install steps on this blog, it works as-is (see screenshot below), but now I need to edit and delete events.

I thought I'd experiment by first trying to delete the two events that I've added. Since the next button > is calling next() fine, I'd like to delete the events there, and later hook it into an actual delete button click handler. The this.$calendarRef.fullCalendar call is erroring out because fullCalendar is not a function. the Ref has many functions, but fullCalendar isn't one of them. (I used this technique back in nG 5, thought it might work with the latest FC).

Can someone please help me get started?

screenshot:

component.ts:

import { Component, ElementRef } from '@angular/core';
import { CalendarService } from '../calendar.service';
import { CalendarOptions } from '@fullcalendar/angular';

declare var $: any;

@Component({
  selector: 'calendar-widget',
  templateUrl: './calendar-widget.component.html',
})

export class CalendarWidgetComponent implements OnDestroy {

  private $calendarRef: any;
  private calendar: any;
  public period = 'Showing'

  public calendarOptions: CalendarOptions = {
    initialView: 'dayGridMonth',
    headerToolbar: {
      left: 'prev,next today',
      center: 'title',
      right: 'dayGridMonth,listWeek'
    },
    editable: true,
    selectable: false,
    unselectAuto: false,
    droppable: true,
    dayMaxEvents: true, // allow "more" link when too many events
    events: [
      { title: 'event 1', date: '2021-01-12'},
      { title: 'event 2', date: '2021-01-21'}
    ]
  };

  constructor(
    private el: ElementRef, 
    private calendarService: CalendarService
  ) {
  }
  
  public next() {
    console.log("CalendarWidgetComponent next");

    this.$calendarRef = $(document.getElementById('full-calendar'));
    this.$calendarRef.fullCalendar('removeEvents');  //<<<<< ERROR this.$calendarRef.fullCalendar is not a function

    $('.fc-next-button', this.el.nativeElement).click();
  }

  public prev() {
    $('.fc-prev-button', this.el.nativeElement).click();
  }
}

component.html:

<div sa-widget color="blueDark">
  <header>
    <span class="widget-icon"> <i class="fa fa-calendar"></i> </span>

    <h2> My Events </h2>

    <div class="widget-toolbar">
      <div class="btn-group" dropdown>
        <button id="single-button" type="button" class="btn btn-xs btn-default" dropdownToggle>
          {{period}} <span class="caret"></span>
        </button>
        <ul *dropdownMenu class="dropdown-menu" role="menu" aria-labelledby="single-button">
          <li role="menuitem"><a class="dropdown-item" (click)="changeView('month')">Month</a></li>
          <li role="menuitem"><a class="dropdown-item" (click)="changeView('agendaWeek')">Agenda</a></li>
          <li role="menuitem"><a class="dropdown-item" (click)="changeView('agendaDay')">Today</a></li>
        </ul>
      </div>
    </div>
  </header>

  <div>
    <div class="widget-body no-padding">
      <div class="widget-body-toolbar">
        <div id="calendar-buttons">
          <div class="btn-group">
            <a (click)="prev()" class="btn btn-default btn-xs"><i class="fa fa-chevron-left"></i></a>
            <a (click)="next()" class="btn btn-default btn-xs"><i class="fa fa-chevron-right"></i></a>
          </div>
        </div>
      </div>
      <full-calendar [options]="calendarOptions"></full-calendar>
    </div>

  </div>

</div>

question from:https://stackoverflow.com/questions/65838754/angular-10-fullcalendar-how-to-edit-event-title-content-and-how-to-delete-eve

Answer 1

Waitting for answers