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

【问题标题】：FullCalendar in Angular - get selected datesAngular 中的 FullCalendar - 获取选定的日期
【发布时间】：2021-05-20 19:42:31
【问题描述】：

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

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

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

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

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

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

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

【问题讨论】：

你的最后一部分问题我没看懂。你会简短地解释一下吗？并安装了 fullcalender-angular 库？
我对 Angular 一无所知，但您是否愿意接受基于 JS 的标准答案，这至少可以让您朝着正确的方向前进？
我发现如果我们做dateClick:this.handleDateClick.bind(this)，那么我们就可以访问angular组件中声明的变量。参考：here 例如，我定义了一个数组并像上面那样做了一个“绑定”，现在每次我选择一个日期，我都可以添加到数组中。我将从这里扩展。
@GaurangDhorda ExtendedProps 如fullcalendar.io/docs/event-object 。我们可以定义自己的属性。我的想法是有类似 isSelected 的东西（默认为 false）。然后当你点击日期时，将 isSelected 更改为 true
谢谢@ADyson，是的，任何方向都可以。

标签： angular fullcalendar fullcalendar-4

【解决方案1】：

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

【讨论】：