Home jQuery 20+ Awesome jQuery Calendar and Date Picker Plugins

20+ Awesome jQuery Calendar and Date Picker Plugins

6 min read
0
0
14

There are tons of jQuery plugins that offer date-time functionality. Some of these plugins are more developed than others and each one has its unique benefits. It is important to note that no plugin should be seen as ideal since every project is subjective and need its solution. In choosing a great plugin, you should check for balanced documentation, broad compatibility, easy and open customization, and practical UX. Below are some top-notch free calendar and date-picker jQuery plugins:

Timeline calendar

It’s brilliant because it can be styled and scaled easily to fit any website. Also, it’s compatible with all screen sizes and has a dynamic event viewer with specific dates and details. The dates for each event are either underlined or highlighted.

Timeline calendar

 

[button-red url=”http:/codecanyon.net/item/timeline-calendar/49550?ref=imTaimur” target=”_blank” rel=”nofollow external noopener noreferrer” position=”left”]View[/button-red]

FullCalendar

External data might be pulled through JSON/AJAX. This plugin has optional multi-language settings and has a different way of highlighting regular and special intervals. Furthermore, it runs on top of Bootstrap with traditional CSS classes.

FullCalendar

 

[button-red url=”http:/arshaw.com/fullcalendar/” target=”_blank” rel=”nofollow external noopener noreferrer” position=”left”]View[/button-red]

Create astonishing iCal-like calendars with jQuery

This is the most convenient jQuery Mobile full-screen calendar and it has customizable content and theme for calendar events. jQM Calendar is lightweight and its JS+CSS files come out to 14kb.

Create astonishing iCal-like calendars with jQuery

 

[button-red url=”http:/stefanoverna.com/blog/2009/01/create-astonishing-ical-like-calendars-with-jquery.html” target=”_blank” rel=”nofollow external noopener noreferrer” position=”left”]View[/button-red]

jQuery Date Range Picker

Here, you have a 7kb compressed with lots of custom options and setup details on special events or days. Also, it has navigation limits to certain weeks or months and it has a colorful user-interface with easy navigation.

jQuery Date Range Picker

 

[button-red url=”http:/codecanyon.net/item/jquery-date-range-picker/261519?ref=imTaimur” target=”_blank” rel=”nofollow external noopener noreferrer” position=”left”]View[/button-red]

Date Range Picker using jQuery

It offers various formats for selecting dates and times. Consequently, it needs only a line of JS code to operate.

Date Range Picker using jQuery

 

[button-red url=”http:/www.filamentgroup.com/lab/date_range_picker_using_jquery_ui_16_and_jquery_ui_css_framework/” target=”_blank” rel=”nofollow external noopener noreferrer” position=”left”]View[/button-red]

jQuery UI Datepicker Project

jQuery UI Datepicker Project

 

[button-red url=”http:/marcgrabanski.com/articles/jquery-ui-datepicker” target=”_blank” rel=”nofollow external noopener noreferrer” position=”left”]View[/button-red]

jMonthCalendar

jMonthCalendar

 

[button-red url=”http:/www.bytecyclist.com/projects/jmonthcalendar/” target=”_blank” rel=”nofollow external noopener noreferrer” position=”left”]View[/button-red]

Calendar A Javascript class for Mootools

Calendar A Javascript class for Mootools

 

[button-red url=”http:/www.electricprism.com/aeron/calendar/” target=”_blank” rel=”nofollow external noopener noreferrer” position=”left”]View[/button-red]

JavaScript Calendar

JavaScript Calendar

 

[button-red url=”http:/nogray.com/calendar.phpv” target=”_blank” rel=”nofollow external noopener noreferrer” position=”left”]View[/button-red]

 

Monket Calendar

Monket Calendar

 

[button-red url=”http:/monket.net/wiki-v2/Monket_Calendar” target=”_blank” rel=”nofollow external noopener noreferrer” position=”left”]View[/button-red]

JSCalendar

JSCalendar

 

[button-red url=”http:/codecanyon.net/item/jscalendar/67528?ref=imTaimur” target=”_blank” rel=”nofollow external noopener noreferrer” position=”left”]View[/button-red]

Simple jQuery date-picker plugin

Simple jQuery date-picker plugin

 

[button-red url=”http:/teddevito.com/demos/calendar.php” target=”_blank” rel=”nofollow external noopener noreferrer” position=”left”]View[/button-red]

MagiCalender

MagiCalender

 

[button-red url=”http:/codecanyon.net/item/magicalender/97898?ref=imTaimur” target=”_blank” rel=”nofollow external noopener noreferrer” position=”left”]View[/button-red]

jQuery date picker plug-in

jQuery date picker plug-in

 

[button-red url=”http:/www.kelvinluck.com/assets/jquery/datePicker/v2/demo/” target=”_blank” rel=”nofollow external noopener noreferrer” position=”left”]View[/button-red]

 

Subscribe To Our Newsletter

Subscribe To Our Newsletter

Join our mailing list to receive the latest news and updates from our team.

You have Successfully Subscribed!

Load More In jQuery

Leave a Reply

Your email address will not be published. Required fields are marked *