Fullcalendar | Jquery hover function doesn't work anymore after view changing

10
June 13, 2018, at 5:00 PM
The Context

Hi everybody,

I'm using Fullcalendar to display availabilities and bookings of properties (houses) in a CRM application developed under Symfony 3.

The calendar is functional. We have .fc-event-container element to display the bookings and .fc-bgevent for the availabilities as below.

fullcalendar.png

What I've added after, is the possibility to know, by hovering a cell (.fc-bgevent), who has set the availabilities and when. These informations are retrieved from the database, stored into a custom attribute « data-informations » during the render of each cell (.fc-bgevent) and finally displayed above the calendar view container as below.

fullcalendar-hover.png

To show you how I have achieved that, I put the code of the using files below.

Controller

   //src/LD/PlatformBundle/Controller/Properties/indexController.php
  public
  function viewAction(Request $request, $id) {
      $events = $manager - > getRepository('LDPlatformBundle:Availabilities') - > findBy(array('idProperties' => $id));
      $Availa = array();
      foreach($events as $event) {
          ...
          $Ava['user'] = $event - > getIdUsers();
          $Ava['updateDate'] = $event - > getDateModifAvailabilities();
          if ($Ava['updateDate'] != null) {
              $Ava['updateDate'] = $Ava['updateDate'] - > format('D d-M-y');
          } else {
              $Ava['updateDate'] = "unknonw date";
          }
          if ($Ava['user'] == null) {
              $Ava['user'] = 'unknown user';
          }
          $Ava['informations'] = "Created by ".$Ava['user'].
          " on ".$Ava['updateDate'];
          $Availa[] = $Ava;
      }
      return $this - > render('LDPlatformBundle:Properties:view.html.twig', array(
          'Availa' => $Availa,
      ));
  }

View

//src/LD/PlatformBundle/Resources/views/Properties/view.html.twig
<script >
    $(document).ready(function() {
        $('#calendar').fullCalendar({
            schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay,listMonth'
            },
            navLinks: true, // can click day/week names to navigate views
            businessHours: true, // display business hours
            editable: false,
            eventOverlap: false,
            events: [{ % include('FrontBootstrap/ajaxPlanning.html.twig') %
            }],
            eventRender: function(event, element) {
                $(element).attr('data-informations', event.informations);
            },
            nextDayThreshold: "01:00:00"
        });
        $('.fc-view-container').prepend('<div id="informations-date"><span></span></div>');
        $('#informations-date').css('visibility', 'hidden');
        $('.fc-bgevent').hover(function() {
            var informations = $(this).attr('data-informations');
            $('#informations-date span').text(informations);
            $('#informations-date').css('visibility', 'visible');
        }, function() {
            $('#informations-date').css('visibility', 'hidden');
        });
    }); 
</script> 
<style >
    #informations - date {
        height: 20 px;
    }
    /* Disable hover */
    .fc - content - skeleton,
    .fc - bgevent - skeleton {
        pointer - events: none
    }
    /* Enable hover on .fc-bgevent, .fc-bgevent-skeleton child and .fc-event-container */
    .fc - bgevent,
    .fc - event - container {
        pointer - events: auto;
    }
</style>   

Events

    //app/Resources/views/FrontBootstrap/ajaxPlanning.html.twig
{ %
    for ava in Availa %
} {
    start: ('{{ ava.start|date("Y") }}-{{ ava.start|date("m") }}-{{ ava.start|date("d") }}'),
    color: '{{ ava.color }}',
    rendering: 'background',
    informations: '{{ava.informations}}',
} { %
    if loop.last %
} { %
    else %
}, { % endif %
} { % endfor %
}
The Problem

Now, the thing is, when I change the view by selecting other month (june, july...) or other range (week, month...), the functionality doesn't work anymore. I know the problem comes from Jquery because I still have the attribute « data-informations » on the cells of others views. I first thought that the hover function doesn't work cause its targets elements that are on the DOM when the function is called. That's why I also try to declare the function and call it into viewRender parameter but it didn't solved the problem.

  //src/LD/PlatformBundle/Resources/views/Properties/view.html.twig
 $(document).ready(function() {
     // console.log(items);
     console.log(Availa);
     $('#calendar').fullCalendar({
         schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
         header: {
             left: 'prev,next today',
             center: 'title',
             right: 'month,agendaWeek,agendaDay,listMonth'
         },
         navLinks: true, // can click day/week names to navigate views
         businessHours: true, // display business hours
         editable: false,
         eventOverlap: false,
         events: [{ % include('FrontBootstrap/ajaxPlanning.html.twig') %
         }],
         eventRender: function(event, element) {
             $(element).attr('data-informations', event.informations);
         },
         viewRender: function(view, element) {
             console.log('ok');
             $('.fc-bgevent').hover(function() {
                 console.log('ok');
             });
             getDateInformations();
         },
         nextDayThreshold: "01:00:00"
     });
     $('.fc-view-container').prepend('<div id="informations-date"><span></span></div>');
     getDateInformations();
 });
 function getDateInformations() {
     $('#informations-date').css('visibility', 'hidden');
     $('.fc-bgevent').hover(function() {
         console.log('ok');
         var informations = $(this).attr('data-informations');
         console.log(informations);
         $('#informations-date span').text(informations);
         $('#informations-date').css('visibility', 'visible');
     }, function() {
         $('#informations-date').css('visibility', 'hidden');
     });
 }

I think there is surely a special feature of the hover function that I don't know.

Answer 1

You'd have to add the event handler in fullCalendar's eventAfterAllRender instead of viewRender because, as the documentation (https://fullcalendar.io/docs/viewRender) says, viewRender runs after the plain view has been drawn, but the events are not necessarily loaded into it at that time - that is done asynchronously, so there's a good chance your events are still not in the DOM at that time.

eventAfterAllRender: function(view)
{
  $('.fc-bgevent').hover(function() {
    console.log('ok');
  });
}

See also https://fullcalendar.io/docs/eventAfterAllRender

READ ALSO
jQuery resizable translateX [on hold]

jQuery resizable translateX [on hold]

currently I'm facing the issue that the resizable line (that ghost line) is way offset caused by transform: translateX is there any solution for that to recalculate the current position of the cursor?

33
How to make jquery intellisense work in visualstudio for js file

How to make jquery intellisense work in visualstudio for js file

I working on HTML and JS pages (not a project)

17
How do I disable vertical scroll on a website on desktop and laptop screen resolutions? [on hold]

How do I disable vertical scroll on a website on desktop and laptop screen resolutions? [on hold]

so we are designing a website for a client, we are building our design to a wordpress frame work, the problem is we need the website to be totally unscrollabe on the screen for desktops and laptops

38