A jquery plugin providing a weekly view of calendar events. Features include:

* Display of calendar events within a weekly grid
* Calendar events can be supplied as an array, url or function returning json
* Calendar events can be dragged, dropped and resized
* Lots of callbacks for customizing the way events are rendered plus callbacks for drag, drop, resize, mouseover, click etc
* Automatically scrolls to current time
* Extend the core calendar event data structure with your own data
* Highly configurable, enabling variable timeslots, readonly calendars, display of partial days, custom date formatting, direct manipulation of individual events for create, update, delete of events and much more.

This calendar implementation demonstrates further usage of the calendar with editing and deleting of events. It stops short however of implementing a server-side back-end which is out of the scope of this plugin. It should be reasonably evident by viewing the demo source code, where the points for adding ajax should be. Note also that this is **just a demo** and some of the demo code itself is rough. It could certainly be optimised.

*Note: This demo is straight out of SVN trunk so may show unreleased features from time to time.
Features

This calendar implementation demonstrates the following features:

* Adding, updating and deleting of calendar events using jquery-ui dialog. Also includes additional calEvent data (body field) not defined by the calEvent data structure to show the storage of the data within the calEvent
* Dragging and resizing of calendar events
* Restricted timeslot rendering based on business hours
* Week starts on Monday instead of the default of Sunday
* Allowing calEvent overlap with staggered rendering of overlapping events
* Use of the ‘getTimeslotTimes’ method to retrieve valid times for a given event day. This is used to populate select fields for adding, updating events.
* Use of the ‘eventRender’ callback to add a different css class to calEvents in the past
* Use of additional calEvent data to enforce readonly behaviour for a calendar event. See the event titled “i’m read-only”

Demo: http://jquery-week-calendar.googlecode.com/svn/trunk/jquery.weekcalendar/full_demo/weekcalendar_full_demo.html
Download: http://jquery-week-calendar.googlecode.com/files/jquery-weekcalendar-1.2.1.zip
Source: http://code.google.com/p/jquery-week-calendar/

Related Listings:

1. Javascript Calendar Using MooTools The idea is to use MooGenda to quickly expose your...
2. Vista-like Ajax Calendar The Vista-like Ajax Calendar is what the name says: a...

Do you like this post?

Email: