首页 > 解决方案 > 触摸事件在 FullCalendar v.-3.9 中不起作用?

问题描述

我正在使用FullCalendar 3.9版本的插件来显示驱动程序事件。点击事件在桌面视图上起作用,但在移动设备上不起作用,因为在手机上触摸事件起作用。那么如何在日历上绑定触摸事件并显示数据。

eventClick:我使用两种方法fullCalendar({})

$("#openFancybox").fancybox();
  $("#openFancybox").click();

所以我想在点击时触发这些方法。但它没有开火。我也删除了所有方法,只是alert('test')但它也不起作用。没有出现错误我不知道是什么原因?

在此处输入图像描述

我的 JS 代码

    $('#calendar').fullCalendar(
             eventClick: function (calEvent, jsEvent, view) {
                $(this).css('border-color', 'yellow');
                url = '{{ route("boking-details", 'XXX') }}'.replace('XXX', calEvent.booking_id);
                $.fancybox.destroy();
                element = '<a id="openFancybox"  data-type="ajax" data-src="' + url + '" href="javascript:;"></a>'
                $(".element").html(element);
                $("#openFancybox").fancybox();
                $("#openFancybox").click();
            },
            eventDrop: function(event, delta, revertFunc, jsEvent, ui, view) {
                if (confirm("This booking has now been moved."+ " with booking time " + event.start.format() )) {
                    changeBooking(event, delta, revertFunc);

                    //savedrop(event.id,event.start,event.end);    
                } else {
                    $('.popover').popover('hide');
                    revertFunc();
                }
            },

            eventRender: function(eventObj, $el) {
              $el.popover({
                title: eventObj.title,
                content: eventObj.description,
                trigger: 'hover',
                placement: 'top',
                container: 'body'
              });
            },
            timeFormat : "H(:mm)",
            //slotLabelFormat:"HH:mm",
            displayEventTime: false,
            //  now: '2018-11-07',
            editable: true, // enable draggable events
            dragRevertDuration: 1000,
            aspectRatio: 2.5,
            scrollTime: '10:00', // undo default 6am scrollTime
            slotDuration: '00:15:00',
            slotLabelInterval: 15,
            header: {
                left: 'today, prev,next',
                center: 'title',
                right: 'timelineMonth,timelineWeek,timelineDay'
            },
            defaultView: 'timelineMonth',
            views: {
                timelineThreeDays: {
                    type: 'timeline',
                    duration: {days: 3}
                },
                timelineWeek: {
                    type: 'timeline',
                    dayOfMonthFormat: 'ddd DD/MM',
                    //titleFormat: '(d MMMM yyyy)'
                    //titleFormat:"HH",
                },
                timelineDay: {
                    type: 'timeline',
                    //timeFormat: 'H:mm',
                    slotLabelFormat:"HH",
                }
            },
            resourceLabelText: 'Drivers & Companion',
            events: '{{route("all-driver-calender",["type"=>"bookings"])}}&driver_id='+getDriverIdFromURL(),
            resources:'{{route("all-driver-calender",["type"=>'driverName'])}}&driver_id='+getDriverIdFromURL()
        });
    });

标签: jquerylaravelfullcalendarfullcalendar-4fullcalendar-3

解决方案


我通过设置解决了我的问题。它正在工作FullCalendar v-3.9。现在在移动设备上工作的每个按钮都非常小,比如 560 像素(4 英寸、5 英寸等)。

width:800px,
height:600px,

推荐阅读