Responsive Event Calendar & Date Picker jQuery Plugin - Monthly

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.