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

 

 

 

Advertisements

Book Update: Drag and drop External Events

Added a new chapter to the book: “Drag and Drop External Events”.

The sample project was previewed in a past post.  Here is the animation of the final result:

fullCalendar-external-events-variable-duration

As mentioned in the previous book update, the price has been changed to $9.99.  As with early adopters, all buyers will continue to receive free updates.

With each new chapter the price will go up, so you should take advantage of the current price.

Thanks!

 

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:

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.