#054 Display Timeline — HTML Functional Class 実使用サンプル

bf-display-timeline はTimeline本体のClassです。Bar / Shape Commentは data-timeline-items の displayType で指定します。

<div class="bf-display-timeline"
  data-timeline-start="09:00"
  data-timeline-end="18:00"
  data-timeline-theme="light"
  data-timeline-items='[{"id":"work","label":"勤務時間","kind":"work","displayType":"bar","start":"09:00","end":"18:00","backgroundColor":"#d9e5cf","textColor":"#102030","blendMode":"normal","fullHeight":true}]'>
</div>

<div class="bf-display-timeline"
  data-timeline-start="09:00"
  data-timeline-end="18:00"
  data-timeline-theme="light"
  data-timeline-items='[{"id":"meeting","label":"打ち合わせ","kind":"meeting","displayType":"shapeComment","start":"10:00","end":"10:30","commentText":"打ち合わせ","commentPosition":"bottom","commentOffsetX":0,"commentOffsetY":0,"commentWidth":96,"backgroundColor":"#ffe500","textColor":"#101010","blendMode":"normal"}]'>
</div>

<div id="schedule" class="bf-display-timeline"
  data-timeline-start="09:00"
  data-timeline-end="21:00"
  data-timeline-step="60"
  data-timeline-snap="15"
  data-timeline-bar-height="64"
  data-timeline-bar-layout="overlap"
  data-timeline-grid="true"
  data-timeline-labels="true"
  data-timeline-editable="true"
  data-timeline-theme="light"
  data-timeline-items='[{"id":"work","label":"勤務時間","kind":"work","displayType":"bar","start":"09:00","end":"18:00","backgroundColor":"#d9e5cf","textColor":"#102030","blendMode":"normal","fullHeight":true},{"id":"break","label":"休憩時間","kind":"break","displayType":"bar","start":"12:00","end":"13:00","backgroundColor":"#d8e6f2","textColor":"#102030","blendMode":"multiply"},{"id":"meeting","label":"打ち合わせ","kind":"meeting","displayType":"shapeComment","start":"10:00","end":"10:30","commentText":"打ち合わせ","commentPosition":"bottom","commentWidth":96,"backgroundColor":"#ffe500","textColor":"#101010"},{"id":"party","label":"飲み会","kind":"info","displayType":"bar","start":"19:00","end":"21:00","backgroundColor":"#f2bd5d","textColor":"#102030","blendMode":"overlay"}]'>
</div>

<link rel="stylesheet" href="/boneflow/css/bone-display-timeline.css">
<script src="/boneflow/js/bone-blend.js"></script>
<script src="/boneflow/js/bone-display-timeline.js"></script>
<script src="/boneflow/js/bone-display-timeline-functional-class.js"></script>