fullcalendar : 자신의 daycell을 가리키면 특정 날짜의 모든 일정을 표시합니다.

Question

fullcalendar을 통해 캘린더 응용 프로그램을 개발하고 있습니다.

저는 현재 미니 크기의 캘린더를 만들고 있습니다. 미니 캘린더는 이벤트를 표시하지 않습니다.

대신 툴팁을 사용하려고합니다. 사용자가 특정 daycell을 마우스 오버 할 때 특정 daycell의 모든 이벤트가 툴팁을 통해 표시됩니다. (이것은 제 문제입니다)

저는 이틀 동안 거의이 문제를 해결하기 위해 노력하고 있습니다.

전체 캘린더는 "eventMouseover"만을 제공합니다. (daydayMouseover 가능).

또한 $ (".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-방법은"이 일이 있다면 정말 알고,하지만 당신은 당신의 호버 이벤트 리스너를 사용할 수없는 이유를 단지 또한 그것을하게 해달라고 fc-day-top에서 들으시겠습니까?

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

이 기능은 하루 셀 상단에 마우스를 올리면 작동합니다.

업데이트 :합니다 (fullcalendar 주요 사이트의 달력에 테스트)

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

:

이 가져가 사용이의 이벤트를 얻을 수 있습니다.

물론 코드의 jQuery 선택기 (#calendar)를 코드에서 변경해야합니다.

Answer 2

이전에는 전체 캘린더를 본 적이 없지만 올바르게 이해하면 캘린더의 맞춤 요일에 마우스를 올리면됩니다. 그 맞습니까?

"data-date"속성을 사용하여 캘린더 날짜를 선택하기 만하면됩니다. 그래서 코드 같은 아래 당신이 원하는 일에 대한 호버 기능을 지정할 수있는 것 :

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