Monthly.js : jQuery Event Calendar Plugin

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>