Responsive Event Calendar & Date Picker jQuery Plugin - Monthly
File Size: | 153 KB |
---|---|
Views Total: | 64959 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Monthly is a jQuery plugin that provides responsive and easy-to-customize event calendar and date picker for your web application. The events can be stored in a XML file and support for highlighting event days when mouse hover.
Basic usage:
1. Include the jQuery Monthly plugin's files after you have jQuery library installed and we're ready to go.
<link href="css/monthly.css" rel="stylesheet"> <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="js/monthly-1.0.0.js"></script>
2. Create an inline calendar that loads events from an external XML file.
<div class="monthly" id="demo-1"></div>
$('#demo-1').monthly({ mode: 'event', xmlUrl: 'events.xml' });
3. The sample data in the events.xml
.
<?xml version="1.0"?> <monthly> <event> <id>1</id> <name>Single Day Event</name> <startdate>2015-12-5</startdate> <enddate></enddate> <color>tomato</color> <url>http://www.google.com</url> </event> <event> <id>2</id> <name>Multi Day Event</name> <startdate>2015-12-7</startdate> <enddate>2015-12-11</enddate> <color>dodgerblue</color> <url></url> </event> </monthly>
4. Create a date picker attaching to an input field.
<input type="text" id="date-picker" value="Select Date"> <div class="monthly" id="demo-2"></div>
$('#demo-2').monthly({ target: '#date-picker', startHidden: true, showTrigger: '#date-picker' });
5. Plugin's default customization options.
$('#selector').monthly({ // 'Sun' or 'Mon' weekStart: 'Sun', // 'event' = event calendar mode mode: '', // Path to events XML file xmlUrl: '', // target element target: '', // shows listing of events under calendar eventList: true, // max width of the calendar maxWidth: false, // hides calender until trigger is clicked startHidden: false, // trigger element to show the calendar showTrigger: '' });
Change logs:
2017-10-06
- v2.2.2
2017-05-25
- Fix incorrect listing of "AM" vs "PM" in event list
2017-02-27
- Fix readme tag, add dtYYYY-MM-DD class to days
2017-02-08
- Fixed Calendar does not load in IE 10
2017-01-17
- v2.2: A good deal of edits including localization, code cleanup & json events.
2016-09-02
- v2.1: Fixed a bug where the event list would animate in but not out. Merged a pull request to include json support. (Thanks marekstodolny!) Made buttons more visible in header for closing event list & reverting to the current month.
2016-04-27
- v2.0.7: Fixed a bug where divs were left behind when advancing through months. Merged a pull request fixing day name options.
2016-03-17
- v2.0.6: Fixed a bug where AM and PM would show up even if there's no time specified. Also fixed a bug where long event titles weren't being truncated. Added xml error handling.
2016-02-17
- v2.0.5: Dropped flexbox in favor of display:table-cell to support IE9
2016-02-11
- v2.0.4: Added more vendor prefixes to support older versions of iOS
2016-01-18
- v2.0.3: Fixed a big caused by using Monday as the start of the week, and months where the first day is Sunday.
2016-01-07
- v2.0.2: Fixed a bug caused by using zero indexed days or months in the xml file. Fixed another bug where setting eventList to false didn't work.
2016-01-06
- v2.0.1: Mobile style tweak
This awesome jQuery plugin is developed by kthornbloom. For more Advanced Usages, please check the demo page or visit the official website.