我在我的项目中使用JQuery fullCalendar。我会直接解决我的问题。
每当我创建一个新的日历事件,并成功将其渲染到日历视图,然后尝试调整新渲染的事件的大小,一个事件也会继续调整大小。
所以我的代码是如何呈现创建的事件。
这第一个代码是select事件,我可以突出显示一系列日期和时间。
$('#calendar').fullCalendar({
select: function(start, end){
if (start.format("YYYY-MM-DD") == end.format("YYYY-MM-DD")) {
$('#createscheduleModal').modal('show'); // opens bootstrap modal to add title
eventData = {
id: eventCount + 1,
date : start.format("YYYY-MM-DD"),
start : start.format("YYYY-MM-DD HH:mm:ss"),
end : end.format("YYYY-MM-DD HH:mm:ss"),
teacher : auth_id
}
}else{
$('.calendar-view').fullCalendar('unselect');
}
eventCount++;
},
});
然后在选择日期范围后,将弹出一个模态,以便用户可以输入日历事件的标题。在模态中,有一个带id="btn-save-sched"
的按钮,当用户单击按钮时,它会将日历事件保存到数据库并将其呈现给日历。这是
$('#btn-save-sched').click(function(){
eventData.title = $('#event_name').val(); // add title to eventData object
if ($('#event_name').val() == "" || $('#event_name').val() == null) {
swal('Ooops!','Please enter an event name','error');
}else{
$.ajax({
url : teacher_ajax,
type : 'POST',
data : eventData,
success : function(res){
eventData.editable = true; //set this event to be editable
$('.calendar-view').fullCalendar('renderEvent', eventData, true);
$('#event_name').val('');
$('#createscheduleModal').modal('hide');
}
})
}
});
所以上面的代码成功地将日历事件呈现到日历中,然后当我尝试调整这个新创建的事件的大小时,另一个事件会继续与新事件一起调整大小。
请在下面看到我添加新活动时发生的事情
谢谢你们!