Bar Calendar

Bar calendar displays multiple months as columns. Events can take be represented in two ways:

• bars: full-day or multiple days events

• dots: short events contained in a single day

This calendar is aimed to be used to give an overview of a middle-term planning with few events per a week.

See the repository and report there any issue

Requirements

• Bootstrap CSS 3 or greater
• jQuery 3 or greater
• Moment 2 or greater

Getting Started

• Install the plug in

npm install --save bar-calendar

• Include CSS

<link href="path/to/bootstrap.min.css" rel="stylesheet">
<link href="path/to/bar-calendar.css" rel="stylesheet">

• Include JS

<script src="path/to/jquery.min.js"></script>
<script src="path/to/moment.min.js"></script>
<script src="path/to/bar-calendar.js"></script>

Then

$("#my-calendar").barCalendar({
  schedule: [                             // list of events scheduled in the planning
    {
      title: "Event 1",
      startDate: "2017-06-10",      // mandatory, "yyyy-MM-dd" or Date
      endDate: "2017-07-06",        // optional,  "yyyy-MM-dd" or Date
      type: "busy"
    },
    {title: "Event 2", startDate: "2017-06-10", endDate: "2017-06-10", type: "vacancy"},
    ...
  ],
  height: 400, // height in px, default is 400
  onClick: function(el, params) {         // triggered on click on the event
    // el: target jQuery element
    // params: schedule's event
  },
  monthsNames: ["Janvier", "Février", "Mars", ...],   // default full names with moment locale
  onMouseEnter: function(el, params) {},  // triggered on mouseenter on the event
  onMouseLeave: function(el, params) {},  // triggered on mouseleave on the event
  onDateChange: function(newDate, oldDate) {},  // triggered when focus date changes
  onRefresh: function() {}                // triggered when calendar is refreshed
});

Examples

You just need to install examples dependencies:

cd node_modules/bar-calendar
npm install

Browse the examples/ directory and open files in your browser

Methods

• Schedule

$("#my-calendar").barCalendar('schedule');                // returns the current schedule
$("#my-calendar").barCalendar('schedule', newSchedule);   // sets newSchedule as current schedule

Handling events

Click and hover events are caught but not handled by the barCalendar in order to let you use your own UI library.

Define your handlers as barCalendar options. Listeners will give you the selected elements in order to let you place popovers or tooltips.

Don't forget to clean popovers by listening onDateChange.

Angular integration

[Todo] Test or make another package

Calendar detail

Display structure

#my-calendar
  |
  |-- .cal-nav      # buttons on top of the calendar
  |
  |-- .cal-head     # months labels
  |
  |-- .cal-body     # buttons on top of
        |
        |-- .cal-body-head      # days labels
        |
        |-- .cal-body-content   # events wrapper
              |
              |-- .body-layer-bg        # background layer
              |
              |-- .body-layer-months    # months wrapper
                    |
                    |-- .month .month-content    # events wrapper
                          |
                          |-- .cal-bars-wrapper     # all events of type 'bar' wrapped together
                                |
                                |-- .cal-bar        # single bar event
                          |
                          |-- .cal-dots-wrapper     # events of type 'dot', wrapped by day
                                |
                                |-- .cal-dot        # single dot event

Display rules

Events start and end dates can either be javascript Date objects or strings under yyyy-MM-dd format

In the calendar, they are all handled as yyyy-MM-dd strings. Here are the current rules used to display the events:

• if there is no endDate or endDate has the same value under yyyy-MM-dd format as startDate, it is handled as a dot event
• events are always ordered from the earliest to the oldest
• in the same month, events starting earlier are on the right
• if two events at start the same day, we compare the end date. In this case, the event with the greatest endDate is considered as earliest
• dot events in the same day are ordered from left (earliest) to right (oldest)

Customize

• event's type

You are free to use any value for type. A class type-[type] will be generated over the bar-wrapper or dot element. Then override colors and sizes in your own stylesheets.