Angular fullcalendar adding an event when clicking on the day

Viewed 2265

Hi hope you will help me on this

I'm working on Angular 10 and full calendar v5 and I want to know how can I add an event into the day when clicking on it

export class CalendarComponent implements OnInit{

  nomaction;

  constructor(public dialog: MatDialog) { }

  ngOnInit(): void {
    
  }


calendarOptions: CalendarOptions = {
    initialView: 'dayGridMonth',
    weekends: true,
    dateClick: this.handleDateClick.bind(this), // bind is important!
    events: [
      { title: 'event 1', date: '2020-08-20' },
      { title: 'event 2', date: '2020-08-21' }
    ]
  };

  handleDateClick(arg) {
  
    const dialogRef = this.dialog.open(AddeventComponent, {
      width: '250px',
      data: {nomaction: this.nomaction}
    });

    dialogRef.afterClosed().subscribe(result => {
      this.nomaction = result.nomaction;
      this.calendarOptions.events = [{ title: this.nomaction, date: arg.dateStr }];//a code for adding an event into the day
      console.log('action',this.nomaction);
    });

   
  }

  toggleWeekends() {
    this.calendarOptions.weekends = !this.calendarOptions.weekends 
     }

 }

this.calendarOptions.events is not an array so I couldn't use push to add the object !

How can I add it without losing my first data !

1 Answers

Add on your calendar options this :

calendarOptions: CalendarOptions = {
    initialView: 'dayGridMonth',
    weekends: true,
    dateClick: this.handleDateClick.bind(this), // bind is important!
    events: [
      { title: 'event 1', date: '2020-08-20' },
      { title: 'event 2', date: '2020-08-21' }
    ],
    dateClick:function (info) {
        console.log("See day infos: ",info);
    }
  };

I let you the documentation here

Related