Easy Weekly Calendar Plugin For jQuery - easycal

File Size: 5.66 KB
Views Total: 24714
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Easy Weekly Calendar Plugin For jQuery - easycal

easycal is a simple jQuery plugin used to display events, scheduled tasks in a table based weekly calendar.

Dependencies:

  • jQuery
  • underscore.js
  • moment.js

How to use it:

1. Load jQuery library and other dependencies in the document.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>

2. Load the jQuery easycal plugin's JS and CSS in the document.

<link href="easycal.css" rel="stylesheet">
<script src="easycal.js"></script>

3. Prepare your events as follows:

function getEvents(){

  return [
    {
      id : 'E01',
      title : 'Meeting with BA',
      start : '27-10-2015 10:30:00',
      end : '27-10-2015 11:00:00',
      backgroundColor: '#443322',
      textColor : '#FFF'
    },
    {
      id : 'E01',
      title : 'Lunch',
      start : '27-10-2015 12:30:00',
      end : '27-10-2015 13:00:00',
      backgroundColor: '#12CA6B',
      textColor : '#FFF'
    },
    {
      id : 'E02',
      title : 'Customer Appointment',
      start : '29-10-2015 09:00:00',
      end : '29-10-2015 09:30:00',
      backgroundColor: '#34BB22',
      textColor : '#FFF'
    },
    {
      id : 'E03',
      title : 'Buddy Time',
      start : '30-10-2015 11:00:00',
      end : '30-10-2015 12:30:00',
      backgroundColor: '#AA3322',
      textColor : '#FFF'
    }
];

4. Create an DIV element that will act as a container for the weekly calendar.

<div class="mycal"></div>

5. Call the plugin to render a weekly calendar inside the DIV element you just created.

$('.mycal').easycal({

minTime : '09:00:00',
maxTime : '19:00:00',
slotDuration : 30,
startDate : '31-10-2015', 
events : getEvents()

});

6. All the default options.

$('.mycal').easycal({

columnDateFormat : 'dddd, DD MMM',
timeFormat : 'HH:mm',
minTime : '08:00:00',
maxTime : '19:00:00',
slotDuration : 15, //in mins
dayClick : null,
eventClick : null,
events : [],

widgetHeaderClass : 'ec-day-header',
widgetSlotClass : 'ec-slot',
widgetTimeClass : 'ec-time'

});

Change log:

2015-01-18

  • Refactoring css
  • Exposed public methods for widget refresh and destroy and more code restructure

2015-01-17

  • Added ability to configure granularity for time axis separate from what is displayed

This awesome jQuery plugin is developed by karansood. For more Advanced Usages, please check the demo page or visit the official website.