Event Calendar

Requirements

1. jQuery 3.1.1
2. jQuery UI 1.12.1
3. jQuery UI 1.12.1 theme
4. moment.js 2.17.1

Parameters

The Calendar contstructor accepts an object with optional parameters.

year - The starting year to display. The default is the current year.

month - The starting month to display. The default is the current month.

container - The html element in which to build the calendar. By default it will look for an element with an id of 'calendar'.

url - The URL from which to fetch events.

eventLabels - An object allowing the user to provide their own labels for event title and time.

Usage

Using the defaults:

var myCalendar = new Calendar();

Providing optional parameters:

// Create a calendar instance with default of todays month and year
var myCalendar = new Calendar({
  container: '#my-calendar',
  year: moment.year(),
  month: moment.month(),
  url: '/js/events.json'
});

Providing user created labels for the events:

var myCalendar = new Calendar({
  eventLabels: {
    title: "presentation",
    time: "start_time"
  }
});

Events object

While the labels can be changed the events themselves are expected in a particular format. The calendar expects a json object with the dates as labels. These objects can containe a URL and an array of events. The events are expected to have at least a title and time.

{
  "2017-1-24": {
    "url": "http://mycalendar.com/2017-1-24",
    "events": [
      {
        "id": 1,
        "title": "My Event",
        "time": "10:30 am",
        "url": "http://my-event-site.com"
      },
      {
        "id": 2,
        "title": "Another Event",
        "time": "6:30 pm",
        "url": "http://another-event.com"
      }
    ]
  }
}