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:

fc-interact-datepicker

 

 

fc-events-visibility

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.

 

Advertisements

Book Update: fullCalendar with database persistence

Just finished the chapter on the basics of how to use a database to manage fullCalendar’s events and you can buy the new version now.

These are the topics:

  • Database representation of a fullCalendar event
  • Saving events
  • Loading events
  • Modifying events
  • Deleting events

The actual code to save to or retrieve events from the database depend on your back end: libraries, framework or database.  The samples in the book are just to give you an idea about how to build the interaction with your back end through JSON.

I plan to extend this chapter with examples showing how to save events to a database after drag and drop actions.  Although I think that, after going through the examples in the new chapter, you will readily get the idea on how to do it.  It is a matter of choosing inside which fullCalendar’s callback to put your save, update and delete functions calls.

As announced before, the price increased again for new buyers. If you already bought the book you should be receiving soon an email with the updated materials at no additional charge.

If you have not bought the book yet, get it at the current price and receive future updates for free.

 

 

 

 

Dragging fullCalendar external events with variable duration

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

fullCalendar-external-events-variable-duration

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:

fullCalendar-drag-drop

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 …

Book update:Background Images in fullCalendar

Added code to the book showing how to insert a background image to the calendar and a day slot.  Some jQuery operations required. The code takes into consideration each view and adjusts the background image properties accordingly.  Some screenshots:

 

If you already bought the book, you will receive the update for free.

 

 

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: