Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='http://fullcalendar.io/js/fullcalendar-2.5.0/fullcalendar.css' rel='stylesheet' />
<link href='http://fullcalendar.io/js/fullcalendar-2.5.0/fullcalendar.print.css' rel='stylesheet' media='print' />
<link href='http://fullcalendar.io/js/fullcalendar-scheduler-1.1.0/scheduler.min.css' rel='stylesheet' />
<script src='//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js'></script>
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://fullcalendar.io/js/fullcalendar-2.5.0/fullcalendar.js'></script>
<script src='http://fullcalendar.io/js/fullcalendar-scheduler-1.1.0/scheduler.js'></script>
​
<!-- the code from the JavaScript tab will go here -->
​
​
<!-- the code from the CSS tab will go here -->
​
</head>
<body>
​
    <div id='calendar'></div>
​
</body>
</html>
​
 
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;
}
 
$(function() { // document ready
  $('#calendar').fullCalendar({
    resourceAreaWidth: 230,
    now: '2015-12-10',
    editable: true,
    aspectRatio: 1.5,
    scrollTime: '00:00',
    header: {
      left: 'promptResource today prev,next',
      center: 'title',
      right: 'timelineDay,timelineThreeDays,agendaWeek,month'
    },
    defaultView: 'timelineThreeDays',
    views: {
      timelineThreeDays: {
        type: 'timeline',
        duration: { days: 3 },
        minTime: "08:00"
      }
    },
    resourceLabelText: 'Rooms',
    resources: [
      {  
        "id":"428267df-4803-4abd-844f-0071ae1c0efa",
        "title":"Auditorium a"
      },
      {  
        "id":"bf694d26-c711-4160-b34e-0567d636dee9",
        "title":"Auditorium b"
      }
    ],
    events: [
      {
        "resourceId":"428267df-4803-4abd-844f-0071ae1c0efa",
        "id":"6663fc22-e700-4137-85c5-c12e774c312f",
        "title":"Monsters University",
        "start":"2015-12-10T07:30:00.000Z",
        "end":"2015-12-10T09:51:47.000Z"
      },
      {
        "resourceId":"bf694d26-c711-4160-b34e-0567d636dee9",
        "id":"cc352312-dab0-47b2-9a2d-317ee77d58a4",
        "title":"Fifty Shades of Grey",
        "start":"2015-12-10T07:30:00.000Z",
        "end":"2015-12-10T10:13:02.000Z"
      }
    ]
  });
  
});
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers