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.

• You can find more AJAX-code snippets in our article 80+ AJAX-Solutions For Professional Coding.

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.

  

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

  
  Rainlendar sits on the desktop

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.