Web上で様々な作業を行えるようになったことで、UIに求められる多様性も増しています。特に面倒だと感じるのは時間関係ではないでしょうか。カレンダー、ウィークリー、デイリーなどいずれにおいても時間に合わせた表示、処理は大変です。 そこで様々なライブラリを知っておくことでいざとなった時に役立ちます。今回は横型のスケジュール選択ライブラリschedulerjsを紹介します。

schedulerjsの使い方

schedulerjsの初期表示です。

薄いブルーのエリアはドラッグしたり、端をドラッグして枠の幅を増減できます。

実際に操作しているところです。

実際の描画は予定を配列で渡すだけです。

var list = [
    {
        'name': 'Chewbacca',
        'appointments': [
            {'start': '08:05', 'end': '09:00', 'title': 'Make strange noises', 'class': 'meeting', 'payload': {myId: 1}},
        ]
    },
    {
        'name': 'Darth Vader',
        'appointments': [
            {'start': '12:00', 'end': '13:30', 'title': 'Swing lightsaber in anger', 'class': 'meeting'},
            {'start': '14:30', 'end': '15:30', 'title': 'Test the death star superlaser', 'class': 'meeting'},
            {'start': '14:00', 'end': '14:30', 'title': 'Strangle people with lack of faith', 'class': 'meeting'}
        ]
    }
];
  :
var $scheduler = $("#scheduler").schedulerjs({
    'list': list,
      :
});

複数予定を渡せるので何人かのユーザで共通に空いているところを見つけるのも簡単そうです。クリックイベントや選択されている時間の範囲もJavaScriptで操作でき、他の処理と簡単に連携できるでしょう。

schedulerjsはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。

MT - schedulerjs magnusjt/schedulerjs