Menu Search
Jump to the content X

Online Calendars and Date Pickers


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 Screenshot2
Example: Sunbird Calendar

Calendar Scripts, Date Pickers Link

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 Livejournal3 blogs).

  • The DHTML / JavaScript Calendar4
    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 Calendar5

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

    Calendar Screenshot

  • Quick Calendar Using AJAX and PHP7
    A Tutorial from Bernard Peh at 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 PHP8

  • jQuery Calendar v2.79
    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 System11
    This calendar is using PHP & There are 3 parts, the Javascript, the HTML and the PHP script. The style can be applied with CSS, of course.

    Calendar Screenshot

  • PHP iCalendar12
    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: Calendar13
    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 Calendar14

  • JavaScript DatePicker Control15
    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 Screenshot16

  • Simple Calendar Widget17
    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 Calendar18

  • Tigra Calendar19
    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 Picker21
    A cross-browser date picker which is fast, easy to use and easy to configure.

    Mean Free22

  • JS Calendar (version 2.1)23
    A cross browser Javascript calendar. 12 languages are currently supported
  • Keith Devens PHP Calendar 24
    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 Screenshot25

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


  • AJAX Datetime Toolbocks28
    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 Selection29

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

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

Tutorials Link

  • Learn how to integrate Google Calendar in your website using AJAX32
    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 Screenshot33

  • Syncing Google Calendar With iCal34
    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. Screencast35.
  • Stay in Sync with GCal and Thunderbird36
    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 Phone38
    GCalSync39 allows you to synchronize your Google Calendar and your mobile phone. It works for most phones including Blackberry.
  • GsyncIt For Microsoft Outlook40
    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 SMS41
    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 Calendar42
    A series of programs, browser add-ons, Greasemonkey scripts, and Stylish user styles for Google’s calendar service.

Online Calendars with Database-Support Link

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.

  • iZeit43
    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 Screenshot44

  • Easy PHP Calendar45
    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

  • Plans46
    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 Screenshot47

  • VCalendar48
    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 Screenshot49

  • WebCalendar50
    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 Link

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 Calendar51
    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 Outlook52, Thunderbird53, iCal54 and your mobile phone55.

    Calendar Screenshot56

  • Yahoo! Calendar57
    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 Calendar58

  • Windows Vista Calendar59
    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 Calendar60

  • 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

  • iCalShare61
    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 Screenshot62

  • Calendarhub63
    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 Screenshot64

  • Mozilla Sunbird and Lightning65
    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 Screenshot66

  • Calgoo67
    Calgoo is calendar software that manages multiple calendars and schedules, contacts and tasks online and offline.
  • Eventsherpa68
    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.
  • Rainlendar69
    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 Screenshot70
    Rainlendar sits on the desktop

Calendar Styling and Experiments with CSS Link

Web 2.0 Social Calendar and Services Link

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 Calendar79 + Basecamp80
    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 Calendar81
    Web-based calendar service that allows the sharing RSS calendar feeds with others.
  • 30 Boxes82
    Share your calendar and your web stuff online. Organize your life, share all or parts of it with friends.

    Calendar Screenshot83

  • Remember The Milk84
    Online to do list and task management.
  • You can also use Jotlet85, Plaxo86, Calgoo87, Cozi88 (the family calendar), myMemorizer89 (a reminding service with – of course – a calendar), Scrybe90 and Airset91 for similar purposes.

Generate Your Personal Calendar Online! Link

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)92
    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 Calendar93

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


  • Printable Calendars96
    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 Template97
    Three variations of a CSS-based calendar – for free download.
  • Big Huge Labs Calendar98
    The tool enables you to create a customized calendar from your digital photographs.
  • 12 sided Calendar99
    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 Calendar100 is based upon the same idea.


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

    2009 Calendar104

Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26!dev/calendar/calendar.html
  27. 27!dev/calendar/calendar.html
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40
  41. 41
  42. 42
  43. 43
  44. 44
  45. 45
  46. 46
  47. 47
  48. 48
  49. 49
  50. 50
  51. 51
  52. 52
  53. 53
  54. 54
  55. 55
  56. 56
  57. 57
  58. 58
  59. 59
  60. 60
  61. 61
  62. 62
  63. 63
  64. 64
  65. 65
  66. 66
  67. 67
  68. 68
  69. 69
  70. 70
  71. 71
  72. 72
  73. 73
  74. 74
  75. 75
  76. 76
  77. 77
  78. 78
  79. 79
  80. 80
  81. 81
  82. 82
  83. 83
  84. 84
  85. 85
  86. 86
  87. 87
  88. 88
  89. 89
  90. 90
  91. 91
  92. 92
  93. 93
  94. 94
  95. 95
  96. 96
  97. 97
  98. 98
  99. 99
  100. 100
  101. 101
  102. 102
  103. 103
  104. 104

↑ Back to top Tweet itShare on Facebook

Sven is the co-founder and former CEO of Smashing Magazine. He's now writing at his Conterest Blog, where he focuses on blogs, content strategy and publishing — all in German.

  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!

  2. 2

    Just saw that i got a Pingback for ‘Calendar System’ at Nodstrum.
    This has since been updated with:


  3. 3

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

  4. 4

    Another important js date picker which has been omitted here:

  5. 5

    easy to print calendar, unix:

    cal -y > $Deskop/calendar.txt

  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.

  7. 7
  8. 8

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

    – Adam Hirsch,

  9. 9

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

  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.

  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 ^_^

  12. 12

    I’ve created an interesting prototype calender here

  13. 13

    well done… once more :)

  14. 14

    Here’s another more-or-less semantic experiment of using ordered lists:

  15. 15

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


  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.

  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…

  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):


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

  19. 19

    For more reviews on calendar apps take a look at

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

  22. 22

    I developed a new calendar application. You can check it at;
    If you’ll add my application to your post, I’ll be very happy.
    Best wishes.

  23. 23

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

  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.

  25. 25

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

  26. 26

    Great Post guys!!! Thanks ;-)

  27. 27

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

  28. 28

    I think you missed this one php icalender

  29. 29

    Hi Guys,

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

  30. 30

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


↑ Back to top