FullCalendar版本4 SelectMirror不起作用



是否有任何特殊原因为什么selectmirror在FullCalendar中不起作用?没有什么亮点!没有错误将我的脚本加载到我的控制台中。

我在EventRender,EventDrop,EventResize和Select功能中确实有很多脚本。他们都可以正常工作。如果我需要包括它们,我会的。我只是不确定这是否会根据SelectMirror的设计方式引起冲突。

<link href="added-assets/plugins/fullcalendar-scheduler-4.1.0/packages/core/main.css" rel="stylesheet" />
<link href="added-assets/plugins/fullcalendar-scheduler-4.1.0/packages/daygrid/main.css" rel="stylesheet" />
<link href="added-assets/plugins/fullcalendar-scheduler-4.1.0/packages/timegrid/main.css" rel="stylesheet" />
<script src="added-assets/plugins/fullcalendar-scheduler-4.1.0/packages/core/main.js" type="text/javascript"></script>
<script src="added-assets/plugins/fullcalendar-scheduler-4.1.0/packages/interaction/main.js" type="text/javascript"></script>
<script src="added-assets/plugins/fullcalendar-scheduler-4.1.0/packages/daygrid/main.js" type="text/javascript"></script>
<script src="added-assets/plugins/fullcalendar-scheduler-4.1.0/packages/timegrid/main.js" type="text/javascript"></script>
<script src="added-assets/plugins/fullcalendar-scheduler-4.1.0/packages/resource-common/main.js" type="text/javascript"></script>
<script src="added-assets/plugins/fullcalendar-scheduler-4.1.0/packages/resource-daygrid/main.js" type="text/javascript"></script>
<script src="added-assets/plugins/fullcalendar-scheduler-4.1.0/packages/resource-timegrid/main.js" type="text/javascript"></script>

<script>
document.addEventListener('DOMContentLoaded', function() {
 var calendar_full = document.getElementById('calendar_full');
    var calendar = new FullCalendar.Calendar(calendar_full, {
        selectMirror: true,
        selectable: true,
        editable: true,
        plugins: ['interaction', 'resourceDayGrid', 'resourceTimeGrid'],
        header: {
            right: 'prevYear,prev,next,nextYear,today',
            left: 'title',
            center: 'resourceTimeGridDay,resourceTimeGridWeek,resourceDayGridMonth'
        },
        defaultView: 'resourceTimeGridWeek',
        slotDuration: "<?php echo $location->data()->calendar_slot_duration; ?>",
        snapDuration: "<?php echo $location->data()->calendar_snap_duration; ?>",
        nowIndicator: true,
        minTime: "<?php echo $location->data()->calendar_start; ?>",
        maxTime: "<?php echo $location->data()->calendar_end; ?>",
        hiddenDays: $.parseJSON('[' + "<?php echo $location->data()->calendar_hide_days_of_week; ?>" + ']'),
        groupByResource: true,
        eventLimit: true,
        schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
        events: {
            url: 'ajax_get_json.php?what=location_appointments'
        },
        resources: {
            url: "ajax_get_json.php?what=schedule_providers_at_location"
        },
        resourceRender: function(renderInfo) {
            var default_provider = "<?php echo $default_provider; ?>";
            if (default_provider) {
                //change color of resource to match selected contact assigned to provider
                if (renderInfo.resource.id == default_provider) {
                    renderInfo.el.style.backgroundColor = 'rgb(233,237,239)';
                }
            }
        },
        dateClick: function(info) {
            if (info.view.type === "resourceDayGridMonth") {
                calendar.gotoDate(info.date);
                calendar.changeView('resourceTimeGridWeek');
            }
        },
        loading: function(bool) {
            if (bool) {
                $('.loader').show();
                $('#show_cancelled_appts').hide();
                $('#show_rescheduled_appts').hide();
            } else {
                $('.loader').hide();
                $('#show_cancelled_appts').show();
                $('#show_rescheduled_appts').show();
            }
        },
        datesRender: function(info) {

            if (info.view.type === "resourceDayGridMonth") {
                var date = calendar.getDate();
                var b = date.toISOString();
                calendar_mini.gotoDate(b);
            }
        }
    });
    calendar.render();

脚本中的所有内容都可以从版本3移动时,但是SelectMirror。我不知道SelectMirror在哪里发挥作用:我有正确的插件/CSS吗?

关于如何解决此问题的任何建议?

我弄清楚了。不确定这是否会在将来对其他任何人有所帮助,但是我了解到EventRender与SelectMirror结合使用。我的事件中有一系列代码,使镜子无法显示。一旦我编辑了代码,镜子就会正确显示。

相关内容

  • 没有找到相关文章

最新更新