I am currently working away with FullCalendar, which is pretty cool and has done a lot of neat stuff for me. The only problem I’m having is that if I edit an event, and then try and create another event the javascript seems to hold onto the initial events data.
I am using calendar.fullCalendar(‘unselect’) when I need the link to end, but it doesn’t seem to make a difference no matter what I do. I’m hoping you guys might be able to see something I’m overlooking.
<script type='text/javascript'>
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultView: 'agendaWeek',
selectable: true,
unselectAuto: true,
selectHelper: true,
editable: true,
select: function(start, end, allDay) {
//var title = prompt('Event Title:');
//var desc = prompt('Event Description:');
//calendar.fullCalendar('unselect');
$('#eventStart').val(start);
$('#eventEnd').val(end);
$('#eventAllDay').val(allDay);
$('#formName').fadeIn();
$('.closeSchedule a').click(function(){
$('#formName').fadeOut('slow');
$('#calendar').fullCalendar('unselect');
//alert(jsEvent);
});
},
events: [
<?php
$first = true;
foreach ($events as $event)
{
if ($first == true)
{
$comma = '';
$first = false;
}
else
{
$comma = ',';
}
echo $comma."
{
id: '".$event->id."',
title: '".addSlashes($event->title)."',
start: '".$event->start."',
end: '".$event->end."',
allDay: ".$event->allDay."
}";
$first = false;
}
?>
],
eventClick: function(event) {
//alert(event.id);
$.ajax({
url: './schedule/getEdit/'+event.id,
success: function(data) {
var formEmpty = $('formName').html();
$('#formName').html(data);
$('#formName').fadeIn('fast');
$('.closeSchedule a').click(function(){
$('#formName').fadeOut('slow');
$('#calendar').fullCalendar('unselect');
});
$('#deleteEvent').live('click', function(){
var answer = confirm("Are you sure you wish to delete this event?")
if (answer){
$.ajax({
type: "POST",
url: "./schedule/deleteEvent/"+event.id,
success: function(msg){
$('#formName').fadeOut('fast');
calendar.fullCalendar( 'removeEvents', [event.id ] )
$('#calendar').fullCalendar('unselect');
}
});
}
});
$('#updateEvent').live('click', function(){
var title = $('#eventName').val();
var trainerID = $('#eventTrainer').val();
var trainer = $('#eventTrainer option:selected').text();
var classID = $('#eventType').val();
var eventType = $('#eventType option:selected').text();
var eventStart = $('#eventStart').val();
var eventEnd = $('#eventEnd').val();
var eventAllDay = $('#eventAllDay').val();
if (eventAllDay == 'false')
{
allDay = false;
}
else
{
allDay = true;
}
// This runs the ajax to add the event to the database.
newData = 'title='+title+'&trainerID='+trainerID+'&classID='+classID+'&start='+eventStart+'&end='+eventEnd+'&allDay='+allDay
$.ajax({
type: "POST",
url: "./schedule/updateEvent/"+event.id,
data: newData,
success: function(msg){
event.title = title;
calendar.fullCalendar('rerenderEvents');
//calendar.fullCalendar('unselect');
$('#calendar').fullCalendar('unselect');
}
});
$('#formName').fadeOut('fast');
$('#eventName').val('');
$('#eventTrainer').val();
$('#eventType').val();
});
}
});
},
eventDrop: function(event,dayDelta,minuteDelta,allDay,revertFunc) {
newData = 'start='+event.start+'&end='+event.end+'&allDay='+allDay
$.ajax({
type: "POST",
url: "./schedule/updateEventTime/"+event.id,
data: newData,
success: function(msg){
}
});
},
eventResize: function(event,dayDelta,minuteDelta,revertFunc) {
newData = 'start='+event.start+'&end='+event.end+'&allDay='+event.allDay
$.ajax({
type: "POST",
url: "./schedule/updateEventTime/"+event.id,
data: newData,
success: function(msg){
}
});
}
});
$('#submitEvent').click(function(){
$('#calendar').fullCalendar('unselect');
var title = $('#eventName').val();
var trainerID = $('#eventTrainer').val();
var trainer = $('#eventTrainer option:selected').text();
var classID = $('#eventType').val();
var eventType = $('#eventType option:selected').text();
var eventStart = $('#eventStart').val();
var eventEnd = $('#eventEnd').val();
var eventAllDay = $('#eventAllDay').val();
if (eventAllDay == 'false')
{
allDay = false;
}
else
{
allDay = true;
}
// This runs the ajax to add the event to the database.
newData = 'title='+title+'&trainerID='+trainerID+'&classID='+classID+'&start='+eventStart+'&end='+eventEnd+'&allDay='+allDay
$.ajax({
type: "POST",
url: "./schedule/addEvent",
data: newData,
success: function(msg){
var description = '<ol><li>'+title+'</li><li>'+trainer+'</li><li><a href="#" target="_blank">'+eventType+'</a></li><li class="eventID hide">'+msg+'</li>';
calendar.fullCalendar('renderEvent',
{
id: msg,
title: title,
description: description,
start: eventStart,
end: eventEnd,
allDay: allDay
},
true // make the event "stick"
);
calendar.fullCalendar('unselect');
//calendar.fullCalendar( 'rerenderEvents' )
}
});
$('#formName').fadeOut('fast');
$('#eventName').val('');
$('#eventTrainer option:selected').removeAttr('selected');
$('#eventType option:selected').removeAttr('selected');
});
});
</script>
At this point, I feel like I’ve tried it all, and I’m just hoping a fresh set of eyes will see what I missed.
Ok took a quick look it looks like you aren’t initializing the form with a blank form for the add action in the “select:” function of your full calendar:
In your event click you are doing this:
I don’t see where you are clearing that with a blank form for a new event. (might have just missed it there is a lot of code there)
Let me know.