Open Source Resources for Web Application Developers

About / Archives / Advertise / Books /Contact

Professionally Designed Web Icons for Your Websites

Free Ultra-light Calendar/Date Picker jQuery Plugin

13 Apr

Posted by Ray Cheung as Calendar, MIT License

CalendarPicker is a free ultra-light calendar/date-picker jQuery plugin. It looks different from all the others, supports multiple languages, and allows fast movement across months and years. This approach might not suitable for every context, but I am sure someone will find it useful.

CalendarPicker enables mouse wheel to change dates; it is enabled on years, months and days bars. Calendar picker is released under MIT license.

Requirements: jQuery Framework
Demo: http://bugsvoice.com/applications/bugsVoice/site/test…
License: MIT License

11 Comments

jsDatePick – A Simple Free Javascript Date Picker

31 Mar

Posted by Ray Cheung as Calendar, GPL License

jsDatePick is a javascript date picker that uses DOM techniques to generate its HTML code. Read the parameters and working examples below, and within minutes, you can have a popup date picking solution on your website.

The user launches the calendar by entering the input field, and then chooses a date, automatically returning the selected date to the field. jsDatePick has a range of parameters for extending or limiting default functionality.

Requirements: -
Demo: http://javascriptcalendar.org/javascript-date-picker.php
License: GPL License

7 Comments

Pure HTML Clocks using Javascript & CSS Rotation

24 Feb

Posted by Ray Cheung as Calendar, License Free

The two Clocks are pure HTML using JavaScript and CSS rotation. There are no Adobe Flash files or <canvas> going on, just regular <div> and <img> tags. The way it works is by taking those images in an { overflow: hidden } <div> and rotating them, via JavaScript, using the proposed CSS transform property.

However, this isn’t going to work in any currently available version of Internet Explorer or many older browsers. It only works in Google Chrome, Safari and Firefox 3.5+ browsers support the CSS transform property.

Requirements: Browsers support CSS transform property
Demo: http://joncom.be/code/css-clocks/
License: License Free

12 Comments

jQuery Digital Clock Inspired by HTC Hero Widget

16 Feb

Posted by Ray Cheung as Calendar, GPL License, MIT License

jDigiClock is a jQuery plugin inspired from HTC Hero Clock Widget. To use the jDigiClock plugin, simply include the jQuery library, the jDigiClock source file and jDigiClock core stylesheet file inside the <head> tag of your HTML document.

jDigiClock accepts a lot of configuration options, e.g. Clock images path, Weather images path, Set AM/PM option, Weather location code, Set weather metric mode: C or F, Weather update in minutes.

Requirements: jQuery Framework
Demo: http://www.radoslavdimov.com/jquery-plugins/jquery-plugin-digiclock/
License: MIT and GPL License

9 Comments

Sleek Event Timeline with PHP, MySQL, CSS & jQuery

08 Jan

Posted by Ray Cheung as Calendar, License Free

Tutorialzine has just showed us how to make an Advanced Event Timeline with the help of PHP, MySQL, CSS & jQuery, that will display a pretty time line with clickable events. Adding new events is as easy as inserting a row in the database.

The main idea is that we have two divs – timelineLimiter and timelineScroll positioned inside it. The former takes the width of the screen, and the latter is expanded to fit all the event sections that are inserted inside it. This way only a part of the larger inner div is visible and the rest can be scrolled to the left and right by a jQuery slider.

Now you can create a sleek event timeline that you can modify to showcase the important events that mark your days. It is easily modifiable and you are free to use it in your or your clients’ projects.

Requirements: PHP, CSS and jQuery Framework
Demo: http://demo.tutorialzine.com/2010/01/advanced-event-timeline…
License: License Free

4 Comments

ATWidget – Easy to Customize Date & Time Picker

13 Nov

Posted by Ray Cheung as CC License, Calendar

The Any+Time JavaScript Library includes an easy-to-use, easy-to-customize calendar widget (date and/or time picker) and a powerful Date/String parse/format utility. ATWidget is the AJAX-capable JavaScript GUI component. It is easy to add to a page and even easier to use! Unlike most date/time selection tools, nearly every field in an ATWidget control can be chosen with a single mouse click.

The ATWidget date/time control is attached to any input (text) field with a single line of JavaScript code. It can be placed as a popup or inline. The appearance of the ATWidget calendar tool can be customized by modifying or supplementing the included CSS stylesheet. All labels, as well as month, weekday and era names and abbreviations, are also easy to change.

Requirements: Prototype Framework
Demo: http://www.ama3.com/anytime/
License: Creative Commons License

7 Comments

An Unobtrusive Javascript Calendar & Datepicker

31 Oct

Posted by Ray Cheung as CC License, Calendar

After the success of Vista-like Ajax Calendar, dev.base86 has recently released Calender Eightysix. It is completely built from scratch with pure javascript, making use of some of the superb features the latest MooTools javascript framework has to offer.

Calender Eightysix is an unobtrusive developer friendly javascript calendar and datepicker offering a better user experience for date related functionalities. Calendar Eightysix has a variety of options to style and format the calendar to your needs. This is done by providing options while instantiating the class.

Requirements: Mootools Framework
Demo: http://dev.base86.com/scripts/datepicker_calendar_eightysix.html
License: Creative Commons 3.0 License

2 Comments

How to Create a Animated Flip-Down Clock with Mootools

30 Oct

Posted by Ray Cheung as Calendar, License Free

Nettus has published a tutorial: Learn how to Create a Retro Animated Flip-Down Clock. In the tutorial, we will create an animated flip down clock inspired by the 70’s. Using the Mootools framework, we are trying to replicate the flip action of the pads and make it as lifelike as possible. With it’s retro styling, it could be a really neat thing to add to your website.

The clock is composed of three groups of images: hours, minutes and seconds, which are split in an upper part and a lower part so we can obtain the “flip” effect. The main animation consists of reducing the height of the upper part from 100% to 0%, then increasing the height of the lower part from 0% to 100% for each group in which a digit changes.

Requirements: Mootools Framework
Demo: http://nettuts.s3.amazonaws.com/470_clock/Source/index.html
License: License Free

1 Comment

A Simple 2-Click in Place Editing Time Picker

29 Aug

Posted by Ray Cheung as Calendar, MIT License

jQuery.timepickr was created in a attempt to make the process of inputing time in a form as easy and natural as possible. It is a simple 2-click in place editing time picker and regular time picker.

It is unobtrusive and degrade gracefully. It has intuitive keyboard navigation support as well. jQuery.timepickr has just released Version 0.7 with the support of jQuery UI theme switcher. You can play around it with different themes offered.

Requirements: jQuery Framework
Demo: http://haineault.com/media/jquery/ui-timepickr/page/
License: MIT License

2 Comments

jQuery Weekly Calendar Plugin inspired by Google Calendar

04 Aug

Posted by Ray Cheung as Calendar, MIT License

The jquery-week-calendar plugin provides a simple and flexible way of including a weekly calendar in your application. It is built on top of jquery and jquery ui and is inspired by other online weekly calendars such as google calendar.

Calendar events can be supplied as an array, url or function returning json. They can be dragged, dropped and resized. Lots of callbacks for customizing the way events are rendered plus callbacks for drag, drop, resize, mouseover, click etc. The jquery-week-calendar plugin is also highly configurable, enabling variable timeslots, readonly calendars, display of partial days, custom date formatting, direct manipulation of individual events for create, update, delete of events and much more.