fullcalendar: отображать все события определенного дня при наведении курсора

Question

Я разрабатываю приложение Календарь через https://fullcalendar.io/.

В настоящее время я работаю над мини-календарем. Мини-календарь не будет отображать события.

Я пытаюсь использовать всплывающую подсказку. поэтому, когда пользователь наведет указатель мыши на определенную дневную ячейку - все события определенной дневной ячейки будут отображаться во всплывающей подсказке. (это моя проблема)

Я работаю над этим вопросом почти два дня.

К сожалению, полный календарь предлагает только " eventMouseover". (нет дневного перемещения).

Кроме того, использование $(". 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

Я на самом деле не знаю, есть ли для этого "fullcalendar-way", но почему вы не можете использовать слушатель событий hover и просто позволить ему слушать fc-day-top парить?

$(".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!"); 
});