CODEWITHSUNDEEP
javascriptjqueryhtmlcssfullcalendar
codingnighter2000
codingnighter2000

Reputation: 529

fullcalendar: display all events of a specific day when hovering his daycell

I'm developing a Calendar application via fullcalendar.

I'm currently working on a mini sized calendar. The mini calendar will not display the events.

I'm trying to use tooltip instead. so when the user will mouseover a specific daycell - all the events of the specific daycell will be displayed via tooltip. (this is my issue)

I been working on this issue for almost two days now.

unfortunately, full calendar only offers "eventMouseover". (no dayMouseover available).

Also, using $(".fc-day").hover is not really the best way to go because it is working only when hovering the bottom of the cell.

there is no documentation for this on the web so far.

Anybody knows which is the best way to Tackle an issue?

here is my code so far:

    $("#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;
        },
});

Upvotes: 1

Views: 2035

Answers (2)

Daniel Z.
Daniel Z.

Reputation: 3348

I dont really know if there is a "fullcalendar-way" doing this, but why can't you use your hover event listener and just also let it listen on fc-day-top hover?

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

This will also work if you hover the top of a day cell.

Update:

To get the events on hover use this:

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

(Tested on the calendar on the fullcalendar main site).

Of course you have to change the jQuery selector of the calendar (#calendar) as it is in your code.

Upvotes: 2

YAHsaves
YAHsaves

Reputation: 1767

I've never seen full calendar before, but if I understand correctly you want to bind a hover function to custom days of the calendar. Is that correct?

If so you can simply select days of the calendar with their "data-date" attribute. So something like the code below would let you specify a hover function for a desired day:

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

Upvotes: 1

Related Questions