FullCalenderを使用した備忘録をまとめます。
ダウンロード
-
今回はPre-built Bundlesのzipファイルをダウンロードして使用
Download: fullcalendar-5.3.0.zip -
ダウンロードして展開したlibディレクトリの中身を使用するプロジェクトに移す
カレンダーの表示
https://fullcalendar.io/docs/initialize-globals
こちらを参考に記載
calender.html
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<link href='fullcalendar/main.css' rel='stylesheet' />
<script src='fullcalendar/main.js'></script>
<script src='calender.js'></script>
</head>
<body>
<div id='calendar'></div>
</body>
</html>
calender.js
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth' // オプション （月表示）
});
calendar.render(); // カレンダーの初期化（再レンダリング）
});
-
calernderというidを振った場所にカレンダーが表示される
変数calenderを初期化（レンダリング）することで表示できる -
変数calenderの第2引数のオブジェクトにオプションを指定でき、
カレンダーの設定などが行える -
jQueryは削除されたため、以前のバージョンで使用できた
下記のような記載方法では表示できない
$('#calendar').fullCalendar()
Alpha Release: jQuery Removal | FullCalendar Blog
https://fullcalendar.io/blog/2018/04/alpha-release-jquery-removal
バージョンによって記載方法や指定方法が大きく異なるので注意
オプション
ドキュメントをみて使用しそうなオプションを列挙
- タイムゾーン
timeZone: 'Asia/Tokyo',
- ロケール
locale: 'ja',
- 週の初めの日を設定
firstDay: 0,
0：日曜始まり、1：月曜始まり
（デフォルトは日曜始まり）
- カレンダー上部のタイトルやボタンを設定
headerToolbar: {
left: false,
center: "title",
right: "today prev,next"
},
左：なし（なしの場合はfalse）
中央：タイトル
右：今日へ戻るボタン、先月ボタン、次の月ボタン
- 設定したボタンのテキストを設定
buttonText: {
today: '今月',
},
- カレンダーに表示するイベントを設定
events: [
{
id: 'a',
title: 'my event',
start: '2018-09-01'
}
]
jsonを指定できる
そのためPHP等でjsonを返すような処理を作成し、下記のようにURLを指定することもできる
events: '/hoge/list',
- 予定をクリックして動作する処理を設定
eventClick: function(info) {
// 処理
},
- カレンダーの日付の枠内をクリックして動作する処理を設定
dateClick: function(info) {
// 処理
},
js初心者で言い回し等が間違っている箇所があると思います…
書き方や言い回しなどがおかしい部分があれば教えていただけると幸いです！