Online Calendars and Date Pickers

Advertisement

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.

Sunbird Calendar Screenshot
Example: Sunbird Calendar

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.

    DHTML / JavaScript Calendar

  • NoGray Calendar Component
    A customizable and extensible JavaScript mooTools Calendar. It’s skinnable using CSS.

    Calendar Screenshot

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

    Quick Calendar Using Ajax and PHP

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

    Screenshot

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

    Calendar Screenshot

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

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

    Calendar Screenshot

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

    Simple Calendar

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

    Tigra

  • Epoch – Date Picker
    A cross-browser date picker which is fast, easy to use and easy to configure.

    Mean Free

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

    Calendar Screenshot

  • Developing Johan’s Accessible Calendar
    These examples relates to the Accessible Calendar with Selection of Weeks topic on Accessify Forums.

    Screenshot

  • 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 Scripts - Datetime Toolbocks - Intuitive Date Input Selection

  • AJAX Calendars
    An overview of 10 AJAX-based calendar scripts.

    AJAX Scripts - RibosoMatic » 10 calendarios con PHP, CSS y Javascript

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.

    Google Calendar Screenshot

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

    Calender

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

    Calendar Screenshot

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

    Calendar Screenshot

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

    Calendar Screenshot

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

    Calendar Screenshot

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

    Calendar Screenshot

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

    Yahoo Calendar

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

    Windows Vista Calendar

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

    Calendar Screenshot

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

    Calendar Screenshot

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

    Calendar Screenshot

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

    Calendar Screenshot

  • 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 Screenshot
    Rainlendar sits on the desktop

Calendar Styling and Experiments with CSS

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.

    Calendar Screenshot

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

    Compact Calendar

  • CalendarsQuick
    CalendarsQuick lets you create professional-looking printable calendars in PDF – personalized with your own titles, photos, start days, time ranges.

    Printable

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

    Screenshot

  • Free Online PDF Calendars
    Downloadable and printable calendars for the upcoming year. Free Online PDF Calendars – Month on a Page version.

    2009 Calendar

↑ Back to top

Co-Founder of Smashing Magazine. Former writer, web designer, freelancer and webworker. Sven is now writing Science Fiction Stories.

  1. 1

    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!

    0
  2. 2

    Hi.
    Just saw that i got a Pingback for ‘Calendar System’ at Nodstrum.
    This has since been updated with: http://nodstrum.com/2007/06/27/mysql-calendar/

    Jamie.

    0
  3. 3

    hello
    nice post!
    but i want a calendar to support arabic and persian calendar, which of above calendar are ?

    0
  4. 4

    Another important js date picker which has been omitted here:

    http://www.frequency-decoder.com/2006/10/02/unobtrusive-date-picker-widgit-update

    0
  5. 5

    easy to print calendar, unix:

    cal -y > $Deskop/calendar.txt

    0
  6. 6

    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.

    0
  7. 7
  8. 8

    Great list! Thanks for the Mashable Google Calendar Tools link too!

    - Adam Hirsch, Mashable.com

    0
  9. 9

    Don’t forget the great downloadable and printable calendars over at DIY Planner – all sorts catered for…

    http://www.diyplanner.com/templates/official/classic

    0
  10. 10

    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.

    0
  11. 11

    wow.. i was just about to search google for a new cal. decided to check out SM first.. guess its my lucky day ^_^

    -1
  12. 12

    I’ve created an interesting prototype calender here
    http://blog.peterroper.co.uk

    0
  13. 13

    well done… once more :)

    0
  14. 14

    Here’s another more-or-less semantic experiment of using ordered lists:
    http://www.chossonandkallah.com/tests/calendar.php

    0
  15. 15

    You missed out on hipcal for web based calendars, it’s most excellent.

    HipCal

    1
  16. 16

    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.

    -1
  17. 17

    Woow… nice posting! I’m still stuck at managing my time sometimes, I hope adding some calendar timeline will help… KiKo looks cute btw…

    1
  18. 18

    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):
    http://www.nsftools.com/tips/NotesTips.htm#datepicker

    Demo:
    http://www.nsftools.com/tips/DatePickerTest.htm

    May not be the sexiest, but it’s still style-able via CSS, and is among the most stable & reliable pickers around.

    0
  19. 19

    For more reviews on calendar apps take a look at http://www.calendarreview.com

    0
  20. 20
  21. 21

    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! =)

    0
  22. 22

    Hi,
    I developed a new calendar application. You can check it at; http://kodfabrik.com/app/dynCal
    If you’ll add my application to your post, I’ll be very happy.
    Best wishes.

    0
  23. 23

    Maybe a nice addition: Vista-like Ajax Calendar.
    It’s a semi copy of the Vista taskbar calendar.

    0
  24. 24

    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.

    0
  25. 25

    one calendar that i have used for date picking is: Clean Calendar. very easy to use and install.

    0
  26. 26

    Great Post guys!!! Thanks ;-)

    0
  27. 27

    Spent about 1/2 hour looking for a calendar, and all of a sudden I find your article…done.
    Awesome post. Thanks

    0
  28. 28

    I think you missed this one php icalender

    -1
  29. 29

    Hi Guys,

    Great post, I love online calendars! Thanks very much for the link as well, I’m honored :)

    0
  30. 30

    Really impressive resource!
    Great work.
    Thanks to persons who share links in their comments too! :)

    0
  31. 31

    Very good post!
    I think Famundo also have a great web 2.0 based calendar tool with a lot of options

    0
  32. 32

    This one is quite good too Online Organizer

    0
  33. 33

    excellent collection of resources. i don’t know how many times i would have liked to have had this info. thanks.

    0
  34. 34

    Memotoo.com is a another calendar online and you can sync with iCalendar software compatible and with your mobile !

    0
  35. 35

    Did you forget the amazing ExtJS calendar ?

    0
  36. 36

    Prolly worth mentioning; version 2 of this calendar is out, now with datepicker

    0
  37. 37

    This is a really good list. Here’s an interesting calendar that helps with groups of people:

    http://www.qlubb.com. They are designed for groups — so it’s a common calendar for everyone to see but they allow anyone within that trusted group to be able to edit that calendar – it’s like a group calendar.

    Obviously this wouldn’t work well for your own personal calendar but it good for a group to be able to post events, descriptions of the event as well as put in a shared to-do list, photos and other things that they provide out of the box.

    I’ve tried using google calendars for this before and it is cumbersome — not to mention I haven’t figured out a way to publish in a web page format that is useful (I can publish it for import but that’s not exactly what I want).

    0
  38. 38

    http://speedovation.com

    June 20, 2008 1:35 am

    ohh dear such nice list of calendars.

    I like few but I guess you miss what I’m using currently.

    http://kelvinluck.com/assets/jquery/datePicker/v2/

    anyways thank for having such a nice list

    0
  39. 39

    Perfect, exactly what I needed! Thank you x10.

    0
  40. 40

    Hi there,

    does anyone know a calender for a fix community. My dreams are the following:
    The community has fix dates an all members can see these dates and make there discussions if they are joining the date or not. A supervisor can add or change dates and gets information how many people will join a desired date. Until no we are using “google kalender” but there is only a free text field and no “member data base”.

    tfrauenrath ->at<- gmx.de

    0
  41. 41

    Really helpful list, thank you!

    0
  42. 42
  43. 43

    Thanks for the excellent listing of calendars out there, does any one over here has uses or come across extJS based calendar utility ?…I am not looking for date picker but Calendar functionality with day/week/month view and pluggable data source.

    Appreciate your help

    0
  44. 44
  45. 45

    Convenient Calendar is a good free shared online calendar for families, friends, and groups. It also has a shared address book and photo album.

    0
  46. 46
  47. 47

    Md. Bashir Uddin

    July 10, 2010 9:00 pm

    Excellent post for all ….

    0
  48. 48
  49. 49

    Are you aware that RSSCalendar.com is broken. I have not had access to my calendar since Oct. 25. Contact with customer support has not provided any relief.

    0
  50. 50
  51. 51

    very informative article thank you…cheers Peter

    0
  52. 52

    McLaren boss and FOTA chairman Martin Whitmarsh, believes F1 is at a crossroads and needs to fully grasp the digital age as it moves forward.

    bye

    0
  53. 53

    Yes there should realize the opportunity to RSS commentary, quite simply, CMS is another on the blog.

    0
  54. 54

    This article is five years old and I guess all these calendars have been developed further. Despite cloud tech which you think might have somehow sublimated away the need for calendars we all need a basic clear calendar in our apps. We have collaborative software (Dooster) that connects us to google calendar and we can connect by iphone to get event alerts sent by SMS. It’s really useful.

    0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top