Question

我使用FullCalendar 2.6.1作为外部插件（只需使用fullcalendar员工将目录添加到myapp/client/）Meteor 1.2.1。我也使用jquery-ui-1.11.4。在我的日历中，我有一个奇怪的错误：在月视图的前2周（有些时候是3或4周）之后的任何一天我都不能放弃事件。我选择哪个mont并不重要。我有一个复制品。如果您想查看仅使用用户test@user.com和密码111登录http://85.143.219.249:4000/login并打开日历。

我也尝试使用包rzymek:fullcalendar但是存在同样的错误。

我记得我对fullcalendar的旧版本（2.2.0）没有这样的错误。

以下是我初始化日历的方法。模板：

<template name="calendar">
<div class="content">
    {{#pageTitle title="Calendar" }}{{/pageTitle}}
    <div class="row">
        <div class="col-lg-12">
            <div class="row">
                <div class="col-md-6">
                    <div class="hpanel">
                        <div class="panel-body">
                            <div id="external-events">
                                <strong>Click, Drop or Resize event on calendar!</strong>
                                <p>Message from functions:
                                    <br/>
                                    <div id="external-events">
                                        <p>Drag a event and drop into callendar.</p>
                                        {{#each workouts}}
                                        <div class='external-event h-bg-green text-white' id={{this._id}}>{{workoutName}}</div>
                                        {{/each}}
                                    </div>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-12">
            {{#panel title="Calendar"}}
                <div id="calendar"></div>
            {{/panel}}
        </div>
    </div>
</div>

和JS：

    Template.calendar.onRendered(function() {
    // Initialize i-check plugin
    $('.i-checks').iCheck({
        checkboxClass: 'icheckbox_square-green',
        radioClass: 'iradio_square-green'
    });

    // Initialize the external events
    $('#external-events div.external-event').each(function() {

        // store data so the calendar knows to render an event upon drop
        $(this).data('event', {
            title: $.trim($(this).text()), // use the element's text as the event title
            stick: true // maintain when user navigates (see docs on the renderEvent method)
        });

        // make the event draggable using jQuery UI
        $(this).draggable({
            zIndex: 1111999,
            revert: true,      // will cause the event to go back to its
            revertDuration: 0  //  original position after the drag
        });

    });

    // Re-rendering calendar events when collection changed
    //var calendar = this.$('.fc');
    this.autorun(function() {
        $('#calendar').fullCalendar('refetchEvents');
    });

    // Initialize the calendar

    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();

    $('#calendar').fullCalendar({
        header: {
            left: 'title',
            right: 'today prev,next'
        },
        lang: 'ru',
        timezone: 'local',
        fixedWeekCount: false,
        editable: true,
        droppable: true,
        displayEventTime: false,
        allDayDefault: true,
        color: '#62cb31',
        drop: function(date) {
            var newCalendarEvent = {};
            newCalendarEvent.start = date.format();
            newCalendarEvent.eventSourceId = this.id;
            newCalendarEvent.eventSourceType = 'workout';
            newCalendarEvent.title = $(this).text();
            newCalendarEvent.color = '#62cb31';
            Meteor.call('calendarEventAdd', newCalendarEvent);
        },
        eventReceive: function(event) {
            var calendarEventId = event._id;
            var calendarEventDate = event.start.format();
            var calendarEventName = event.title;
            var calendarEventColor = '#62cb31';
            //Meteor.call('calendarEventAdd', calendarEventDate, calendarEventId, calendarEventName, calendarEventColor);
            //console.log(calendarEventDate);
        },
        events: function(start, end, timezone, callback) {
            var calendarEvents = []; 
            _.each(Calendar.find({}, {fields: {start: 1, title: 1, color: 1}}).fetch(), function(value, key, list) {
                calendarEvents.push(value);
            });
            callback(calendarEvents);
        },
        eventDragStart: function(event, jsEvent, ui, view) {
            $(this).qtip().hide();
        },
        eventDrop: function(event, delta) {
            var eventId = event._id;
            var newEventDate = event.start.format();
            console.log(event);
            console.log(delta);
            Meteor.call('calendarEventUpdate', eventId, newEventDate);
        },
        eventRender: function(event, element) {
            $(element).css({backgroundColor: '#62cb31', borderColor: '#62cb31'});
            var content = '<button class="btn btn-xs btn-default delCalendarEvent" id="' + event._id + '"><i class="fa fa-trash"></i></button>';
            element.qtip({
                show: {
                    event: 'click',
                    solo: true
                },
                hide: {
                    event: 'click unfocus'
                },
                content: content,
                style: {
                    classes: 'qtip-bootstrap'
                },
                position: {
                    my: 'bottom center',
                    at: 'top center',
                    container: element
                }
            });
        }
    });

});
Template.calendar.events({
    'click .delCalendarEvent': function(event, template) {
        var eventId = event.currentTarget.id; 
        var calendar = template.$('.fc');
        //Meteor.call('calendarEventDel', eventId);
        Meteor.call('calendarEventDel', eventId, function(error, result) {
            if (error) {
                console.log(error);
            } else {
                calendar.fullCalendar('removeEvents', eventId);
            }
        });
    }
});

Answer 1

这段代码对我有用。尝试将其添加到css文件中：

body .fc {

overflow:auto;

}

Answer 2

我也有这个问题，发现它是由父容器100％高度引起的。我注意到不允许拖动的一周行不在我的页面加载的初始视图中。我的body标签被设置为100％高度，在查看浏览器后，dev工具看起来更像是一个100的视图高度。删除它工作正常。如果您遇到同样的问题，我会打开开发工具，向下滚动，然后浏览任何父母的不同标签，看看哪些似乎在同一点上切断了您无法拖动您的事件。

Fullcalendar流星不能在月视图中将事件降至2周以下

2 个答案: