FullCalendar plugin has an editable feature that makes it possible to update events by dragging and dropping posts anywhere within the calendar. This time, I’ll be sharing on how I’ve utilized this feature, as well as on how to update the events on the database.

Note: I advise you to read my previous post ( CakePHP and jQuery FullCalendar plugin (Part I – Retrieve events from database)) first regarding this plugin.

So let’s begin!

Add this to your index page where the calendar is displayed. (ie. app/views/calendar/index.ctp)


// include this in the FullCalendar script...

editable: true,

eventDrop: function(event) {	// Make sure to read the plugin's documentation :) 

var dt = new Date(event.start);   // event.start is the new date where you dragged and dropped the event post.
var yr = dt.getFullYear();
var dy = dt.getDate();
var mth = dt.getMonth()+1;
var hrs = dt.getHours();
var mns = dt.getMinutes();

var newdate = yr+'-'+mth+'-'+dy;  // pass this date to the database via post.

$.post("http://www.yoursite.com/calendar/edit/id:"+event.id+"/date:"+newdate, function(data){});

}

On your controller (ie. app/controllers/calendar_controller.php), create the edit function.


function edit($id=null){

$this->Event->id = $this->params['named']['id'];
 // By the way I made use of the params to get the values.
$this->Event->saveField('event_date',$this->params['named']['date']);

}

So that’s about it. :) You can also use the eventResize: function(), this feature will let you resize or extend the date duration of an event.

Also check out Part I – Retrieve from database and Part III gotoDate method :)

About these ads