angular - How to show selected dates without adding event and then on custom button click add an event full calendar

Question

Is there any way by which I could see the selected dates and then add an event on a custom button click?

  calendarVisible = true;
  calendarOptions: CalendarOptions = {
    headerToolbar: {
      left: 'prev today next custom1',
      center: 'title',
      right:''
    },
    customButtons: {
      custom1: {
        text: 'WeekDays',
        click: this.handleWeekdays.bind(this)
      },
    initialView: 'dayGridMonth',
    initialEvents: INITIAL_EVENTS, // alternatively, use the `events` setting to fetch from a feed
    eventColor: 'green',
    weekends: true,
    editable: true,
    selectable: true,
    unselectAuto: true,
    showNonCurrentDates: false,
    select:this.handleDateSelect.bind(this),
  };

  currentEvents: EventApi[] = [];
  startdate: any;
  enddate: any;
  
  handleWeekdays() {
    this.array2=[];
    const calendarApi = this.calendarComponent.getApi();
    var d = new Date(calendarApi.getDate());
    let month = d.getMonth();
    let year = d.getFullYear();
    let mm;
    let totaldays = this.getTotalDays(month, year);
    let c = 0;
    if (d.getMonth() < 9) { mm = '0' + (d.getMonth() + 1) } else { mm = d.getMonth() + 1; }
    for (let i = 1; i <= totaldays; i++) {
      let newDate = new Date(d.getFullYear(), d.getMonth(), i);
      if (newDate.getDay() != 0 && newDate.getDay() != 6) {
        this.array2.push(i);
        let a = i;
        let b = i + 1;
        if (i < 10) {
          this.startdate = d.getFullYear() + '-' + mm + '-0' + a;
          this.enddate = d.getFullYear() + '-' + mm + '-0' + b;
        }
        else {
          this.startdate = d.getFullYear() + '-' + mm + '-' + a;
          this.enddate = d.getFullYear() + '-' + mm + '-' + b;
        }
        console.log(this.enddate)
        calendarApi.select({
          start: this.startdate,
          end: this.enddate,
        })
      }
    }
  }
 handleDateSelect(selectInfo: DateSelectArg) {
    const calendarApi = selectInfo.view.calendar;
    const title = prompt("enter title");
    calendarApi.unselect(); // clear date selectio
    calendarApi.addEvent({
      id: createEventId(),
      title,
      start: selectInfo.startStr,
      end: selectInfo.endStr,
    });
    calendarApi.unselect()
  }
  }

So here I have updated the code where on custom button 1 click I select weekdays of month and add event concurrently and the basic dates and draggable calendar selection done , So is there any way by which on the weekday button click it selects the dates and then I could unselect 1 or 2 days of it and the add events on that dates at another custom button click(I have not added the second custom button, and now on select called at custom button1 it activates the function binded to it on initilisation).

question from:https://stackoverflow.com/questions/65713150/how-to-show-selected-dates-without-adding-event-and-then-on-custom-button-click

Answer 1

Waitting for answers