
Smashing Magazine we smash you with the information that will make your life easier. really.
Online Calendars and Date Pickers
October 23rd, 2007 in Developer's Toolbox | 64 Comments
Calendars always come in handy. Whether you are planning a schedule for your next project, manage your appointments or simply want to keep track on events you are going to take part in — to get things done in time you need a clear, simple and user-friendly time line. The more flexible your calendars are, the more effectively you can work with them. E.g. setting up your milestones, defining your deadlines and shifting your time line once unexpected problems occur. Besides, if you can get notified once the deadline is coming up or update the data once you stuck in the traffic then your calendar can turn out to be a real life-saver and boost your effectiveness.
Online calendars can also be useful if you’d like to publish your schedule or share it with your colleagues instantly — instead of sending hundreds of e-mails via a mailing list. Or if you’d like to provide your visitors with a date picker — e.g. for your web form. In fact, online calendar services, scripts, tools and software applications are useful for everybody.
This post presents a detailed overview of calendar scripts (Ajax, PHP, DHTML etc.), applications, tools and related services, including CSS-styling of online calendars and web-services you can use to generate a printable weekly planners and monthly and yearly calendars for free.
- You can find more AJAX-code snippets in our article 80+ AJAX-Solutions For Professional Coding.
Calendar Scripts, Date Pickers
These calendars are generated dynamically and can be used in web forms as date pickers. In some cases date is used for the navigation through the content of the site (like in Livejournal blogs).
- The DHTML / JavaScript Calendar
A flat DHTML calendar which is suitable for selecting date/time “on the fly”. The design is customizable through external CSS, the script provides help hints, allows multiple days selection, is fast and very easy to setup. Keyboard can be used for a quicker date selection. Open source. - NoGray Calendar Component
A customizable and extensible JavaScript mooTools Calendar. It’s skinnable using CSS.
- Quick Calendar Using AJAX and PHP
A Tutorial from Bernard Peh at evolt.org. Visitors can navigate through the calender clicking on the linked dates; the information about the event which took place on this day appears below the calendar. - jQuery Calendar v2.7
The calendar can easily be added to an input field with appropriate default settings. The calendar can appear on focus, via button and both ways. Day names are clickable to change the first day of the week. The calendar also responds to keystrokes entered in the input field. Use a custom field settings function to create a date range control: two date fields, each restricting the other. Very flexible solution. - Calendar System
This calendar is using PHP & Script.aculo.us. There are 3 parts, the Javascript, the HTML and the PHP script. The style can be applied with CSS, of course.
- PHP iCalendar
PHP iCalendar is a PHP-based iCal file viewer/parser to display iCals in a Web browser. It displays iCal files in a nice logical, clean manner with day, week, month, and year navigation. It is available in 13 languages and includes support for printing, searching and RSS news feeds. - Yahoo! UI Library: Calendar
The Calendar component is a UI control that enables users to choose one or more dates from a graphical calendar presented in a single month or multi month interface. Calendars are generated entirely via script and can be navigated without any page refreshes. There are dozens of examples and additional options you can use to customize the calendar. - JavaScript DatePicker Control
The DatePicker lets users easily select valid dates from a dropdown calendar. No need to worry about date formats, by picking dates it’s always correct. - Simple Calendar Widget
This flexible, simple pop-up calendar is written to work across browsers. It’s fully commented and customisable for language, colours and date format. The pop-up displays a month at a time from a specified range of years. - Tigra Calendar
Tigra Calendar is a free JavaScript Calendar control that makes it easy for the website users to fill out the date/time fields by selecting the date from a popup calendar. Script saves the time for those internet/intranet developers who need intuitive, easy to use cross-browser client-side date or timestamp input control. Calendars are attached to the existing input fields in the web form, multiple calendars can be configured independently in the same form or page. Tigra Calendar is pure client side script so it can work with any server side scripting technology (PHP, ASP, CGI etc.). - Epoch – Date Picker
A cross-browser date picker which is fast, easy to use and easy to configure. - JS Calendar (version 2.1)
A cross browser Javascript calendar. 12 languages are currently supported - Keith Devens PHP Calendar
A very simple, but multi-functional PHP script to print out a calendar. Neat bonus features include the ability to link certain days in the calendar to a web page - useful for a weblog. You can also assign stylesheet classes to specific days, and provide content for an individual day. - Developing Johan’s Accessible Calendar
These examples relates to the Accessible Calendar with Selection of Weeks topic on Accessify Forums. - AJAX Datetime Toolbocks
Intuitive Date Input Selection. The Datetime Toolbocks is a pure JavaScript library using DHTML and advanced date parsing to generate the date based on the grammar passed. The purpose of the Datetime Toolbocks is to simplify the date entering process using common terms we are all familiar with. - AJAX Calendars
An overview of 10 AJAX-based calendar scripts.
Tutorials
- Learn how to integrate Google Calendar in your website using AJAX
A detailed step-by-step tutorial on how you can integrate Google calendar directly in a website and display latest events in a brief overview. - Syncing Google Calendar With iCal
Google calendar can be a great tool for organizing your life. However, sometimes you would still want to use your own desktop application. Apple’s iCal, which is built-into Mac OS X, can be used to subscribe to your Google Calendar, and will automatically check Google Calendar every few minutes to check for new items. Screencast. - Stay in Sync with GCal and Thunderbird
View and Update your Google Calendar offline from within Thunderbird by making use of the Lightning and Provider Add-ons. This step-by-step guide will show you how to get up and running (and staying in sync) in no time. - Sync Google Calendar With Your Phone
GCalSync allows you to synchronize your Google Calendar and your mobile phone. It works for most phones including Blackberry. - GsyncIt For Microsoft Outlook
gSyncit works by updating your Microsoft Outlook calendar with your Google calendar entries and then updating your Google calendar with your Microsoft Outlook entries. All appointments that occurred in the past 365 days and those that will occur in the next 365 days will be synchronized. - Add Events to Google Calendar with SMS
Apparently you can add events to your Google Calendar (and other nifty tricks) by sending text messages to SMS short code 48368. More information in this article. - 40+ Tools For Google Calendar
A series of programs, browser add-ons, Greasemonkey scripts, and Stylish user styles for Google’s calendar service.
Online Calendars with Database-Support
The examples listed below are complete stand-alone applications. They don’t only display the date, but can also link the date to specific data, such as information about a given event, your next milestone or your visitors’ plans.
- iZeit
iZeit is an easy to use online PHP calendar and to-do list. iZeit runs on your own server, so it’s totally customizable. - Easy PHP Calendar
The Easy PHP Calendar is a powerful PHP calendar script that is easily integrated into web sites and is easily customizable. This attractive, full-featured calendar is suitable for display on a calendar of events page, home page, or any other page. Price: $19.95.
- Plans
One installation of this tool can support many calendars. Plans supports multiple languages. This also has CSS-themes. Plans can store data in flat files or an SQL database and is licensed under the GPL. - VCalendar
This is an open source Web calendar application with related tools, for posting and maintaining events and schedules online, in calendar format. Unlike any other online calendars, VCalendar comes with source code in multiple programming languages: PHP, ASP and ASP.NET (C# and VB.NET). - WebCalendar
WebCalendar is a PHP-based calendar application that can be configured as a single-user calendar, a multi-user calendar for groups of users, or as an event calendar viewable by visitors. MySQL, PostgreSQL, Oracle, DB2, Interbase, MS SQL Server, or ODBC is required.
Online Calenders and Software
There is a number of web services which offer web-based calenders without installation. In most cases calenders are integrated among dozens of other features; we wanted to present “pure” calenders, without additional features which aren’t always useful, particularly if you just want to manage your time line as quickly and as painless as possible.
- Google Calendar
With Google Calendar, you can see your friends’ and family’s schedules right next to your own; quickly add events mentioned in Gmail conversations or saved in other calendar applications. Sharing events and calendars is also available. You can also sync Google Calender with Microsoft Outlook, Thunderbird, iCal and your mobile phone. - Yahoo! Calendar
Yahoo! Calendar lets you to share your calendar with specific friends and co-workers and remember important dates, setting up automatic reminders. It offers public and private event scheduling, to-do lists, weather, and integration with Microsoft Outlook and Palm devices. - Windows Vista Calendar
A calendar application that is included in Windows Vista. It natively supports the iCalendar file format, and has the ability to publish and subscribe to web-based calendars. Calendars may also be published to network drive shares. Windows Calendar has several calendar views, including Day, Week (5 and 7 day) and Month, and also supports Tasks. Windows Calendar supports over 100 calendars for each user. - Kiko
A Web 2.0 Calender running in your browser. Use it for appointments and contacts. Data can be shared, and there is an API. - iCalShare
iCalShare is the web’s largest directory of shareable calendars. We have over 1500 calendars in more than 35 different categories, including calendar for sports teams, music groups, television shows, holidays, and more. Used calendar applications are Cal, Mozilla Calendar, Sunbird, Zimbra, Microsoft Works, WinDates, Novell Evolution, KOrganizer. Lots of them seem to be temporarily unavailable. - Calendarhub
Calendarhub is a solution for private use or groups. You can create multiple personal or group calendars, find local events and add them to your calendar, get reminders by email or on your phone and invite others to your events. The tool offers an Ajax-based drag & drop interface, RSS feeds for any calendar view and Import/Export functionality for Outlook, Yahoo etc. It is also possible to subscribe to public calendars (e.g. iCal). -
Mozilla Sunbird and Lightning
Mozilla-style ease-of-use for your calendar. Sunbird lets you manage your schedule easily, and store it where you want to. Download free for Win, Mac OS and Linux - available in a couple of languages. Use Lightning if you use Mozilla Thunderbird for email. - Calgoo
Calgoo is calendar software that manages multiple calendars and schedules, contacts and tasks online and offline. - Eventsherpa
Windows only. Organize and manage your events online or offline and instantly generate a Web calendar to share with anyone on the Internet. Integrate shared calendars into your corporate or personal Web site and update with one click. Deliver upcoming events to your audiences desktops by allowing them to subscribe to event feeds using one of the free cross platform calendar tools. - Rainlendar
Rainlendar is a feature rich calendar application that is easy to use and doesn’t take much space on your desktop. The application is platform independent so you can run it both on Windows and on Linux. Lite-Version is free. Lots of language file are available. Comes with event-planner an todo-list.
Calendar Styling and Experiments with CSS
- A CSS styled calendar
A tutorial by Veerle Pieters. - CSS Play A validating link calendar
CSS Styling by Stu Nicholls. - Unordered List Calendar
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. Mike Cherim’s experiment. - Calendars & Date Pickers Design Showcase
52 examples of CSS-based calendar designs collected by Christian Watson.
Web 2.0 Social Calendar and Services
Web 2.0 offers dozens of web-based services which offer calendars and similar functionality. Let’s take a look at some of them — in a brief overview.
- Backpack Calendar + Basecamp
Apart from other services this 37signals’ product offers a simple presentation of events that span multiple days (like trips, conferences, etc.) and has Email/SMS reminders - you can be notified 30 minutes before an event. Basecamp users can also manage their project milestones. - RSS Calendar
Web-based calendar service that allows the sharing RSS calendar feeds with others. - 30 Boxes
Share your calendar and your web stuff online. Organize your life, share all or parts of it with friends. - Remember The Milk
Online to do list and task management. - You can also use Jotlet, Plaxo, Calgoo, Cozi (the family calendar), myMemorizer (a reminding service with - of course - a calendar), Scrybe and Airset for similar purposes.
Generate Your Personal Calendar Online!
Instead of using web services you might want to stick to pen and paper. In this case you can use some web tools which can generate a printable version of a calendar you can fill in after you’ve printed it out. Some useful tools in a brief overview.
- Compact Calendar (for 2007)
The Compact Calendar is designed to provide a compact view of the year, with plenty of space for making annotations. I use it as to “doodle plan” project timelines during meetings with clients. Since the days are presented contiguously while retaining the days of the week, you get a more intuitive sense of how the days are flowing and can estimate accordingly. - CalendarsQuick
CalendarsQuick lets you create professional-looking printable calendars in PDF - personalized with your own titles, photos, start days, time ranges. - Printable Calendars
Generate a printable weekly planners and monthly and yearly calendars for free. With just a few clicks you will be able to personalize these calendars by adding an image and any text you’d like. - Free Calendar Template
Three variations of a CSS-based calendar - for free download. -
Big Huge Labs Calendar
The tool enables you to create a customized calendar from your digital photographs. - 12 sided Calendar
Generate a dodecahedral calendar. You can choose between PostScript and PDF format. Choose PostScript format if you want to mark holidays and birthdays. The PostScript file explains how to do it. 3-D Calendar is based upon the same idea. - Free Online PDF Calendars
Downloadable and printable calendars for the upcoming year. Free Online PDF Calendars - Month on a Page version.
Leave a Reply
Sponsors
- Advertise with us!
Smashing Links
Popular Posts
- 100 Wordpress Themes
- 83 Wordpress Themes
- 80 AJAX Solutions
- 53 CSS Techniques
- 50 Beautiful Designs
- 50 Simple Designs
- 45 Fresh Designs
- 30 Dark Designs
- 45 Blog Designs
- 65 Flash Designs
- Brilliant Wallpapers
- Brilliant HDR Pictures
- Brilliant Photos
- Free Design Templates
- Free CSS Layouts
- Free Icon Sets
- Free High-Quality Fonts
- Slideshows & Lightboxes
- Adobe Photoshop Tutorials
- Adobe Illustrator Tutorials
All Posts
- 404 Error Pages
- AJAX Libraries
- AJAX Solutions
- Blog Designs
- Blog Headers
- Book Covers
- Browsers Round-Up
- Browser Test Suites
- Buzz-Monitoring
- Charts and Diagrams: Tools
- Cheat Sheets
- Code Beautifier
- Copyright Explained
- CSS Coding Techniques
- CSS Designs 1, 2, 3, 4, 5
- CSS Expert Ideas
- CSS Float Theory
- CSS Frameworks
- CSS Free Templates
- CSS Footers
- CSS Forms 1, 2
- CSS Frameworks
- CSS Galleries
- CSS Ideas
- CSS Layouts
- CSS Menus
- CSS Print-Layouts
- CSS Specificity
- CSS Styleguides
- CSS Tables
- CSS Tutorials
- CSS-Techniques
- CSS Tools
- Data Grids and Tables
- Data Visualization 1, 2
- Date Stamps
- Design Books 1, 2
- Design Magazines
- Designer's Checkpoints
- Domain Tools
- Dreamweaver Tutorials
- E-Mail Delivery
- Favicons 1, 2, 3, 4, 5, 6
- Firefox Themes
- Fireworks Tutorials
- Flash Designs
- Flash Slideshows
- Flash Tutorials
- Fonts 1, 2, 3, 4
- Forums
- Gadgets 1, 2, 3
- Google AdSense
- Google PageRank
- Graphics Design
- Grid-Based Design 1, 2
- Grunge Design 1, 2
- Hand-Drawing Design
- Handwriting and Lettering
- Hotkeys
- HDR Pictures
- HTML Template Systems
- Icon Sets 1, 2, 3, 4
- Icons, Templates 1, 2, 3
- Illustrator Tutorials 1, 2
- Laptop Sleeves
- Laptop Designs
- Link Building
- Mascots
- Motion Graphics
- Music Videos
- Navigation Menus
- Newspaper Designs
- Online Converters
- Online Generators
- Pagination
- PDF Magazines
- Photoshop Tutorials 1, 2
- Pixel art
- PNG Transparency
- Portfolios
- RSS Best Design Practices
- RSS Icons
- Screensavers
- SEO Tools
- Shopping Carts
- Short Movies
- Slideshows & Lightboxes
- Splash Pages
- Start Pages
- Stock Icons
- Tab-Based Interfaces
- Tag Clouds
- Textures & Backgrounds
- Tooltips Scripts
- Tutorials
- Typefaces 1, 2
- Type Setting Principles
- Typographic Posters
- Typography In Motion
- Typography Showcase
- Usability Books
- Usability Glossary
- Usability Nightmares
- Usability Principles
- User Interfaces
- Vintage and Retro
- Wallpapers 1, 2, 3, 4
- Web 2.0 Tutorials
- Web Profis Ideas 1, 2
- Whitespace & Simplicity
- Wordpress Plugins
- Wordpress Themes 1, 2, 3, 4
Webtips
Sideblog
Ross Johnson discusses 8 forgotten fonts you may use in CSS. Among them are Palatino Linotype, Century Gothic, Copperplate and Gill Sans — apparently, these fonts are installed on a variety of operating systems.
How creative can a table of contents be? Designobserver presents Thirty Tables of Contents. The collection includes excerpts from the books by Philip Larkin, Philip Roth, Paul Rand and Jan Tschichold.
A set of 18 splendid and colorful looking 3D RSS-Icons. They are done with 3d Studio Max. JPG.

In Font Clock 12 different fonts are printed within the mechanism of a clock, providing a random, mixed display of graphic language within a single time piece. Designed by Sebastian Wrong.
One pixel notched corners as used by Google Analytics. Instead of each option being boxed in a clickable rectangle, there is a 1px notch in each corner. It's not necessarily a curved corner, but it is a little softer than a normal box. Nice little trick.
Hartija is a CSS print framework which is an attempt to unite best CSS printing practices into one single CSS-file.
Rather than standard website templates, a free admin template is nearly impossible to find. This is an admin template which you can use for web applications like online-shops or CMS.

Fully Personal Interface research is a survey where people are questioned about their interface preferences. Results: labels and icons should be placed on the left, horizontal menus are more popular than vertical ones.







































Elliott Cross (October 23rd, 2007, 8:23 pm)
Great resource! I use the Google calendar mostly and have always had issues with trying to design a calendar feature into some of the sites I design.
Thanks for the great list of resources, will definately bookmark and check them out further for use!
Jamie McConnell (October 23rd, 2007, 8:27 pm)
Hi.
Just saw that i got a Pingback for ‘Calendar System’ at Nodstrum.
This has since been updated with: Link [nodstrum.com]Link [nodstrum.com]
Jamie.
alireza (October 23rd, 2007, 8:55 pm)
hello
nice post!
but i want a calendar to support arabic and persian calendar, which of above calendar are ?
Ben Bodien (October 23rd, 2007, 8:58 pm)
Another important js date picker which has been omitted here:
Link [www.frequency-decoder.com]
Dirk (October 23rd, 2007, 9:06 pm)
easy to print calendar, unix:
cal -y > $Deskop/calendar.txt
Rick (October 23rd, 2007, 9:25 pm)
I can recommend the easyphpcalendar(see under Online Calendars with Database-Support), it has worked flawlessly on three different sites and styling it is quite easy.
Jeton (October 23rd, 2007, 9:26 pm)
Some lovable cals there mate. :)
Here are some I think you missed (as judging by the quality picking you do :P )
Link [elzr.com]
Link [www.luispabon.com]
Link [www.mediabistro.com]
Link [infosthetics.com]
Adam Hirsch (October 23rd, 2007, 10:01 pm)
Great list! Thanks for the Mashable Google Calendar Tools link too!
- Adam Hirsch, Mashable.com
Stuart (October 23rd, 2007, 10:05 pm)
Don’t forget the great downloadable and printable calendars over at DIY Planner - all sorts catered for…
Link [www.diyplanner.com]
Swift (October 23rd, 2007, 10:12 pm)
Great article! Fantastic list of calenders as well! However, I personally do not plan much thus not needing any calenders. And If there is really a need to, I would rather use a physical calender then a online one. I personally feel that it is much easier to use and access etc.
V1 Fusioin (October 23rd, 2007, 10:30 pm)
wow.. i was just about to search google for a new cal. decided to check out SM first.. guess its my lucky day ^_^
Peter (October 24th, 2007, 12:06 am)
I’ve created an interesting prototype calender here
Link [blog.peterroper.co.uk]
Alessandro (October 24th, 2007, 2:03 am)
well done… once more :)
Shimon (October 24th, 2007, 2:04 am)
Here’s another more-or-less semantic experiment of using ordered lists:
Link [www.chossonandkallah.com]
riscphree (October 24th, 2007, 5:02 am)
You missed out on hipcal for web based calendars, it’s most excellent.
Link [www.hipcal.com]
Sia (October 24th, 2007, 8:48 am)
There are so many great resources, but I’m still stuck on hard copy calenders. That way the whole family is able to quickly glance at our dry erase calender and find what they need to find. As far as work goes, we seem to manage well enough through our task managers for now.
nadia (October 24th, 2007, 10:18 am)
Woow… nice posting! I’m still stuck at managing my time sometimes, I hope adding some calendar timeline will help… KiKo looks cute btw…
Sean O (October 24th, 2007, 11:08 am)
Hot dang. Everything you always wanted to know about calendars. Great, thorough post.
Except for one thing… you left out one of the most rock-solid (I’ve tried many) JavaScript calendar / datepickers from NSFTools’ (disregard the Lotus Notes talk, it works anywhere):
Link [www.nsftools.com]
Demo:
Link [www.nsftools.com]
May not be the sexiest, but it’s still style-able via CSS, and is among the most stable & reliable pickers around.
Rutger (October 24th, 2007, 2:42 pm)
For more reviews on calendar apps take a look at Link [www.calendarreview.com]
gforce (October 24th, 2007, 4:49 pm)
Another:
Link [hitask.com]
Harry Jennerway (October 24th, 2007, 6:43 pm)
Thank you so much for listing iZeit. I’ve had over 200 visitors from SmashingMagazine so far!
You’ve always got great articles, keep up the good work on the site! =)
azer koculu (October 24th, 2007, 9:39 pm)
Hi,
I developed a new calendar application. You can check it at; Link [kodfabrik.com]
If you’ll add my application to your post, I’ll be very happy.
Best wishes.
rcz (October 24th, 2007, 9:43 pm)
Maybe a nice addition: Link [dev.base86.com].
It’s a semi copy of the Vista taskbar calendar.
Nate Whistler (October 25th, 2007, 2:39 am)
This is by far the best thing I have seen and currently use it for my clients who want to show a calendar but don’t want to have to login to the calendar. It syncs with ical, it’s really well designed, and open source.
Link [www.phpicalendar.net]
Isaac Castillo (October 25th, 2007, 11:50 am)
one calendar that i have used for date picking is: Link [marcgrabanski.com]. very easy to use and install.
pingoogle (October 25th, 2007, 1:08 pm)
Great Post guys!!! Thanks ;-)
Kuznetsov Viktor (October 25th, 2007, 1:35 pm)
Link [www.daypilot.org] - skipped!
eurojoe (October 25th, 2007, 3:26 pm)
Spent about 1/2 hour looking for a calendar, and all of a sudden I find your article…done.
Awesome post. Thanks
Matt (October 26th, 2007, 1:55 am)
I think you missed this one php icalender
Google Tutor (October 26th, 2007, 6:20 am)
Hi Guys,
Great post, I love online calendars! Thanks very much for the link as well, I’m honored :)
OverZero.it (October 26th, 2007, 4:55 pm)
Really impressive resource!
Great work.
Thanks to persons who share links in their comments too! :)
Ciudi (October 26th, 2007, 10:33 pm)
Very good post!
I think Link [www.famundo.com] also have a great web 2.0 based calendar tool with a lot of options
delpino (October 27th, 2007, 1:51 am)
This one is quite good too Link [www.bookmark-manager.com]
andrew (October 27th, 2007, 5:29 am)
excellent collection of resources. i don’t know how many times i would have liked to have had this info. thanks.
Thomas pequet (October 29th, 2007, 6:22 pm)
Link [www.memotoo.com] is a another calendar online and you can sync with iCalendar software compatible and with your mobile !
JAcob (February 27th, 2008, 5:41 am)
Did you forget the amazing ExtJS calendar ?
Kev1n (May 5th, 2008, 7:01 am)
Prolly worth mentioning; version 2 of this calendar is out, now with datepicker Link [dev.base86.com]