Fullcalendar Meteor can't drop event below 2 first week in month view - meteor

Question

I use FullCalendar 2.6.1 as external plugin(just add directory to myapp/client/ with fullcalendar staff) with Meteor 1.2.1. I also use jquery-ui-1.11.4. And in my calendar I have a strange bug: I can't drop event to any day after first 2 (some times 3 or 4) weeks in month view. And it doesn't matter which mont I choose.
I have a reproduction. If you want to see just login with user test#user.com and password 111 to http://85.143.219.249:4000/login and open calendar.
I also try to use package rzymek:fullcalendar but same bug is present.
As I remember I haven't such bug with old version(2.2.0) of fullcalendar.
Here is how I initialize calendar.
Template:
<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>
And 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

This piece of code works for me.
Try to add this to css file:
body .fc {
overflow:auto;
}

Answer 2

I also had this issue and found that it was caused by a parent container being 100% height. I noticed that the week rows that did not allow a drag were not in my initial view on page load.My body tag was being styled as 100% height which after looking at the browser dev tools looked more like a view height of 100. After removing that it worked fine. If you are having the same issue i would open the dev tools, scroll down, and then run through the different tags of any parents to see which ones seem to cut off at the same point you cannot drag your events.