Angular 中的 FullCalendar - 获取选定日期

Question

我在 Angular 10 中使用 FullCalendar v4。从昨天开始，我一直在尝试实现多选天数。 即，用户必须能够 select 多天（05/10、05/18 等）然后单击日历控件外部的按钮，我想显示“您选择的日期是：05/10、05/18”然后将这两个日期保存在数据库中。

到目前为止，我可以通过在 dateclick 上更改 colors 来实现日期的多选（单击选定的日期，颜色变回白色）。

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';
    }
  }

ps 我必须在 select() 和 dateClick() 中添加逻辑才能完成这项工作。

现在，我正在寻找一种方法来捕捉选定的日子。

1. 尝试在 angular 组件中定义一个数组并从 dateClick() 向其推送日期，但由于明显的 scope 原因，该数组无法访问或仅在单击事件之前短暂存在
2. 想过像 isSelected 这样设置 extendedProps ，但是我将不得不整天添加虚拟事件。

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

Answer 1

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