Zenn
🔰

FullCalendarでかんたんカレンダー

2022/01/13に公開
JavaScript
初心者
初心者向け
calendar
tech

FullCalendarとは!?

FullCalendarを利用することで、多機能なカレンダーを実装する事ができます。

FullCalendar

そしてもう一つ、Tooltipを扱うライブラリ"Tippy"も利用します。

Tippy

今回は、これらのライブラリを利用してカレンダーを実装してみます。
(とても簡単ですよ!!)

プロジェクトを用意する

次の様にプロジェクトを作ります。

MyProject01/
　├ index.html (プログラムを起動するファイルです)
　├ main.js (メインのプログラムを記述するファイルです)

HTMLファイルを用意する

では、作っていきましょう。
HTMLファイルを用意して、下記コードを記述します。

index.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8"/>
	<!-- CSS -->
	<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/fullcalendar@5.10.1/main.css">
</head>
<body>
	<!-- Calendar -->
	<div id="my-calendar"></div>
	<!-- JavaScript -->
	<script src="//unpkg.com/@popperjs/core@2" defer></script>
	<script src="//unpkg.com/tippy.js@6" defer></script>
	<script src="//cdn.jsdelivr.net/npm/fullcalendar@5.10.1/main.js" defer></script>
	<script src="./main.js" defer></script>
</body>
</html>

FullCalendarとTippyの読み込みには、CDNを利用しています。
(インターネットから読み込む事でプロジェクトがシンプルになりますね)

そして、カレンダーを表示させたい部分にidを付けておきます。
(ここでは"my-calendar"としました)

index.html(抜粋)
<!-- Calendar -->
<div id="my-calendar"></div>

JavaScriptファイルを用意する

次に、JavaScriptファイルを用意します。
公式ドキュメントを参考にながら実装を進めていきます。

Documentation

カレンダーにイベントを表示する

最初に、カレンダーに表示するイベントを配列で用意します。
(次のコードを見れば一目瞭然ですね)

main.js(抜粋)
const events = [
	{
		id: "a",// ユニークID
		start: "2022-02-02",// イベント開始日
		end: "",// イベント終了日
		title: "節分",// イベントのタイトル
		description: "悪い鬼を追い払い福を招く",// イベントの詳細
		backgroundColor: "red",// 背景色
		borderColor: "red",// 枠線色
		editable: true// イベント操作の可否
	},
	// 省略
];

カレンダーを表示する

カレンダーを表示するコードです。
オブジェクト生成時、次のオプションを指定します。

オプション名 意味
initialView カレンダーの種類
initialDate 表示対象の日付
events カレンダーに表示するイベント
main.js(抜粋)
// 省略

// IDを取得す
const elem = document.getElementById("my-calendar");
// FullCalendarオブジェクト
const calendar = new FullCalendar.Calendar(elem, {
	initialView: "dayGridMonth",// カレンダーの種類
	initialDate: "2022-02-13",// 表示対象の日付
	events: events,// カレンダーに表示するイベント
});
calendar.render();// カレンダーを表示する

オプションである"initialView"には、カレンダーの見た目を指定する事ができます。
(有料版で利用する事が出来るものもあります)

カレンダーの種類 意味
timeGridMonth 月単位
timeGridWeek 週単位
timeGridDay 日単位

カレンダーのクリックイベント

カレンダーに対してクリックイベントを設定する事ができます。
(これがあれば色々出来そうですね)

イベント名 意味
dateClick 日付マスのクリック
eventClick イベントのクリック
main.js(抜粋)
// 省略

// IDを取得す
const elem = document.getElementById("my-calendar");
// FullCalendarオブジェクト
const calendar = new FullCalendar.Calendar(elem, {
	initialView: "dayGridMonth",
	initialDate: "2022-02-13",
	events: events,
	dateClick: (e)=>{// 日付マスのクリックイベント
		console.log("dateClick:", e);
	},
	eventClick: (e)=>{// イベントのクリックイベント
		console.log("eventClick:", e.event.title);
	}
});
calendar.render();// カレンダーを表示する

Tooltipの表示

イベントにマウスオーバーしたタイミングでTooltipを表示します。
Tooltipの設定は、各イベントがカレンダーに配置されたタイミングで実行します。

イベント名 意味
eventDidMount カレンダーに配置された時
main.js(抜粋)
// 省略

// IDを取得す
const elem = document.getElementById("my-calendar");
// FullCalendarオブジェクト
const calendar = new FullCalendar.Calendar(elem, {
	initialView: "dayGridMonth",
	initialDate: "2022-02-13",
	events: events,
	dateClick: (e)=>{
		console.log("dateClick:", e);
	},
	eventClick: (e)=>{
		console.log("eventClick:", e.event.title);
	},
	eventDidMount: (e)=>{// カレンダーに配置された時のイベント
		tippy(e.el, {// TippyでTooltipを設定する
			content: e.event.extendedProps.description,
		});
	}
});
calendar.render();// カレンダーを表示する

これだけでTooltip付きのカレンダーが実装できます。(やりました!!)

全体のコード

最後に全体のコードを載せておきますね。

index.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8"/>
	<!-- CSS -->
	<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/fullcalendar@5.10.1/main.css">
</head>
<body>
	<!-- Calendar -->
	<div id="my-calendar"></div>
	<!-- JavaScript -->
	<script src="//unpkg.com/@popperjs/core@2" defer></script>
	<script src="//unpkg.com/tippy.js@6" defer></script>
	<script src="//cdn.jsdelivr.net/npm/fullcalendar@5.10.1/main.js" defer></script>
	<script src="./main.js" defer></script>
</body>
</html>
main.js
console.log("main.js!!");

const events = [
	{
		id: "a",
		start: "2022-02-02",
		end: "",
		title: "節分",
		description: "悪い鬼を追い払い福を招く",
		backgroundColor: "red",
		borderColor: "red",
		editable: true
	},
	{
		id: "b",
		start: "2022-02-03",
		end: "",
		title: "立春",
		description: "二十四節気の一つ",
		backgroundColor: "green",
		borderColor: "green",
		editable: true
	},
	{
		id: "c",
		start: "2022-02-08",
		end: "",
		title: "針供養",
		description: "古くなった針などを神社に納めて供養する",
		backgroundColor: "blue",
		borderColor: "blue",
		editable: true
	},
];

window.onload = (e)=>{

	// Calendar
	const elem = document.getElementById("my-calendar");
	const calendar = new FullCalendar.Calendar(elem, {
		initialView: "timeGridDay",
		initialDate: "2022-02-13",
		events: events,
		dateClick: (e)=>{
			console.log("dateClick:", e);
		},
		eventClick: (e)=>{
			console.log("eventClick:", e.event.title);
		},
		eventDidMount: (e)=>{
			tippy(e.el, {// Tippy
				content: e.event.extendedProps.description,
			});
		}
	});
	calendar.render();
}

FullCalendarには有料版も用意されている様です。
興味ある方は是非購入を検討されてみてはいかがでしょうか!?
ここまで読んでいただき有難う御座いました。

Discussion