Fullcalendar版本4 selectMirror无法正常工作

时间:2019-05-03 18:59:28

标签: jquery fullcalendar fullcalendar-scheduler fullcalendar-4

请问selectMirror无法在全日历模式下工作吗?没什么亮点!在我的控制台中加载脚本没有错误。

我的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迁移到脚本时,脚本中的所有内容都运行良好,但请选择Mirror。我不知道selectMirror在哪里发挥作用:我有正确的插件/ css吗?

有关如何解决这一问题的任何建议?

1 个答案:

答案 0 :(得分:1)

我知道了。不知道这是否会对将来的其他人有所帮助,但是我了解到eventRender与selectMirror结合使用。我的eventRender中有一行代码正在阻止显示镜像。编辑代码后,镜像会正确显示。