はじめに
最近、なんちゃってグループウェアみたいなものを作ることがあり、
そんな中初めて、FullCalenderを使ってみようといろいろ試しています。
今回は、Timeline Viewで複数の日付を表示した際に、日付のが変わる位置の線を変更したという内容です。
もっといい方法があるよという人はぜひ教えてください。
本記事は、以下の記事がほぼそのままの内容ですが、こちらの記事ではCSS時間をべた書きしてしまっています。
ユーザーで設定を変更したり変数化した際、CSSを書き換えるのが難しいためJS側で設定できるようにしたものです。
How can I show separation between days in a FullCalendar ResourceTimeline?
注意
商用利用の場合Timeline Viewは有料機能です。
サンプルのソースコードと、完成イメージはライセンスが入っていないテスト状態です。
bootstrap 5.xでは動作しないようです。
環境
Chrome バージョン: 94.0.4606.81（Official Build） （64 ビット）
jquery 3.6.0
bootstrap 4.6.0
FullCalender 5.9.0
実装
完成イメージ
10/20と10/21の間に黒の線が入っています。
コード
var calendarEl = document.getElementById('calendar'); // カレンダーを表示するDIV
let calender_setting = {
initialView: 'resourceTimelineWeek', // 表示モード
slotMinTime: '07:00',
slotMaxTime: '20:00',
datesSet(info){ // calendarの日付情報が変更される度に呼び出される
// 日付境界に当たるセルにクラスを追加する
day_firest_time = calendar.getOption('slotMinTime')+ ":00"; // 07:00:00
// data-dateの値が07:00:00で終わるNodeを集める
allEl = document.querySelectorAll('th[data-date$="'+day_firest_time+'"], td[data-date$="'+day_firest_time+'"]');
for (var i = 0; i < allEl.length; i++) {
// 全部のElementにクラスを追加
allEl[i].classList.add('day_firest_time_cell');
}
},
resources: [
// リソース
]
}
// カレンダーの初期化
document.addEventListener('DOMContentLoaded', init);
function init() {
calendar = new FullCalendar.Calendar(calendarEl,calender_setting);
calendar.render();
}
.day_firest_time_cell {
border-left: 3px double !important;
border-left-color: #333 !important;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2-bootstrap-theme@0.1.0-beta.10/dist/select2-bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.9.0/main.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar-scheduler@5.9.0/main.min.css">
<link rel="stylesheet" href="clender_custom.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.full.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.9.0/main.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.9.0/locales/ja.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar-scheduler@5.9.0/main.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar-scheduler@5.9.0/locales-all.min.js"></script>
<script src="./js/calendar.js"></script>
<title></title>
</head>
<body>
<div id='calendar'></div>
</body>
</html>
おわり
今回は3px 2重線 #333にしていますが、お好みで。
calender.jsのslotMinTimeを変更することで開始時間を調整できます。
実装のコードは実用しているものから公開できるように簡易化したものです。
主題の内容以外は取り除かれているので、実装コードだけでは完成イメージにはなりません。
ローカライゼーションなどは公式サイトなど見てください。
再利用などはご自由に。本家のライセンスは守ってくださいね。
大変使いやすくてありがたいのですが、ちょっとカスタマイズしようとすると、検索がなかなか大変です。
特に商用では有料の機能については、日本語の情報はなかなか見つからないので試行錯誤の毎日です。
意見やもっとこうすればいいよがればコメントいただければ。
参考文献
How can I show separation between days in a FullCalendar ResourceTimeline? / stack overflow
datesSet / FullCalender Docs