Main Page
 The gatekeeper of reality is
 quantified imagination.

Stay notified when site changes by adding your email address:

Your Email:

Bookmark and Share
Email Notification
jsModusCalendar [Go Back]
Calendar Demo: Show Calendar
Supported Browsers: Chrome, Firefox, Internet Explorer, Opera, Safari

Purpose
The jsModusCalendar is a powerful javascript that was developed to allow for the display of a calendar on any webpage on a site without a DOCTYPE definition in webpages as well as those with using this DOCTYPE detector. The jsModusCalendar is available with support server pages (ASP, ASP.Net, Perl, PHP) that handle requests made by the calendar system. This has been provided so that you have a jump start on developing the back-end (the server pages) according to what your requirements may be. The starter server pages also allow you to see what information is expected and how the XML streams are formatted.

Development
The jsModusCalendar was developed to show a calendar that a visitor can transverse through. On the main calendar page a summary of all room reservations and notes (some refer to notes as events or holidays) are available. When the user clicks on a specific day, a pane is shown that shows all of the details of the day of interest. If there are room reservations then a grid is shown (by room and time) where mouse over action reveals additional detail. If the visitor clicks on empty grids then he or she will have the option of placing a room reservation. When it comes to general notes (or events), this type of data is shown below the grid in a simple format. The visitor may also place note "reservations".

IMPORTANT NOTE: If you don't want to allow the room reservations grid to show up, you can disable that through XML. Likewise, if you don't want to allow the general notes block to show up, you can disable that separately through XML. If you want to prevent submissions of any kind for a specific day (such as the 15th in the demo) you can do it from XML. Need to link to documents or other URL's in the day pane? You can control that from XML, too. It's that easy!

On a design note, jsModusCalendar creates its own stylesheet from an embedded CSS reference allowing you to change colors, fonts and so forth. By viewing the code of jsModusCalendar.js in a text editor you will see a few sections at the top of the page that you can modify; I do not recommend changing anything below the marker /* DO NOT USE */ as that could adversely affect the calendar and processes it uses.

How Would You Use It?
The jsModusCalendar javascript file itself is approximately 134Kb in physical size and has no other dependencies in order to operate (other than the server pages which serve it content and are included in the ZIP file). This should provide you flexibility in terms of how to use it.

In some scenarios you may wish to only link to the javascript file on a single page of your website (and either auto-spawn "calendarInitialRender()" or include "calendarInitialRender()" in a link that a visitor would click on to launch the calendar). If the calendar is only available on one page of your website then the visitor will not have as much data to load when going to a webpage. On the other hand, if it is available on all pages, then the visitor would be able to access the calendar from any of the pages.

[NEW] Screenshots
Some screenshots have been put together showing different sections of the jsModusCalendar in action below.


Enlarge
Initial calendar view.

Enlarge
Room grids and events pane view.

Enlarge
Selecting grids to reserve.

Enlarge
Completing the room reservation form.

Enlarge
Room details are shown on mouse over of a room.

Enlarge
Reservation details are shown on mouse over of a reserved grid.

Enlarge
Completing the note (or event) form.


NOTE: You can download the script from the main javascript page. The ZIP file contains all code for ASP, ASP.Net, Perl and PHP.
About Joe