New version soon: fullCalendar with datepickers and event filtering

I am currently adding to the book two examples showing how to interact with fullCalendar using widgets such as datepickers or checkboxes. These are the examples:

 

 

The price will increase again in a few days when I publish this version.  This version is already published.  As always, previous buyers will not be affected by this and will receive these updates at no additional cost.

You can take advantage of the current price if you get the book now.

Thanks for your support.

 

Basic fullCalendar callbacks

Use these callbacks in fullCalendar to respond when:

1. Event’s content is about to be rendered: eventRender
2. Event is clicked: eventClick
3. Event is resized: eventResize
4. Event finished been dragged and dropped: eventDrop
5. Event is already dropped and rendered: eventReceive
6. Event stopped been dragged, but still not dropped: eventDragStop

 

 

 

Book update: Managing events with jQuery dialogs

Added a chapter on how to use jQuery dialogs to create, modify and remove events from the calendar.  The source package includes jQueryUI and its CSS so the samples can run out of the box.

Some  screenshots:

This upgrade is free if you already purchased the book.  If not, learn more about it and decide if it will be useful to you.

After the next chapter the price will change to $9.99 ($2 increase).  Take advantage of the early adopters price.

 

Dragging fullCalendar external events with variable duration

I just did for a client’s project something like what is shown in the following animation:

I will include the code and explanations in the book in the following days.

Sometime in the next two weeks I will raise the introductory price a little to account for the increase in advanced material.  Meanwhile you can still  get the book at the early adopters price.

 

Tip on serializing event in fullCalendar with JSON.stringify

When serializing a fullCalendar event with JSON.stringify() you may receive an error message like this one:

TypeError:Converting circular structure to JSON

That happens because each event has a reference to its source, which has a reference to the event itself, effectively creating a circular reference that JSON.stringify cannot manage.

The culprit is the event’s “source” property.   The way I deal with this is removing the source property before sending the event to its destination (ajax call, database CRUD function, etc):

delete event.source;
saveEvent(event);

 

fullCalendar set duration and color on drag and drop of external events

This is for a client’s project but I will include it in the book:

The events adopt the color of external events dropped on the calendar and adjust their duration according to a custom “data-*” attribute of the dropped element.

More about the book …

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: