jQuery is a cross-browser JavaScript library designed to simplify the client-side scripting of HTML. It was released in January 2006 at BarCamp NYC by John Resig. Used by over 41% of the 10,000 most visited websites, jQuery is the most popular JavaScript library in use today. I believe that jQuery is the best JavaScript library because it’s easy to use, flexible and has a lot of tutorials and plugins allowing you to integrate nearly any front end function into your site. Implementing a calendar in the web application is also made easy when using jQuery event calender and date picker plugins. Event calendars and date pickers are really useful plugins for web applications and is a good way to communicate any kind of event relevant to the site or business publishing it. jQuery is also useful in many other areas and in particular jquery carousel plugins can give a website a facelift. For this article I have found 30 useful jquery Calendar and jquery Date picker plugins web designers, freelancers and bloggers should be aware of.
1. Timeline calendar
Timeline is simple JavaScript driven calendar, which is written on top of jQuery JavaScript framework. Timeline is a horizontal representation of days in month. It can be used to display unlimited number of events with their descriptions.
2. Jquery Week Calendar
jQuery Week Calendar is a plugin which will include a weekly calendar in the web application. The events can be supplied as an array or JSON, and these events can be easily drag, drop and resize. There are a lot of options and event callbacks which you can refer through the official plugin page.
3. AJAX Booking Calendar Pro (jQuery Calendar Plugin)
This item is ideal if you want to add information about bookings to your rentals website. The Back End is easy to use and can be easily integrated into your own CMS as the Front End can be easily integrated into your website. Both Back End and Front End can be customized separately, and the number of usages on your webpage or website is unlimited. The Calendar comes with a PHP script, but any server side script can be used to load or to save data from any database.
The Booking Calendar is compatible with all browsers and devices (iPhone, iPad and Android smartphones).
4. jCalendar
jCalendar is an inline dynamic calendar built with jQuery. It originally started off based on the great jquery Calendar date picker by Kelvin Luck but has quickly morphed into its own code base.
5. iCal-like calendar
According to Stefano Verna’s web designer experience, one of the most common requests from clients when it comes to WordPress personalization, is to add a basic event calendar to their website.
6. wdCalendar
wdCalendar is a jquery based google calendar clone. It cover most google calendar features. User can choose to have a daily view, weekly view or monthly view. User can easily create, update or remove events by drag & drop. It is very simple to to integrate wdCalendar with a database.
7. Event Calendar
Event Calendar is a jquery Calendar and ColdFusion event calendar that works a lot like the Google Calendar system. With Event Calendar, you can share calendar information throughout your organization. There is also a simple user facade, that you can extend, to help control user rights.
8. Simple Events Calendar JS
Professional & Elegant Calendar, special for Modern web designs, templates etc.
9. VCalendar
VCalendar (Virtual Web Calendar) is an open source Web calendar application for posting and maintaining events and schedules online, in calendar format. This is an excellent and free jquery Calendar solution for use by online Web communities and any commercial and non-commercial organizations. Unlike any other online calendars, VCalendar comes with source code in multiple programming languages: PHP, ASP and ASP.NET with potential for adding more technologies in the future.
10. jQuery Date Range Picker
Simple jQuery UI date picker extension to allow user to choose date ranges. When user chooses a date, a hidden form is submitted. Uses jQuery 1.6 and jQuery UI 1 .8. Tested in and compatible with IE 6 -9, Firefox, Safari, Chrome, and Opera.
11. jQuery.calendarPicker
This component is a light-weight jquery Calendar/date-picker. Some features:
- supports internationalization (supports do not necessary means it is implemented:-) )
- supports changing current date
- supports mouse wheel scrolling
- supporting (deferred) callback on date selection
- supports variable number of years, months and days
- supports next/prev arrows
12. Create a jQuery calendar with AJAX, PHP, and a remote data source
The final jquery Calendar in this tutorial contains a hyperlink for each day of the month. When a hyperlink is clicked, a list of events for that day is requested from a remote script, cached client-side, and displayed on the page.
13. Unobtrusive Date-Picker Widget Update
A datePicker ( jquery Calendar) that is accessible using the keyboard, requires no embedded JavaScript blocks, uses no pop-up windows and is suitable for use within documents served as application/xhtml+xml.
14. timeago a jQuery plugin
Timeago is a jQuery plugin that makes it easy to support automatically updating fuzzy timestamps (e.g. “4 minutes ago” or “about 1 day ago”).
15. Date Range Picker using jQuery UI 1.7 and jQuery UI CSS Framework
Features and Updates
- Uses jQuery UI 1.7.1: The range jquery Calendar picker now uses the latest version of jQuery UI’s datepicker, and allows passing of native datepicker options.
- Date.js Integration: We’ve integrated the fantastic date.js library to allow for easy preset development.
- Optional Range Advancing Arrows: Optional forward and back arrows allow a user to jump forward and backward by range duration.
- jQuery UI CSS Framework-Driven: Our range picker uses jQuery UI CSS Framework classes, making it ThemeRoller-Ready.
16. jQuery Datepicker
A datepicker can easily be added as a popup to a text field or inline in a division or span with appropriate default settings. The popup shows when the field gains focus and is closed by clicking on the Close link or clicking anywhere else on the page. You can also remove the datepicker widget if it is no longer required.
17. CuteTime
- convert timestamps to ‘cuter’ language-styled forms (e.g. yesterday, 2 hours ago, last year, in the future!),
- customize the time scales and output formatting, and
- update automatically and/or manually the displayed CuteTime(s).
18. Multiday Calendar Datepicker JQuery Plugin
Multi-day, multi-month animated datepicker jquery Calendar plugin that weighs in at 14KB with the uncompressed development version.
19. jQuery Frontier Calendar
Full month calendar jQuery plugin that looks like Google Calendar. All UI elements such as next-month & previous-month buttons, add event form, edit event form, tooltips, etc, are not part of the calendar plugin. These are to be created by you so you can control how they look. Use the API hooks in your form elements to control the calendar.
20. jQuery UI Datepicker
The jQuery UI Datepicker is a highly configurable plugin that adds datepicker functionality to your pages. You can customize the date format and language, restrict the selectable date ranges and add in buttons and other navigation options easily. By default, the datepicker calendar opens in a small overlay onFocus and closes automatically onBlur or when a date is selected. For an inline calendar, simply attach the datepicker to a div or span. You can use keyboard shortcuts to drive the datepicker:
21. oCalendar -jquery Event Calendar Plugin
oCalendar is a jQuery plugin that allows you to add an event calendar to your sites or projects easily. You can add, edit and delete events from the client side.
DOWNLOAD by CodeCanyon (premium plugin)
22. jMonthCalendar
jMonthCalendar is a full month jquery Calendar that supports events. You simply initialize the calendar with options and an events array and it can handle the rest. The plugin does have extension points that allow the developer to interact with the calendar when the display is about to change months, after the display has changed months and when the event bubbles are clicked on. jMonthCalendar now supports hover extension points, hover over an event and trigger an event like an alert(); By default the events would each have a URL supplied that would link to a details page.
23. JSCalendar
JSCalendar is a Javascript class that adds accessible and unobtrusive date-pickers to your form elements. By using it, you can set up the coolest calendar in the shortest amount of time.
24. jQuery Calendar date picker plug-in
allows you to easily add “date picker” calendars to you HTML forms. These calendars make it much quicker, easier and less error prone for people to input certain types of dates.
25. ClockPick
26. Simple JQuery Date Picker
Pretty neat jquery Calendar datepicker which works on one or more text input elements and is easy styled with CSS. It is very easy to use this datepicker – just choose your year and month first and then pick some day
27. FullCalendar
FullCalendar is a famous jQuery calendar plugin which offers features like drag-and-drop, integration with Google Calendar and able to fetch events through JSON. Designers can easily customize the look and feel of the calendar, while developers can utilize the exposed hooks for user-triggered events
28. Sexy jQuery Multiday Calendar Datepicker Plugin – jCal
jCal allows for a sequence of months to reside side by side and for the user to select a number of consecutive days.
29. BlueShoes JS DatePicker Component
- Dates can be specified in many ways:
- Validation of typed in dates – eg 2001/02/29 won’t be accepted. Knows leap years.
- Works with pre-1970 dates (no unix-style limitation). Only the weekdays are not known for those dates.
- Allowed input formats are: American mm/dd/yyyy (12/31/2003), European dd.mm.yyyy (31.12.2003) and ISO yyyy-mm-dd (2003-12-31).
- Display format can be one of american, european or iso (default).
- Language support (currently en/de/fr, create your own).
- Supports Skins. In addition: the style and colors can be highly customized by color names and/or css classes.
- Compatibility: Old and non-js browsers will still have the input field, but no picker. They can still type in dates. See example 3 and the convertField() method.
- Can be directly used as Bs_Form field. See the Bs_Form package.
- Define the allowed date range (see example 5).
- Lots of settings and API methods.
30. Timeframe
Click-draggable. Range-makeable. A better jquery Calendar.
No comments:
Post a Comment