如何让 FullCalendar 在移动设备上工作？

Posted 2023-05-08

【中文标题】如何让 FullCalendar 在移动设备上工作？

【英文标题】：How to make FullCalendar work for mobile on touch event?

【发布时间】：2016-04-19 11:52:25

【问题描述】：

我需要将 drop 事件添加到 fullcalendar 以用于移动设备。我为此使用Jquery UI Touch Punch。

我在这里找到答案1、2、3、4。它适用于 drop/drag/resize 事件，但不适用于日历。

我的脚本顺序：

    <script src="../static/js/jQuery-2.1.4.min.js"></script>
    <script src="../static/js/bootstrap.min.js"></script>
    <script src="../static/js/jquery-ui.min.js"></script>
    <script src="../static/js/jquery.ui.touch-punch.min.js"></script>
    <script src="../static/js/app.min.js"></script>
    <script src="../static/js/MyMain.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.min.js"></script>
    <script src="../static/js/fullcalendar.min.js"></script>
    <script src='../static/js/fullcalendarlang-all.js'></script>
    <script>

  $( document ).ready(function() 
      function ini_events(ele) 
           ele.each(function () 
              var eventObject = 
                  title: $.trim($(this).text()) 
              ;
              $(this).data('eventObject', eventObject);
              $(this).draggable(
                  zIndex: 1070,
                  revert: true, 
                  revertDuration: 0  
              );
          );
       

       ini_events($('#external-events div.external-event'));
       $('#calendar').fullCalendar(
           events: JSON.parse(calendarjsonres),
           editable: true,
           eventDrop: function(event, delta, revertFunc) ...,
           eventResize: function(event, delta, revertFunc) ...,
           eventClick: function(calEvent, jsEvent, view) ...,
           droppable: true,
           drop: function (date, allDay) ...
       );
  );
</script>

提前致谢。

【参考方案1】：

日历不使用 jQueryUI 进行内部拖动，您要么必须检查 github 以了解问题的状态/报告，要么自己制作功能。