Question

我在自己的Tab中有几个FullCalendar实例。首先当我切换标签时，日历没有显示，所以我添加了这个部分，一旦你点击标签就会渲染日历

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    var redrawcal = $(this).attr('href');
    redrawcal = redrawcal.substring(1,redrawcal.length);
    $('#calendar_'+redrawcal).fullCalendar('render');
    $('.fc-today').removeClass('fc-today');
});

这适用于第一个标签后的每个标签，但第一个标签的日历活动时间不正确。

如下图所示，第二个标签的事件是正确的：

但第一个标签不会重新呈现事件正确，如果切换标签，初始放置位置和位置完全相同，如下图所示：

我有以下代码，以便在首次创建日历之后呈现日历：

$(function(){
    //first tab's calander is not rendering correctly, this will make it show correct from the start
    <?php $branch = $branches[0]; ?>
    <?php $branch_studio_id = str_replace(" ", "_", $branch['branch_studio_name']); ?>
    <?php $branch_studio_id = preg_replace("/[^a-zA-Z]/", "", $branch_studio_id); ?>

    $('#calendar_<?= $branch_studio_id; ?>').fullCalendar('render');
});

对于此示例，日历的ID为calendar_Centurion，PHP只删除空格和特殊字符

我也试过这个：

$('#calendar_<?= $branch_studio_id; ?>').fullCalendar('rerenderEvents');

但我仍然有同样的结果。两个日历中的两个事件在同一天完全相同，所有信息都相同

如果只有一个标签，则会在没有额外标签的情况下将其打破以重新呈现日历。

我已经基本上尝试了所有我能找到的东西，并且我可以想到这可能有所帮助，但没有积极的结果。

不幸的是，我不能创建一个这样的小提琴，因为它需要很长时间才能这样做，并且实际的代码/项目尚未对公众开放。

我希望这很容易解决。

提前完成！

更新下面是我的日历的HTML和JS代码

<?php $branch_studio_id = str_replace(" ", "_", trim($branch['branch_studio_name'])); ?>
<?php $branch_studio_id = preg_replace("/[^a-zA-Z]/", "", $branch_studio_id); ?>

<div class="tab-pane <?=($x == 1) ? 'active' : '' ?>" id="<?=$branch_studio_id ?>">
    <div class="row">
        <div class="col-md-9">
            <div id="calendar_<?= $branch_studio_id ?>"></div>
        </div>
        <div class="col-md-3">
            <p class="h4 text-light">Classes not on timetable</p>
            <hr />
            <div id='external-events_<?=$branch_studio_id ?>'>
                <?php foreach ($classes_notimetable as $class) :?>
                    <?php if ($class['studio_id'] == $branch['studio_id']) : ?>
                        <div class="external-event label label-success" data-event-class="fc-event-success" data-class-id="<?=$class['id']?>"><?=$class['class_name'] ?></div>
                    <?php endif;?>
                <?php endforeach;?>
                <hr />
            </div>
        </div>
    </div>
</div>



<script type="text/javascript">
    (function($) {

        'use strict';

        var initCalendarDragNDrop<?=$x;?> = function() {
            $('#external-events_<?=$branch_studio_id ?> div.external-event').each(function() {
                // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
                // it doesn't need to have a start or end
                var eventObject<?=$x;?> = {
                    title : $.trim($(this).text()), // use the element's text as the event title
                };
                // store the Event Object in the DOM element so we can get to it later
                $(this).data('eventObject', eventObject<?=$x;?>);
                // make the event draggable using jQuery UI
                $(this).draggable({
                    zIndex : 999,
                    revert : true,
                    revertDuration:0
                });
            });
        };

        var initCalendar<?=$x;?> = function() {
            var $calendar<?=$x;?> = $('#calendar_<?=$branch_studio_id ?>');
            var date = new Date();
            var daynum = date.getDay();
            var d = date.getDate();
            var m = date.getMonth();
            var y = date.getFullYear();

            $calendar<?=$x;?>.fullCalendar({
                header: {left:   '', center: '', right:  ''},
                defaultView: 'agendaWeek',
                timeFormat: 'HH:mm',
                slotDuration: '00:10:00',
                snapDuration: '00:05:00',
                firstDay : 1,
                columnFormat: 'ddd',
                minTime:'<?= (isset($school_custom['school_from_hour'])) ? $school_custom['school_from_hour'] : '08'; ?>:<?= (isset($school_custom['school_from_minutes'])) ? $school_custom['school_from_minutes'] : '00'; ?>',
                maxTime: '<?= (isset($school_custom['school_to_hour'])) ? $school_custom['school_to_hour'] : '21'; ?>:<?= (isset($school_custom['school_to_minutes'])) ? $school_custom['school_to_minutes'] : '00'; ?>',
                allDaySlot: false,
                defaultTimedEventDuration: '01:00:00',
                forceEventDuration:true,
                editable : true,
                eventDrop: function(event) {
                        var eventid = event.id; 
                        var eventday = (event.start._d).getDay();
                        var eventstarthour = (event.start._d).getHours()-2;
                        var eventstartminute = (event.start._d).getMinutes();
                        var eventendhour = (event.end._d).getHours()-2;
                        var eventendminute = (event.end._d).getMinutes();
                        $('').postJsonCheck('classes/update_class_times', {event_id: eventid, event_day:eventday, event_starthour:eventstarthour,event_startminute:eventstartminute,event_endhour:eventendhour,event_endminute:eventendminute}, function(data){

                        });                                     
                    },
                droppable : true, // this allows things to be dropped onto the calendar !!!
                drop : function(date) {// this function is called when something is dropped
                    var $externalEvent = $(this);

                    // retrieve the dropped element's stored Event Object
                    var originalEventObject = $externalEvent.data('eventObject');

                    // we need to copy it, so that multiple events don't have a reference to the same object
                    var copiedEventObject = $.extend({}, originalEventObject);

                    // assign it the date that was reported
                    copiedEventObject.start = date;
                    //copiedEventObject.allDay = allDay;
                    copiedEventObject.className = $externalEvent.attr('data-event-class');

                    var classid = parseInt($(this).attr('data-class-id'));  
                    copiedEventObject.id = classid;

                    // render the event on the calendar
                    // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
                    $('#calendar_<?=$branch_studio_id ?>').fullCalendar('renderEvent', copiedEventObject, true);

                    //Update DB
                        var eventday = (copiedEventObject.start._d).getDay();
                        var eventstarthour = (copiedEventObject.start._d).getHours()-2;
                        var eventstartminute = (copiedEventObject.start._d).getMinutes();
                        var eventendhour = (copiedEventObject.start._d).getHours()-1;
                        var eventendminute = (copiedEventObject.start._d).getMinutes();
                        $('').postJsonCheck('classes/add_class_timetable', {class_id: classid, event_day:eventday, event_starthour:eventstarthour,event_startminute:eventstartminute,event_endhour:eventendhour,event_endminute:eventendminute}, function(data){

                        }); 

                    //remove the event from the not on timbetable list
                    $(this).remove();

                },
                eventResize: function(event, delta, revertFunc) {
                    var classid = event.id; 
                    var eventendhour = (event.end._d).getHours()-2;
                    var eventendminute = (event.end._d).getMinutes();
                    $('').postJsonCheck('classes/update_class_duration', {class_id: classid, event_endhour:eventendhour,event_endminute:eventendminute}, function(data){

                    }); 

                },
                events : [<?php $z = 0;?>
                    <?php foreach ($classes as $class): ?>
                        <?php $z++;?>
                        <?php if ($class['studio_id'] == $branch['studio_id']) : ?>
                            {
                                id: <?=$class["day_id"]?>,
                                title: '<?=$class["class_name"]?>',
                                start: new Date(y, m, d-(daynum-<?=$class["day"]?>), '<?=$class["start_hour"]?>', '<?=$class["start_minute"]?>'),
                                end: new Date(y, m, d-(daynum-<?=$class["day"]?>), '<?=$class["end_hour"]?>', '<?=$class["end_minute"]?>')
                            }
                        <?php if ($z < count($classes))echo ","?>
                        <?php endif;?>
                    <?php endforeach; ?>]
                });
            };

            $(function() {
                initCalendar<?=$x;?>();
                initCalendarDragNDrop<?=$x;?>();
            });

        }).apply($(this), [jQuery]);

</script>

*请注意，上述代码之外还有一个php foreach循环，因此每个日历都会复制此代码，每个日历都有一个在日历ID中使用的唯一$branch_studio_id

Jquery完整日历插件无法呈现第一个标签

0 个答案: