JS FullCalendar 日期和事件双击函数

Question

我见过几种处理这些操作的解决方案，但大多数解决方案都处理早于 V4 的版本。

我想添加处理一天双击和事件双击的函数。

下面是我当前的设置没有处理这些事件的部分。

<div id="calendar"></div>
<script src="./vendor/jquery/jquery.min.js"></script>
<script src="./vendor/fullcalendar/core/main.min.js"></script>
<script src="./vendor/fullcalendar/daygrid/main.min.js"></script>
<script src="./vendor/fullcalendar/timegrid/main.min.js"></script>
<script src="./vendor/fullcalendar/interaction/main.min.js"></script>
<script src="./vendor/fullcalendar/moment/main.min.js"></script>
<script>
    var time = new Date();
    var now = time.getHours()+":00:00";
      document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');

        var calendar = new FullCalendar.Calendar(calendarEl, {
            plugins: ['dayGrid','timeGrid','interaction'],

            height: 550,
            header:{
                left:   'title',
                center: '',
                right: 'today dayGridMonth timeGridWeek timeGridDay prev,next'
            },
            minTime: '05:00:00',
            maxTime: '22:00:00',
            nowIndicator: true,
            scrollTime: now,
            selectable: true,
            events: myEvents,
            slotEventOverlap: false,
            views:{
                dayGrid:{eventLimit:4},
            },
        });
        calendar.render();
      });
</script>

现在我尝试了几种解决方案，第一个是下面返回的错误 "fullCalendar is not a function"

$('#calendar').fullCalendar({
   eventRender: function(event, element) {
      element.bind('dblclick', function() {
         alert('double click!');
      });
   }
})

下一个是非功能性的：

        eventRender: function(event, element) {
             $(element).on({
                 click: function() {
                     // Handle click...
                 },
                 dblclick: function() {
                     // Handle double click...
                 }
             });
        },

我认为我的问题可能源于版本差异。我希望能链接到处理 V4 中此功能的示例或其他解决方案。

编辑 1 因此我目前可以使用以下内容为 clicking/double-clicking 一天或事件发出警报。出于某种原因，dayRender 函数仅在单击一天的下半部分时触发。我需要这方面的帮助。

        eventRender: function(info) {
          info.el.addEventListener('click', function() {
                clickCount++;
            if (clickCount === 1) {
                singleClickTimer = setTimeout(function() {
                    clickCount = 0;
                    alert('single click');
                }, 400);
            } else if (clickCount === 2) {
                clearTimeout(singleClickTimer);
                clickCount = 0;
                alert('double click');
            }          
          });
        },

        dayRender: function(info) {
            console.log(info.el);
          info.el.addEventListener('click', function() {
            clickCount++;
            if (clickCount === 1) {
                singleClickTimer = setTimeout(function() {
                    clickCount = 0;
                    alert('single click');
                }, 400);
            } else if (clickCount === 2) {
                clearTimeout(singleClickTimer);
                clickCount = 0;
                alert('double click');
            }          
          });
        },

Answer 1

eventRender 函数接收一个包含事件和元素对象的信息参数。您需要使用类似：

eventRender: function(info) {
    info.el.addEventListener('click', function() {
        alert('click')
    });
}

看看我制作的这个 jsfiddle：https://jsfiddle.net/6jc7ngLo/

JS FullCalendar 日期和事件双击函数

JS FullCalendar Day & Event Double Click Functions

javascript

jquery

fullcalendar