我使用FullCalendar 2.6.1
作爲外部插件(只需將目錄添加到帶有fullcalendar人員的myapp/client/
)與Meteor 1.2.1
。我也使用jquery-ui-1.11.4。在我的日曆中,我有一個奇怪的錯誤:我不能在月視圖中的第2周(有些時候是3或4周)之後將活動放到任何一天。而且我選擇哪個蒙太奇並不重要。 我有一個複製品。如果你想看到只需登錄用戶[email protected]
和密碼111
到http://85.143.219.249:4000/login
並打開日曆。Fullcalendar Meteor不能在第2個月的第一週內刪除事件
我也嘗試使用包rzymek: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);
}
});
}
});