fullcalendar：当悬停在他的日单元上时显示特定日期的所有事件

Question

我正在通过fullcalendar 开发日历应用程序。

我目前正在制作一个迷你日历。迷你日历不会显示事件。

我正在尝试使用工具提示。因此，当用户将鼠标悬停在特定的日单元上时 - 特定日单元的所有事件都将通过工具提示显示。 （这是我的问题）

我已经在这个问题上工作了将近两天了。

很遗憾，完整日历仅提供“eventMouseover”。 （没有 dayMouseover 可用）。

此外，使用 $(".fc-day").hover 并不是最好的方法，因为它仅在悬停在单元格底部时才有效。

到目前为止，网络上还没有这方面的文档。

有人知道解决问题的最佳方法是什么吗？

到目前为止，这是我的代码：

    $("#miniCalendar").fullCalendar({

        defaultDate: currentDate,
        viewRender: function (view, element)
        {
            monthStart = view.intervalStart.format("YYYY-MM-DD");
            monthEnd = view.intervalEnd.subtract(1, "days");
            monthEnd = view.intervalEnd.format("YYYY-MM-DD");
            mStart = view.intervalStart.format("M");
            yStart = view.intervalStart.format("YYYY");
        },
        events: function (start, end, timezone, callback) { //custom events function to be called every time the view changes

        $.ajax({
          url: getMonthDataUrl,
          type: "post",
          data: {
          startDate: monthStart,
          endDate: monthEnd,
           custom_config: Config
          },
          error: function () {
          //alert("there was an error while fetching events!");
          },
          success: function (data) {
          calendarData = data;
          console.log(calendarData);
          thingsToDoAfterWeLoadCalendarData(calendarData);
          callback(eventsJsonArray); //pass the event data to fullCalendar via the supplied callback function                                          
                     }
                  });

        },
        fixedWeekCount: false,
        dayRender:
          function (date, cell) {
          //the events are loaded vie eventAfterAllRender function
          //eventAfterAllRender takes time to load. so we need dayRender function in order to give the calendar default colors until the real colors are loaded
          // the default colors spouse to look like the correct colors. this is needed for a better looking calendar while loading new events
          if (!cell.hasClass("fc-other-month")) {
          //that means this is a cell of this current month (becuase only cells that belong to other month have the "fc-other-month" class
          var weekDay = date.format("dddd");
                  if (weekDay == "Saturday" || weekDay == "Friday") {
          cell.css("background-color", "#edf5f9");
          } else{
          //regular days
          cell.css("background-color", "#f7fafc");
          }
          } else{
          //cells that belong to the other months 
          $(".fc-other-month").css("background-color", "#ffffff");
          }

          },

          eventAfterAllRender: 
            (function(view, event, element) {
            let viewDisplay = $("#miniCalendar").fullCalendar("getView");
                    if (viewDisplay.name == "month") { //checking if this the month view. this is needed for better display of the week\day view (if we ever want to use it)
            $(".fc-day:not(.fc-other-month)").each(function(index, element) {
            //loop through each current month day cell
            $(this).empty(); //removing old icons in case they are displayed                                 
                    let cellDate = moment($(this).data("date")).format("YYYY-M-D"); // "YYYY-M-D" date format is the key in the json_backgrundColorBigCalendar array
                    $(this).css("background-color", json_backgrundColorBigCalendar[cellDate]); //set the background colour of the cell from the json_backgrundColorBigCalendar array.           
            });
        }

        $(".fc-other-month").css("background-color", "#ffffff"); //days that belong to other month gets a color background that will show this days are irrelevant

        }),
        dayClick: function(date, jsEvent, view) {
        window.location = fullCalendarUrl;
        },
});

Answer 1

我真的不知道是否有“全日历方式”这样做，但为什么不能使用悬停事件侦听器并让它在fc-day-tophover 上进行侦听？

$(".fc-day, .fc-day-top").hover(function(e) {
    console.log($(e.currentTarget).data("date")); 
});

如果您将鼠标悬停在一天单元格的顶部，这也将起作用。

更新：

要获得悬停事件，请使用：

var $calendar = $("#calendar");
$(".fc-day, .fc-day-top").hover(function(e) {
        var date = moment.utc($(e.currentTarget).data("date"));
        var events = $calendar.fullCalendar("clientEvents", function(event) { return event.start.startOf("day").isSame(date); });
        console.log(events);
    });    

（在 fullcalendar 主站点的日历上测试）。

当然，您必须更改日历的 jQuery 选择器 (#calendar)，因为它在您的代码中。

Answer 2

我以前从未见过完整的日历，但如果我理解正确，您希望将悬停功能绑定到日历的自定义日期。那是对的吗？

如果是这样，您只需使用“数据日期”属性选择日历中的日期即可。因此，类似下面的代码可以让您指定所需日期的悬停功能：

$("[data-date='2017-10-10']").hover(function(e) {
    console.log("You moused over 10/10/2017!"); 
});