YVMayK

index.html

<div id='calendar'></div>

script.js

$(function() {
  // document ready

  $("#calendar").fullCalendar({
    defaultView: "agendaDay",
    defaultDate: "2017-05-07",
    editable: true,
    selectable: true,
    eventLimit: true, // allow "more" link when too many events
    header: {
      left: "prev,next today",
      center: "title",
      right: "agendaDay,agendaWeek,month"
    },
    resourceRender: function(resourceObj, labelTds, bodyTds) {
      labelTds.prepend(
        '<div style="text-align:center">' +
        '<img src="https://fullcalendar.io/images/logo.svg" width="58" height="48">' +
        '</div>'
      );
    },
    resources: [
      { id: "a", title: "Room A" },
      { id: "b", title: "Room B", eventColor: "green" },
      { id: "c", title: "Room C", eventColor: "orange" },
      { id: "d", title: "Room D", eventColor: "red" }
    ],
    events: [
      {
        id: "1",
        resourceId: "a",
        start: "2017-05-06",
        end: "2017-05-08",
        title: "event 1"
      },
      {
        id: "2",
        resourceId: "a",
        start: "2017-05-07T09:00:00",
        end: "2017-05-07T14:00:00",
        title: "event 2"
      },
      {
        id: "3",
        resourceId: "b",
        start: "2017-05-07T12:00:00",
        end: "2017-05-08T06:00:00",
        title: "event 3"
      },
      {
        id: "4",
        resourceId: "c",
        start: "2017-05-07T07:30:00",
        end: "2017-05-07T09:30:00",
        title: "event 4"
      },
      {
        id: "5",
        resourceId: "d",
        start: "2017-05-07T10:00:00",
        end: "2017-05-07T15:00:00",
        title: "event 5"
      }
    ]
  });
});

style.css

body {
    margin: 40px 10px;
    padding: 0;
    font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
    font-size: 14px;
}

#calendar {
    max-width: 900px;
    margin: 0 auto;
}

yvmayk.markdown

YVMayK

A Pen by Captain Anonymous on CodePen.

License.