Demandbase Connect

DotConcepts offers everything you will need to create your web site including quality web design, custom web development and unique graphic design.

Design Resources - Calendar and Clock Widgets

As a web designer, you get a lot of use out of these top quality open source widgets for producing a variety of different date and time widgets. Whether you're looking for a crisp calendar display, a unique timelines or just want to add functionality for easy date picking, you're bound to find something here that meets your needs.

Advanced Event Timeline - A little more complicated than the other widgets here, Tutorialzine put together a walkthrough showing the php, html and jquery necessary to build a custom timeline with clickable events. Two divs control the functionality; one set to the desired width and the other containing the full display so that users can easily scroll to any area of your timeline. The php in their example is set to pull event by year, but this could easily be adapted to a monthly or even weekly calendar. All of the elements can be controlled through CSS allowing you to seamlessly integrate the timeline into any area of a design.

Any+Time Date/Time Picker - This javascript widget built on the Any+Time Library has more customizations than any date picker we've ever seen. In addition to fully customizable date/time fields, you can choose which fields to display, place limits on dates, start your week at any day and even accept dates in BC if you ever have the need. There's also a variety of styling options from the standard css expectations to theming options through jquery Theming, Theme Switcher or Themeroller. Any+Time also offers an older version for the Prototype library.

Calendar Eightysix - A lightweight datepicker based on the MooTools framework. Easy to use and theme, this date picker doesn't require php or ajax to function. The widget can be customized to start on any day, exclude weekends or holidays, pop-up with an icon or any entry into the field, and even change the language.

ClockLink - For those times that just call for a good looking clock, ClockLink provides a bevy of flash-based clocks. Choose from Digital, Analog, Count down, Count up, World clocks and even Transparent options. You can also change the time zone and display a location of your choice.

Date Picker jQuery Plugin - An excellent solution when your users need to pick a range or two of dates rather than a single day. Dates can be marked in a variety of ways including weekends, holidays and even your own specials. Other options include the ability to display multiple months by default, a verity of selection types, localization and CSS customization.

Date Range Picker - An update to an already successful date picker, this plugin now uses the latest version of jQuery's datepicker, integrated date.js and added the jQuery CSS Framework classes for easy design changes. The unique dropdown shortcuts allow users to quickly select a date or range based on your preferences. The developers are currently working to provide collision detection and better functioning with more than one instance on a page.

dhtmlx Scheduler - Light weight and fast, this fully javascript calendar provides a rich solution for scheduling. Advanced AJAX functionality allows drag and drop changes to scheduling as well as editing, updates, additions and deletion with no page refreshes. This script is the front end only requiring either the dhtmlx Connector or your own code to integrate the calender with a server database. Formats, language and even a Skin Builder give many customization options. dhtmlx also offers this calendar as a module for Joomla and Drupal.

iCal-like jQuery Calender - Using a bit of advanced CSS to achieve the famous Apple styling, this calender was built to provide a lightweight solution for Wordpress implementations. Rollovers bring up the days events and descriptions and with a bit of back-end coding can be used to allow date editing as well.

jDigiClock - Inspired by the HTC Hero Clock Widget, this jQuery plugin combines a digital clock with a weather display. Both the clock and the weather aspects are customizable, including the ability to change the clock and weather images, weather location and frequency of weather updates. jDigiClock requires a source file and stylesheet and is released under both the MIT and GPL licenses.

jQuery Weekly Calender - Inspired by Google Calender, this weekly calender display is incredibly flexible and customizable. Data can be sent through an array, url or function that returns json. Events popup in their own windows that can be moved, rearranged and resized. Calendars can be read-only or editable, display full weeks or only set days and have customizable date formatting.

PureCSS Timeline - This simple CSS based timeline degrades easily to an unordered list making it useful for any implementation. Inline styles are required for placing the items correctly in the space, so CSS purists may find themselves cringing. Overall an excellent and still basic solution.

Reblog this post [with Zemanta]


Post new comment

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

More information about formatting options

Subscribe to our RSS Feed Subscribe to our Twitter Feed

We are proud that our web design and development efforts have been able to help businesses grow in the Akron area and beyond.
Talk to one of our Project Managers today and let us make your Dot Concepts a Dot Reality.