The jquery-week-calendar plugin provides a simple and flexible way of including a weekly calendar in your application.  It is built on top of jquery and jquery ui and is inspired by other online weekly calendars such as google calendar.  If you require a monthly calendar view, I highly recommend checking out the FullCalendar plugin by Adam Shaw.

Calendar features at a glance

The calendar features:

• 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.

jquery week calendar

The design of the  week-calendar plugin is not meant to be a total solution for managing weekly events as this would have limited it’s scope. For example it doesn’t impose a user interface approach for editing and updating calendar events.  By providing the base weekly calendar api that is extensible, you will be able to create a much richer domain on top of the basic functionality. To help you achieve this, the calendar has plenty of hooks that make it quite simple to add this stuff in.

Current Version

The current version is 1.2.2

Live Demo

The following live demonstration  has a basic calendar with a few events in it. It demonstrates most of the major functionality by triggering events that are displayed as messages in the top right hand corner of the screen.  More demos will  come soon…

Demo 1 (Basic)

• Demo 1 shows basic calendar functionality. Calendar Events are supplied as a local javascript array. All triggered events are displayed as messages, calendar events in the past are shaded gray using the eventRender callback.

Demo 2 (Multi data-source and dynamic config options)

• Demo 2 allows you to select from two different data sources. These are both local javascript objects but could just as easily have come from a remote server. The data returned includes an ‘options’ property which overrides the default calendar options for ‘timeslotHeight’ and ‘timeslotsPerHour’.

Demo 3 (Create / update / delete using jquery UI)

• This demo shows the use of jquery ui modal dialog for creating, updating and deleting events. It also demonstrates the use of
  • Staggered overlapping events
  • Querying the calendar for valid timeslots for a date to populate calendar event form select fields
  • Limited display of timeslots based on business hours

Awesome jQuery version of "iCal-like" interface