Responsive Event Calendar & Date Picker jQuery Plugin - Monthly

File Size: 153 KB
Views Total: 61871
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="//"></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>
  mode: 'event',
  xmlUrl: 'events.xml'

3. The sample data in the events.xml.

<?xml version="1.0"?>

    <name>Single Day Event</name>

    <name>Multi Day Event</name>


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>
  target: '#date-picker',
  startHidden: true,
  showTrigger: '#date-picker'

5. Plugin's default customization options.


  // '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:


  • v2.2.2


  • Fix incorrect listing of "AM" vs "PM" in event list


  • Fix readme tag, add dtYYYY-MM-DD class to days


  • Fixed Calendar does not load in IE 10


  • v2.2:  A good deal of edits including localization, code cleanup & json events. 


  • 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.


  • v2.0.7: Fixed a bug where divs were left behind when advancing through months. Merged a pull request fixing day name options.


  • 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.


  • v2.0.5: Dropped flexbox in favor of display:table-cell to support IE9


  • v2.0.4: Added more vendor prefixes to support older versions of iOS


  • v2.0.3: Fixed a big caused by using Monday as the start of the week, and months where the first day is Sunday.


  • 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.


  • 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.