jQueryのプラグイン「FullCalendar」を使ってカレンダーを表示する方法【初心者向け】
プログラミング初心者向けに、jQueryのプラグイン「FullCalendar」を使ってカレンダーを表示する方法を解説しています。プラグインを利用すれば手軽にカレンダー表示ができるので、覚えておくと良いでしょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
JavaScriptのライブラリであるjQueryでカレンダーを表示する方法を紹介します。
今回は、FullCalendarというjQueryプラグインを利用してカレンダーを表示しているので、ぜひ参考にしてみてください。
jQueryについてそもそもよく分からないという方は、jQueryとは何なのか解説した記事をまずご覧ください。
なお本記事は、オンラインブートキャンプ フロントエンドコース（JavaScript・jQuery講座）の内容をもとにしています。
カレンダープラグインFullCalendarの使い方
カレンダーを実装できるライブラリというのは実は多くありますが、今回は「Full Calendar」というプラグインを実装してみます。このプラグインは標準的なカレンダーを実装することができます。
基本的な使い方を説明しましょう。
ファイルを公式サイトからダウンロードしてHTMLに読み込ませましょう。
上記ページの「Latest」からファイル一式をダウンロードして内部から以下5つのファイルを取り出しましょう。
- fullcalender.min.css
- moment.min.js
- jquery-ui.custom.min.js
- fullcalender.min.js
- ja.js
以下の順番でHTMLに読み込みましょう。
「moment.min.js」をjQueryより先に読み込むようにしてください。
FullCalendarはカレンダーに関するプラグインなんですか？
googleカレンダーみたいな、jQueryで作成されたカレンダーなんだ。
予定表とかスケジュールとかWebページにあったら、良いですね。
そうそう。期間のスケジュールなんかも表示させることが出来るんだよ。さっそく基本のカレンダーを表示させてみよう！
HTML
<div id="calendar"></div>
JavaScript
<script>
$('#calendar').fullCalendar();
</script>
上記記述で、基本的なカレンダーは動きます。
実際に使ってみよう
次にあるHTMLをコピーしてWebブラウザーでみてください。
「sample.html」というファイルと「js」ディレクトリの下に先ほど取り出した5つのファイルがある状態です。
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="fullcalendar.min.css" type="text/css">
<script src="moment.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="jquery-ui.custom.min.js" type="text/javascript"></script>
<script src="fullcalendar.min.js" type="text/javascript"></script>
<script src="ja.js" type="text/javascript"></script>
<title>jQuery</title>
</head>
<body>
<div id="calendar">
<script>
$('#calendar').fullCalendar();
</script>
</div>
</body>
</html>
ブラウザでの表示を確認してみましょう。
標準的なカレンダーが表示されたと思います。
また、JavaScriptの中身を足すことで、コンテンツの幅を利かせることができます。jQueryはそういった意味でも上手に使うことで、Webページコーディングの幅が広がることでしょう。
以下に、JavaScriptの例をいくつか提示しておくので、参考にしながら自分なりの変更を加えてみてください。
「aditable」：trueにすることで、スケジュールの編集を可能にします。
「height」：ピクセルで高さを指定できます。
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="fullcalendar.min.css" type="text/css">
<script src="moment.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="jquery-ui.custom.min.js" type="text/javascript"></script>
<script src="fullcalendar.min.js" type="text/javascript"></script>
<script src="ja.js" type="text/javascript"></script>
<title>jQuery</title>
</head>
<body>
<div id="calendar">
<script>
$('#calendar').fullCalendar({
adtitable: true,
height: 960,
});
</script>
</div>
</body>
</html>
ブラウザでの表示を確認してみましょう。
まとめ
jQueryでカレンダーを表示してみました。
予約サイトやイベントサイトなど日程を表示させる必要がある場合、カレンダーは必須になるので覚えておくと便利でしょう。
ぜひ、自分でいろいろカスタマイズしてみてください。
fullCalendar();メソッドが、カレンダーを呼び出す基本のメソッドって感じですか？
その通り！オプションなんかも設定すれば、期間スケジュールや日本語での曜日表示や、PHPプログラムなんかと連帯してデータを分けたり、別ファイルから取得することも出来るよ。
便利そうですけど、難しそうですねー。
JavaScriptやjQueryなどのプログラムに慣れてくると、カレンダーは簡単に作れるようになるんだよね。自分で作成してもいいかも。
[お知らせ]TechAcademyでは最短4週間でフロントエンドの技術が身につくフロントエンドオンラインブートキャンプを開催しています。jQueryを使ってリッチなWebサービスを作りたい方はぜひご覧ください。
