Angular 中的 FullCalendar - 获取选定的日期

Question

我在 Angular 10 中使用 FullCalendar v4。从昨天开始我一直在尝试实施 multiselect 天。即，用户必须能够 select 多天（05/10、05/18 等）然后单击日历控件外的按钮，我想显示 'The days you selected are: 05/10, 05/18' 这两个日期将是保存在数据库中。

到目前为止，我可以通过在 dateclick 上更改颜色来实现多个 select 日期（单击 selected 日期，将颜色更改回白色）。

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。我必须在 select() 和 dateClick() 中添加逻辑才能完成这项工作。

现在，我正在寻找一种方法来捕捉 selected 几天前的情景。

尝试在 angular 组件中定义一个数组，并将日期从 dateClick() 推送到它，但由于明显的范围原因，该数组不可访问或仅在点击事件之前存在很短时间
想像 isSelected 一样设置 extendedProps，但之后我将不得不为所有天添加虚拟事件。

任何其他建议都会很有帮助。

Answer 1

我发现如果我们执行 dateClick: this.handleDateClick.bind(this)，那么我们就能够访问 angular 组件中声明的变量。参考：这里例如，我定义了一个数组并像上面那样做了一个'bind'，现在每次我select一个日期，我都可以添加到数组中。我将从这里展开

Angular 中的 FullCalendar - 获取选定的日期

FullCalendar in Angular - get selected dates

fullcalendar

angular

fullcalendar-4