<div class="content">
  <div class="content__container">
    <rs-schedule></rs-schedule>
  </div>
</div>

.content__container {
  padding: 1em;
}

/* FIXXME: fix error with black path covering the chart */
.domain {
  display: none;
}

// With native web components support (e.g. chrome) the WebComponentsReady event will NOT fire.
// Web components upgrade synchronously, so there is no need for that. If you have to use the
// web components polyfill enable the following event listener:
// (see https://www.polymer-project.org/1.0/docs/migration.html#polymer-ready)
// window.addEventListener('WebComponentsReady', function(e) {
var data = [{
  "start": Date.parse("2016-04-13T14:30:00+01:00")
}, {
  "end": Date.parse("2016-04-13T18:30:00+01:00")
}, {
  "status": "confirmed",
  "summary": "Confirmed overlap event",
  "self": true,
  "start": Date.parse("2016-04-13T16:30:00+01:00"),
  "end": Date.parse("2016-04-13T18:30:00+01:00")
}, {
  "status": "tentative",
  "summary": "Tentative event",
  "self": false,
  "start": Date.parse("2016-04-13T15:00:00+01:00"),
  "end": Date.parse("2016-04-13T16:00:00+01:00")
}, {
  "status": "proposed",
  "summary": "Suggested event of some significant length",
  "self": true,
  "start": Date.parse("2016-04-13T16:00:00+01:00"),
  "end": Date.parse("2016-04-13T17:00:00+01:00")
}, ];

var chart = document.querySelector('rs-schedule');
chart.width = 350;
chart.data = data;
// });