Creating a fullCalendar event interactively

The following sample code will allow us to ask for a title for an event, create the event and then store it in the `fullCalendar` internal array of events.  By setting the stick property to true you can navigate away from the day of the event to other month, week or year and it will be kept in memory, unless you refresh the page:

 

// Create calendar when document is ready
$(document).ready(function() {

 // We will refer to $calendar in future code
 var $calendar = $("#calendar").fullCalendar({
   // Start of calendar options
   header: {
    left: 'title',
    right: 'today,month,agendaDay,agendaWeek prev,next'
   },

   // Make possible to respond to clicks and selections
   selectable: true,

   // This is the callback that will be triggered when a selection is made.
   // It gets start and end date/time as part of its arguments
   select: function(start, end, jsEvent, view) {

     // Ask for a title. If empty it will default to "New event"
     var title = prompt("Enter a title for this event", "New event");

     // If did not pressed Cancel button
     if (title != null) {
      // Create event
      var event = {
       title: title.trim() != "" ? title : "New event",
       start: start,
       end: end
      };

      // Push event into fullCalendar's array of events
      // and displays it. The last argument is the
      // "stick" value. If set to true the event
      // will "stick" even after you move to other
      // year, month, day or week.

      $calendar.fullCalendar("renderEvent", event, true);
     };
     // Whatever happens, unselect selection
     $calendar.fullCalendar("unselect");

    }, // End select callback

    // Make events editable, globally
    editable : true,

    // Callback triggered when we click on an event

    eventClick: function(event, jsEvent, view){
     // Ask for a title. If empty it will default to "New event"
     var newTitle = prompt("Enter a new title for this event", event.title);

     // If did not pressed Cancel button
     if (newTitle != null) {
          // Update event
          event.title = newTitle.trim() != "" ? newTitle : event.title;

          // Call the "updateEvent" method
          $calendar.fullCalendar("updateEvent", event);

        }
    } // End callback eventClick
  } // End of calendar options
 );
});

And here the screenshots:

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s