7 AJAX & JavaScript Calendar Scripts

The ease of use, rich and intuitive scheduling solution offered by Google Calendar has inspired many to create CSS and AJAX calendars with similar interface and features. In this post, we take a look at some of these AJAX calendars & JavaScript calendars along with full-fledged calendar scripts similar to Google Calendar, Microsoft Outlook’s Calendar or Apple’s iCal.

AJAX and CSS Calendar Interfaces

The scripts below are great starting point to build your calendar. They only provide front-end scheduling interface based on AJAX and CSS. You will have to write your own code that will hook to the different events and possibly an admin area to store and manage the events.

FullCalendar

FullCalendar is a jQuery plugin that provides a full-sized, drag & drop calendar like the one below. It uses AJAX to fetch events on-the-fly for each month and is easily configured to use your own feed format (an extension is provided for Google Calendar). It is visually customizable and exposes hooks for user-triggered events (like clicking or dragging an event).

dhtmlxScheduler

dhtmlxScheduler is a Web-based JavaScript events calendar that provides rich and intuitive scheduling solution similar to Microsoft Outlook Calendar, Apple’s iCal or Google Calendar. The events can be displayed in Day, Week, Month or Year views. Advanced drag-n-drop functionality allows users to change events dates and time by easily moving or resizing event boxes. Very lightweight (about 20Kb gzipped), fast-performing, and it uses Ajax to smoothly update and display events schedule.  dhtmlxScheduler is also available as plugins for WordPress, Joomla and Drupal.

jMonthCalendar

jMonthCalendar is a full month calendar that supports events. You simply initialize the calendar with options and an events array and it can handle the rest. This calendar is based on jQuery and has extension points that allow the developer to interact with the calendar when the display is about to change months, after the display has changed months and when the event bubbles are clicked on. jMonthCalendar also supports hover extension points, hover over an event and trigger an event like an alert(); By default the events would each have a URL supplied that would link to a details page.

MooGenda

 MooGenda is a javascript calendar based on MooTools, that reads events from JSON requests. MooGenda supports double click on event to see the deafult event view, drag and drop event in month view, every change send a request to back end, to store when and what changed in the event.
Calendars with database or flat-files support

If you’re looking to save time building an admin interface for any of the above solutions reviewed, then the following full-fledged calendar systems are perhaps what you need. They come with both the front-end and back-end.

LuxCal

 LuxCal is a relative new calendar solution and compared to the other calendar solutions outlined above, LuxCal does not only come with a front-end interface but a complete event management system based on PHP and MySQL. It has been designed for user-friendliness, with support for views like month, day, year and upcoming events. LuxCal has support for colored event categories, recurring events, email notifications of event due dates, private events, access rights configurable for each user and for public access, CSV file import (for instance Outlook export), multi-language support and customizable user interface colors.

Monket Calendar

Monket Calendar is coded in HTML, CSS, Javascript, and PHP. It is based on the premise of providing an Apple iCal style interface that is available wherever you are. The interface has been designed to make it as easy as possible to add/change/remove events and thereby reduce the frustration of using the browser for entering and managing data. Monket Calendar is one of the few calendar scripts that can display multi-day events spanning accross the days on which they occur. This spanning of events makes it much easier to read the calendar at a glance.

PlansCalendar

PlansCalendar is a highly configurable, customizable and easy-to-install calendar script. It is written in Perl. Events can be stored in either flat files or SQL databases. It has support for multiple-calendars, each of which can be managed separately all the while sharing events between each other. PlansCalendar also comes with an add-ons system whereby you can write plugins that re-use ist framework.