全日历月视图中的单日活动
我正在使用fullCalendar库来添加事件。 默认视图是month ，我正在从database加载数据。 此外，无论用户选择什么都存储在数据库中。 我在这里有两个问题。 首先，当页面加载时，库在同一天为同一event添加两行。 其次，我想限制用户在一天内添加single event 。 因此，没有一天会有多个事件。 我已经使用下面的代码来加载数据，并且还有点击事件。 
$('#calendar').fullCalendar({
header: {
left : 'prev,next',
center : 'title',
},
defaultView: 'month',
defaultDate: today,
selectable: true,
navLinks: true, // can click day/week names to navigate views
selectHelper: true,/*Load all the events from the database on page load*/
events: {
//Don't have to make an ajax call because full calendar will make the call
//Error and success functions are available.
//On success we will populate the data which is the temp's Availability.
url: loadDataUrl,
error: function(error) {
console.log("error == "+JSON.stringify(error));
},
success: function(data){
var title = 'Availability';
var eventData;
for(var j=0;j<data.length;j++)
{
// $('#calendar').fullCalendar( 'removeEvent', data[j]._id);
var startDate = data[j].date;
if (title) {
eventData = {
title: title,
start: startDate
};
$('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
}
$('#calendar').fullCalendar('unselect');
}
}
}, select: function(start, end,jsEvent,view) {
var check = moment(start, 'DD.MM.YYYY').format('YYYY-MM-DD');
var today = moment(new Date(), 'DD.MM.YYYY').format('YYYY-MM-DD');
if(check < today)
{
// Previous Day. show message if you want otherwise do nothing.
// So it will be unselectable
alert("cant select previous dates!");
$('#calendar').fullCalendar('unselect');
}
else
{
var title = 'Availability';
var eventData;
if (title) {
eventData = {
title: title,
start: start
};
$('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
sendData(start);
}
$('#calendar').fullCalendar('unselect');
}
} });
请帮助我解决这个问题，因为我无法弄清楚我哪里出错了。 如果您检查图片，则会创建two rows 。 但我不知道这是怎么回事。 此外，只有当我尝试加载动态数据时才会发生这种情况。 它适用于静态数据。
这是JSFiddle链接
http://jsfiddle.net/1fda25g1/10/
好吧，我终于得到了我的问题的答案。 我不得不在ajax的成功函数中调用fullCalendar function 。 我在下面提到了这一点：
var eventArr = [];
var eventData1 ;
$.ajax({
url: loadDataUrl,
datatype: 'json',
type: 'GET',
success: function(data)
{
eventArr = data;
eventData1 = eventArr;
console.log("event data == == "+eventData1);
//Full calendar library.
$('#calendar').fullCalendar({
header: {
left : 'prev,next',
center : 'title',
},
defaultView: 'month',
defaultDate: today,
selectable: true,
selectOverlap : false,
navLinks: true, // can click day/week names to navigate views
selectHelper: true,
events: eventData1, //This will load the events
select: function(start, end,jsEvent,view) {
console.log("View == = = ="+view);
var check = moment(start, 'DD.MM.YYYY').format('YYYY-MM-DD');
var today = moment(new Date(), 'DD.MM.YYYY').format('YYYY-MM-DD');
alert('Current view: ' + view.name);
if(check < today)
{
// Previous Day. show message if you want otherwise do nothing.
// So it will be unselectable
alert("cant select previous dates!");
$('#calendar').fullCalendar('unselect');
}
else {
var title = 'Availability';
var eventData;
if (title) {
eventData = {
title: title,
start: start
};
$('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
sendData(start);
}
$('#calendar').fullCalendar('unselect');
}
},
eventClick: function(calEvent, jsEvent, view) {
/**
* calEvent is the event object, so you can access it's properties
*/
if(confirm("Are you sure you want to delete the event " + calEvent.title + " ?")) {
// deleteTempAvailability(calEvent.start._d,calEvent.end._d);
deleteTempAvailability(calEvent.start._d);
// delete in frontend
$('#calendar').fullCalendar('removeEvents', calEvent._id);
}
},
editable: false,
eventLimit: true, // allow "more" link when too many events
});
},
failure: function(err)
{
alert("error == "+err);
}
});
并确保用户每天只能添加一个事件。 我所做的只是将selectOverlap设置为false 。