10 Free CSS and Javascript Calendars

Calendars may be used on webpages for various reasons, such as allowing users to easily pick a date in a form, or just to provide monthly information. Here are a list of various css and javascript calendars for use on your site. Don’t like the look? Customise them yourself with abit of CSS!

Monket Calendar

An Ajax enabled online calendar. Drag and drop events to change dates, drag the start/end of an event to create multi-day events, create and edit events without refreshing the page, all with an iCal style interface.

Quick Calendar Using AJAX and PHP

Online calendars are often used in many web applications. Though popular, the logic behind creating a calendar can be scary especially for those who are new to programming. There are many web calendars in the market but some of them are quite complicated. If we are not able to understand the code, it becomes harder for us to customise the calendar to fit into our existing application. As such, we need to create a calendar that can plug itself into any system seamlessly without problems. Whether we are using WordPress, Mambo/Joomla or Drupal, we should only need to insert one line into our code for the calendar to work.

Integrating Google Calendar into your Site

One of the features I find it interesting in Google calendar is the possibility to create shared calendars, but also the availability of your calendar as XML or ICAL whatever it’s a private or public one. As soon as we have XML of our calendar available I was wondering why not integrating Google calendar directly in website. For example a community that use the service to manage their events, or to display your future trips in your blog ?

JS Calendar

This is a cross browser Javascript calendar. You use the displayCalendar() or displayCalendarSelectBox() function to display the calendar(look how it is done in js_calendar.html).

The DHTML / JavaScript Calendar

A popup or flat DHTML calendar, suitable for selecting date and time. Supported on most browsers, it features a customizable look through CSS, keyboard navigation, multiple day selection and more!

CSS: Unordered List Calender

This is a list boxes calendar. It isn’t the most semantic method, but it does seem to be fairly stable and it resizes perfectly. A monospace font like Courier New must be used to ensure proper proportions and two characters must be used. Prepared with dynamic generation in mind.

CSS Styled Calendar

Many times I’ve been asked how I created my calendar, or asked me if they could use the code etc. That’s why I thought it might be interesting to write an article on how to create such calendar.

A validating link calendar

My previous examples of calendars were fairly basic and the ‘Simple List Calendar’, as several visitors pointed out, did not allow links to be added to the dates.

With these shortcomings in mind I have produced this calendar which I believe fixes all these problems and also solves the problem of having to have two sets of code/css and not being valid xhtml1.1.

Calendar System – PHP & Scriptaculous

There are 3 main parts, the Javascript, the HTML and the PHP script. For this tutorial i am making it so you can change the date with the form and it will update the calendar without having to reload the entire page, AJAX style.

AJAX Calendar Javascript XML PHP

Well, here it is. My first project using AJAX. I’m very familiar with javascript, so using the AJAX methodology came very natural to me. I made this php calendar script for a customer a few months back, but it required page refreshes to load the next and previous months.

 

Twitter Feeds

Privacy Policy | Terms & Conditions Copyright 2011 , Techliance..! Techliance & Techliance logo are trademarks of Techliance LLC. Other products, logos, and company names on Techliance website may be trademarks or trade names of their respective owners.

Join Us On