FullCalendar in Angular - get selected dates

Question

I am using FullCalendar v4 in Angular 10. I have been trying since yesterday to implement multiselect of days. i.e., user must be able to select multiple days (05/10, 05/18 etc.) Then on click of a button outside calendar control, I want to display 'The days you selected are: 05/10, 05/18' These two dates will then be saved in database.

So far, I am able to achieve multiselect of dates by changing colors on dateclick (clicking on selected date, changes the color back to white).

dateClick: function(info) {
    //this is when user clicks on one date
    // alert('Clicked on: ' + info.dateStr); 
    if (info.dayEl.style.backgroundColor == 'rgb(215, 247, 228)') {
      info.dayEl.style.backgroundColor = '#FFFFFF';
    } else {
      info.dayEl.style.backgroundColor = '#d7f7e4';
    }
    console.log(info.event.extendedProps);
  },
  select: function(info) {
    //this is when user clicks and drags across dates
     //alert('Clicked on: '); 
     if (info.dayEl.style.backgroundColor == 'rgb(215, 247, 228)') {
      info.dayEl.style.backgroundColor = '#FFFFFF';
    } else {
      info.dayEl.style.backgroundColor = '#d7f7e4';
    }
  }

p.s. I had to add the logic in both select() and dateClick() to make this work.

Now, I am looking for a way to capture the selected days back.

1. Tried having an array defined in angular component and push dates to it from dateClick() but for obvious scope reasons, the array is not accessible or short lived only till the click event
2. Thought of setting extendedProps like isSelected but then I will have to add dummy event for all days.

Any other suggestions would be very helpful.

Answer 1

I found that if we do dateClick: this.handleDateClick.bind(this), then we are able to access the declared variables in angular component. Reference: here For example, I defined an array and did a 'bind' like above, and now everytime I select a date, I am able to add to array. I will expand from here