Using fullcalendar with php scripts for submitting the ajax through to php/myql connection.
I've added a drag and drop feature to the page/fullcalendar and it renders fine on the page, works, and no problems. When you normally click and type an event, its fires the script and uses PHP to add via mysql.
The problem is, once the drag and drop element has been dropped on the calendar, I need to execute the same script as if you were to use when its clicked and typed on. I might have been working on this for too long as now I've confused myself!
Script is:
<script>
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
// initialize the external events
// -----------------------------------------------------------------
$("#external-events .fc-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: 999,
revert: true, // will cause the event to go back to its
revertDuration: 0 // original position after the drag
});
});
var calendar = $('#calendar').fullCalendar({
editable: true,
droppable: true, // this allows things to be dropped onto the calendar
drop: function() {
// is the "remove after drop" checkbox checked?
if ($('#drop-remove').is(':checked')) {
// if so, remove the element from the "Draggable Events" list
$(this).remove();
}
},
defaultView: 'agendaWeek',
nowIndicator: true,
weekends: false,
firstday: 1,
forceEventDuration: true,
timezoneParam: 'UTC',
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
businessHours: {
// days of week. an array of zero-based day of week integers (0=Sunday)
dow: [ 1, 2, 3, 4, 5 ], // Monday - Friday
start: '07:00', // a start time (10am in this example)
end: '19:00', // an end time (6pm in this example)
},
events: "get/engineer_events.php",
eventRender: function(event, element, view) {
if (event.allDay === 'true') {
event.allDay = true;
} else {
event.allDay = false;
}
},
selectable: true,
selectHelper: true,
select: function(start, end, allDay) {
var title = prompt('Event Title:');
if (title) {
var start = $.fullCalendar.formatDate(start, "Y-MM-DD HH:mm:ss");
var end = $.fullCalendar.formatDate(end, "Y-MM-DD HH:mm:ss");
$.ajax({
url: 'process/add_events.php',
data: 'title='+ title+'&start='+ start +'&end='+ end,
type: "POST",
success: function(json) {
alert('Added Successfully');
}
});
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
},
true
);
}
calendar.fullCalendar('unselect');
},
editable: true,
eventDrop: function(event, delta) {
var start = $.fullCalendar.formatDate(event.start, "Y-MM-DD HH:mm:ss");
var end = $.fullCalendar.formatDate(event.end, "Y-MM-DD HH:mm:ss");
$.ajax({
url: 'process/update_events.php',
data: 'title='+ event.title+'&start='+ start +'&end='+ end +'&id='+ event.id ,
type: "POST",
success: function(json) {
alert("Your event has been added.");
}
});
},
eventClick: function(event) {
var decision = confirm("Woah, you're about to delete this, are you sure?");
if (decision) {
$.ajax({
type: "POST",
url: "process/delete_event.php",
data: "&id=" + event.id,
success: function(json) {
$('#calendar').fullCalendar('removeEvents', event.id);
alert("Updated successfully");}
});
}
},
eventResize: function(event) {
var start = $.fullCalendar.formatDate(event.start, "yyyy-MM-dd HH:mm:ss");
var end = $.fullCalendar.formatDate(event.end, "yyyy-MM-dd HH:mm:ss");
$.ajax({
url: 'process/update_events.php',
data: 'title='+ event.title+'&start='+ start +'&end='+ end +'&id='+ event.id ,
type: "POST",
success: function(json) {
alert("Event updated successfully");
}
});
}
});
});
</script>