Monthly.js : jQuery Event Calendar Plugin

Shares

A jQuery based responsive event calendar plugin.

Features:

  • Use as a date picker, or a full fledged calendar
  • Fully responsive design
  • Intuitive event labels
  • Event list detail mode
  • Handles multiple instances on the same page
  • Well commented code for easy customization

Usage:

CSS

Start with adding the CSS to your header (or include via whatever preprocessor magic you use these days):

<link rel="stylesheet" href="css/monthly.css">

HTML

Next, add a div with a class of “monthly” and give it a unique id. The ID helps separate multiple instances of the plugin.

<div class="monthly" id="mycalendar"></div>

JS

Finally, add the javascript after jQuery and initialize it using the unique ID.

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/monthly.js"></script>
<script type="text/javascript">
    $(window).load( function() {
        $('#mycalendar').monthly();
    });
</script>
Subscribe to the JqueryPlugins.net mailing list:

* indicates required

Reply

Pin It on Pinterest