时间戳

首页 > 解决方案 > 全日历 | 视图更改后 Jquery 悬停功能不再起作用

javascript - 全日历 | 视图更改后 Jquery 悬停功能不再起作用

问题描述

上下文

大家好你们好，

我正在使用Fullcalendar在 Symfony 3 下开发的 CRM 应用程序中显示物业（房屋）的可用性和预订情况。

日历功能正常。我们有.fc-event-container元素来显示预订和 .fc-bgevent 的可用性，如下所示。

全日历.png

我之后添加的是通过悬停单元格 (.fc-bgevent) 来了解谁设置了可用性以及何时设置的可能性。这些信息从数据库中检索，在每个单元格（.fc-bgevent）的渲染期间存储到自定义属性“数据信息”中，并最终显示在日历视图容器上方，如下所示。

fullcalendar-hover.png

为了向您展示我是如何实现这一目标的，我将使用文件的代码放在下面。

控制器

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

看法

//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>

活动

    //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 %
}

问题

现在，问题是，当我通过选择其他月份（六月、七月……）或其他范围（周、月……）来更改视图时，该功能不再起作用。我知道问题来自 Jquery，因为我在其他视图的单元格上仍然有属性“数据信息”。我首先认为悬停函数不起作用会导致调用该函数时它的目标元素位于 DOM 上。这就是为什么我也尝试声明该函数并将其调用到viewRender参数中，但它并没有解决问题。

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

我认为悬停功能肯定有一个我不知道的特殊功能。

标签： javascriptjquerysymfonyfullcalendar

解决方案

您必须在 fullCalendar 中添加事件处理程序，eventAfterAllRender而不是viewRender因为正如文档（https://fullcalendar.io/docs/viewRender）所说，viewRender在绘制普通视图之后运行，但事件不一定加载到那时它 - 这是异步完成的，所以很有可能你的事件当时仍然不在 DOM 中。

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

另请参阅https://fullcalendar.io/docs/eventAfterAllRender

推荐阅读