【作って学ぶ】JavaScriptでFullCalendarを使ってカレンダーの作り方をマスターしよう

2025年3月27日

WEB制作の仕事をしているとたまにカレンダーの作成を依頼されることがあります。

カレンダーは生のJavaScriptで作る事も出来るのですが、工数がかかる上に保守性も低いのであまりオススメはしません。

（僕自身過去に作ったことがあるのですが、作った後に後悔しました・・・）

そんな時にオススメしたいJavaScriptライブラリがFullCalendarです！

このFullCalendarを使えば、少ないコードで簡単にカレンダーを作成することが出来ます。

実際に今回作るのがこちらになります。

See the Pen Untitled by ma-chan (@ma-chan) on CodePen.

この記事では上記の実装を解説しながらFullCalendarの使い方をマスターしてもらいます。

ちなみに上記のコードは以下のコードで実装しています。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>FullCalendar デモ</title>

    <link
      href="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/index.global.min.css"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div id="calendar"></div>
    <script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/index.global.min.js"></script>
    <script src="script.js"></script>
  </body>
</html>

body {
  font-family: sans-serif;
  margin: 2rem;
  background-color: #f5f5f5;
}

#calendar {
  max-width: 900px;
  margin: 0 auto;
  background-color: #fff;
  padding: 1rem;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

document.addEventListener("DOMContentLoaded", function () {
  const calendarEl = document.getElementById("calendar");

  const today = new Date().toISOString().split("T")[0];

  const calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: "dayGridMonth",
    locale: "ja",
    events: [
      {
        title: "今日の日付だよ",
        start: today,
        color: "#ff5e5e",
      },
    ],
  });

  calendar.render();
});

以上になります。

ここからはコードの意味などについて詳しく解説していきます。

ぜひ最後までご覧ください。

FullCalendarの初期設定

まずはFullCalendarの初期設定です。

とはいってもやることはCDNを記述するだけです。

以下のコードをbodyタグの直前に記述してください。

<script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/index.global.min.js"></script>

これで準備万端です。

FullCalendarの実際の使い方

ここからはFullCalendarを実際に作って勉強していきます。

早速解説を進めていきたいのですが、FullCalendarをJavaScriptで設定する前にHTMLとCSSでも軽い設定が必要です。

そちらを解説した後にJavaScriptでのFullCalendarの設定について解説していきます。

HTMLの初期設定

ここからは最初に紹介したカレンダーを元に解説していきます。

まず最初にやるべきことはHTMLに空の要素を作成します。

FullCalendarを埋め込む用の要素ですね。

こちらになります。

//カレンダーが１つだけならid
<div id="calendar"></div>

１つのページに１つのカレンダーを作るなら基本的にidがベターです。

もし仮に複数のカレンダーを１つのページに作成する場合はclassの方が望ましいです。

//カレンダーが２つ以上ならclass
<div class="calendar"></div>
<div class="calendar"></div>

今回は１つだけなのでidを設定しています。

CSSの初期設定

CSSに関しては特に必須のものはありません。

さきほどのデモ作品でいうと、

body {
  font-family: sans-serif;
  margin: 2rem;
  background-color: #f5f5f5;
}

#calendar {
  max-width: 900px;
  margin: 0 auto;
  background-color: #fff;
  padding: 1rem;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

こちらになります。

これらは自分の好みのスタイリングで大丈夫です。

JavaScriptの設定

ここからはJavaScriptでFullCalendarを設定していきます。

押さえておくべきポイントは以下になります。

HTMLで作成した要素をJavaScriptで取得
FullCalendarのインスタンス化
FullCalendarの細かい設定
FullCalendarを実際に表示させる

これだけです。

一つずつ説明していきます。

HTMLで空の要素を作成してJavaScriptで取得

最初にHTMLで作成した空の要素をJavaScriptで取得します。

//DOMの構築が終了してからイベントを発火
document.addEventListener("DOMContentLoaded", function () {
//指定したidを取得
const calendarEl = document.getElementById("calendar");
});

こんな感じです。

こちらではDOMContentLoadedイベントを使ってDOMの構築が完了してからidを取得します。

これで予期せぬ不具合を防ぎます。

FullCalendarのインスタンス化

次にやることはインスタンス化です。

簡単に言うとFullCalendarを使用可能な状態にします。

コードはこちらになります。

document.addEventListener("DOMContentLoaded", function () {
const calendarEl = document.getElementById("calendar");
//FullCalendarのインスタンス化
const calendar = new FullCalendar.Calendar(calendarEl, {

});

});

このようにしてインスタンス化を行います。

第一引数に設定してあるのは、先ほど取得したHTMLの要素です。

FullCalendarの細かい設定

ここからはFullCalendarを細かく設定していきます。

以下になります。

document.addEventListener("DOMContentLoaded", function () {
  const calendarEl = document.getElementById("calendar");
//今日の日付を変数にする
  const today = new Date().toISOString().split("T")[0];

  const calendar = new FullCalendar.Calendar(calendarEl, {
//ここで細かい設定
    initialView: "dayGridMonth",
    locale: "ja",
    nowIndicator: true,
    events: [
      {
        title: "今日の日付だよ",
        start: today,
        color: "#ff5e5e",
      },
    ],
  });

});

ここでは以下のプロパティを設定しています。

initialView
locale
events

一つずつ解説していきます。

initialView

initialViewは、カレンダーの表示を月ごとにするか週ごとにするかなどを設定出来ます。

ここでは月ごとに設定しているのでdayGridMonthを設定しています。

locale

localeは、カレンダーの表記の言語を決めます。

ここでは日本語で作成しているのでjaに設定しています。

events

eventsは、選択した日付に対して行う処理です。

上の例で言うと以下になります。

title: カレンダーに文字を出力する
start: どの日付にするか選ぶ
color: 選択した文字の色を決める

こんな感じです。

FullCalendarを実際に表示させる

あとは最後にFullCalendarを実際に表示させるだけです。

document.addEventListener("DOMContentLoaded", function () {
  const calendarEl = document.getElementById("calendar");

  const today = new Date().toISOString().split("T")[0];

  const calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: "dayGridMonth",
    locale: "ja",
    events: [
      {
        title: "今日の日付だよ",
        start: today,
        color: "#ff5e5e",
      },
    ],
  });
//FullCalendarを実際に表示
  calendar.render();
});

このようにcalendar.render()を記述するだけです。

これで初めに紹介したサンプルが完成します。