FullCalendar JS - 点击事件格获取日期

Question

当我点击事件内的网格时，我想获取日期。

我已经尝试了回调函数。

• dayClick：无法在事件内部单击。
• eventClick：没有日期参数。

额外的信息
我已经为事件创建了一个 AJAX CRUD 和一个放在事件内部的EventException。
假设我们有一个20XX年12月20日至30日的事件。
我想用25th December 20XX作为圣诞节的例外。

- Aviz

---

请展示您的代码片段。 - Del

假设我想在事件范围内创建一个异常。 - Aviz

@del 与代码片段无关。 - Aviz

ADyson.. 你认为性能如何？如果我要将一个事件分解成几天，然后在日历中呈现每个单独的日期。这需要针对多个事件进行操作。我认为这不太实际。 - Aviz

我们要谈论多少个？日历一次只能显示一个月，因此事件数量必须有一个现实的限制。无论如何，你没有其他选择，只能将其分解。不一定是按照每天单独分开，但你肯定需要根据需要出现的位置进行分离。 - ADyson

Answer 1

在HTML中，请注意我们将向当前的fullcalender添加另一个方法处理程序调用eventClickEx。

  eventClickEx: function(jsEvent,ev,view,cellDate){
    alert(cellDate);
  }

在 fullcalendar.js 中，同样也在 fullcalendar 中。在这里，我们正在调用 getCellDate，但是该方法目前在视图中不可用。

 EventPointing.prototype.handleClick = function (seg, ev) {
        var hit = this.view.queryHit(getEvX(ev),getEvY(ev));
        var cellDate =  this.view.getCellDateEx(hit.row,hit.col);
        var res = this.component.publiclyTrigger('eventClickEx', {
            context: seg.el[0],
            args: [seg.footprint.getEventLegacy(), ev, this.view,cellDate]
        });
        if (res === false) {
            ev.preventDefault();
        }
    };

由于它目前不可用，我们将使用BasicView类，该类具有访问dayGrid对象的权限。

BasicView.prototype.getCellDateEx = function (row,col){
  return this.dayGrid.getCellDate(row,col);
};

当你点击事件时，你将从cellDate获取底层日期。

- zawhtut

---

感谢您愿意帮助。但是似乎实现起来太过繁琐。 - Aviz

Answer 2

由于每个Fullcalendar日期都堆叠在发生在该日期的事件后面，因此您无法获取单击的日期。您有三种可能的解决方法：

1. 当您单击事件时，可以显示一个带有日期选择器的模态框，并选择“异常日期/范围”...然后在后端设置您的事件中断。
2. 要设置“异常日期/范围”，可以直接单击日期（而不是事件）并将其设置为“无效”或其他内容。
3. 创建一个上下文菜单，其中包含“在此添加异常”项目，仅在单击日期（而不是事件）时触发

无论如何，如果您有一个为期10天的事件，并在中间设置了一个异常。 结束日期应向前移动一天.. 您最终可以将某些日期设置为“假期”，请检查this

- Yuri

Answer 3

尝试使用：

$('#calendar').fullCalendar({
  dayClick: function(date, jsEvent, view) {

    alert('Clicked on: ' + date.format());

  }
});

- Benjamin RD

Answer 4

希望 FullCalendar JS 的文档能够帮助到你。 请参考这篇文章：https://fullcalendar.io/docs/dayClick

- Anmol Mehta