Vis.jsはタイムラインの営業時間のみを表示します

Question

私のプロジェクトではvis.jsを使用していますが、ビジネスの営業時間のタイムラインを表示する必要があります。私のアプリケーションでは夕方時間が無意味なので、24時間全体ではなく、営業時間のみを表示する方法はありますか？

私のコードオプションでこの設定を行うために、ドキュメントのオプションが見つからないようです。あなたがあたりの任意の週末の日付を提供週末非表示にするにはhttp://visjs.org/examples/timeline/other/hidingPeriods.html

：

Answer 1

あなたが探しているドキュメントは、「非表示期間」の例である週末を非表示にするには

をスタートとして、任意の土曜日を選び、次の月曜日が最後になり、毎週繰り返します。

午後5時まで午前9時あなたは17時と21時の終了時間の開始時間と任意の日の範囲を提供します。ここでは

{ 
    start: '2017-03-04 17:00:00', 
    end: '2017-03-05 09:00:00', 
    repeat: 'daily' 
} 

は以下の小さな例です。

var container = document.getElementById('timeline'); 
 

 
// sample timeline entry 
 
var items = new vis.DataSet([{ 
 
    id: 1, 
 
    content: 'foo', 
 
    start: '2017-06-13 10:00:00', 
 
    end: '2017-06-13 16:30:00' 
 
}]); 
 

 
// Configuration for the Timeline 
 
var options = { 
 
    // hide weekends - use any weekend and repeat weekly 
 
    hiddenDates: [{ 
 
     start: '2017-03-04 00:00:00', 
 
     end: '2017-03-06 00:00:00', 
 
     repeat: 'weekly' 
 
    }, 
 
    // hide outside of 9am to 5pm - use any 2 days and repeat daily 
 
    { 
 
     start: '2017-03-04 17:00:00', 
 
     end: '2017-03-05 09:00:00', 
 
     repeat: 'daily' 
 
    } 
 
    ], 
 
    // start and end of timeline 
 
    start: '2017-06-01', 
 
    end: '2017-06-30', 
 
    height: '140px', 
 
    editable: false 
 
}; 
 

 
// Create a Timeline 
 
var timeline = new vis.Timeline(container, items, options);

<link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.20.0/vis.min.css" rel="stylesheet" /> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.20.0/vis.min.js"></script> 
 

 
<h3>Mon-Fri 9am to 5pm working hours timeline example</h3> 
 
<div id="timeline"></div>