JavaScriptカレンダー作成のための10選サンプルコード

はじめに
JavaScriptカレンダーの基本
注意点と対処法
まとめ

はじめに

この記事を読めば、JavaScriptを使ってカレンダーを作成・カスタマイズする方法が身につくでしょう。

JavaScriptカレンダー作成のための10選サンプルコードをご紹介します。

JavaScriptカレンダーの基本

○カレンダーのHTML構造

カレンダーは、通常、テーブル要素（<table>）を使って作成します。

曜日や日付は、それぞれテーブルのセル（<td>）に入れます。

○JavaScriptでのカレンダー生成

JavaScriptを使って、現在の月や年を取得し、カレンダーを生成します。

Dateオブジェクトを利用することで、簡単に日付情報を扱うことができます。

サンプルコード1：基本的なカレンダー作成

このサンプルコードでは、現在の月のカレンダーを表示する方法を説明します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>基本的なカレンダー</title>
  <style>
    /* CSSスタイルはこちらで設定 */
  </style>
</head>
<body>
  <div id="calendar"></div>
  <script>
    // JavaScriptコードはこちらで設定
  </script>
</body>
</html>

下記のJavaScriptコードを、上記のHTMLファイルの<script>タグ内に記述します。

const calendarEl = document.getElementById('calendar');
const date = new Date();
const currentYear = date.getFullYear();
const currentMonth = date.getMonth();
const daysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate();

// カレンダーのHTML構造を生成
let calendarHtml = '<table><thead><tr>';
for (let i = 0; i < 7; i++) {
  calendarHtml += `<th>${['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'][i]}</th>`;
}
calendarHtml += '</tr></thead><tbody><tr>';

for (let i = 1; i <= daysInMonth; i++) {
  const dayOfWeek = new Date(currentYear, currentMonth, i).getDay();
  if (i === 1) {
    calendarHtml += '<tr>';
    for (let j = 0; j < dayOfWeek; j++) {
      calendarHtml += '<td></td>';
    }
  }
  calendarHtml += `<td>${i}</td>`;
  if (dayOfWeek === 6) {
    calendarHtml += '</tr>';
    if (i < daysInMonth) {
      calendarHtml += '<tr>';
    }
  } else if (i === daysInMonth) {
    for (let j = dayOfWeek + 1; j <= 6; j++) {
      calendarHtml += '<td></td>';
    }
    calendarHtml += '</tr>';
  }
}
calendarHtml += '</tbody></table>';
calendarEl.innerHTML = calendarHtml;

このコードでは、現在の年と月を取得し、その月の日数を計算しています。

その後、HTMLテーブル構造を生成し、カレンダーを表示しています。

サンプルコード2：月ごとのカレンダー切り替え

このサンプルコードでは、ボタンをクリックすることで、前後の月のカレンダーを表示する方法を説明します。

サンプルコード1で作成したカレンダーに、次のように2つのボタンを追加します。

<button id="prevMonth">前の月</button>
<button id="nextMonth">次の月</button>

下記のJavaScriptコードを、上記のHTMLファイルの<script>タグ内に追加します。

const prevMonthBtn = document.getElementById('prevMonth');
const nextMonthBtn = document.getElementById('nextMonth');
let currentDisplayedMonth = currentMonth;

function generateCalendar(year, month) {
  // カレンダー生成処理（サンプルコード1の内容を関数にまとめる）
}

prevMonthBtn.addEventListener('click', () => {
  currentDisplayedMonth--;
  if (currentDisplayedMonth < 0) {
    currentDisplayedMonth = 11;
    currentYear--;
  }
  generateCalendar(currentYear, currentDisplayedMonth);
});

nextMonthBtn.addEventListener('click', () => {
  currentDisplayedMonth++;
  if (currentDisplayedMonth > 11) {
    currentDisplayedMonth = 0;
    currentYear++;
  }
  generateCalendar(currentYear, currentDisplayedMonth);
});

このコードでは、前の月と次の月のボタンにイベントリスナーを追加しています。

ボタンがクリックされると、現在表示されている月を更新し、新しいカレンダーを生成します。

サンプルコード3：イベント情報を追加するカレンダー

このサンプルコードでは、カレンダーにイベント情報を追加する方法を説明します。

まず、イベント情報を格納するための配列を用意します。

const events = [
  {
    date: new Date(currentYear, currentMonth, 5),
    title: 'イベント1',
  },
  {
    date: new Date(currentYear, currentMonth, 15),
    title: 'イベント2',
  },
];

次に、generateCalendar関数を下記のように修正して、イベント情報をカレンダーに追加します。

function generateCalendar(year, month) {
  // カレンダー生成処理（サンプルコード1の内容を関数にまとめる）

  // イベント情報をカレンダーに追加
  events.forEach(event => {
    if (event.date.getFullYear() === year && event.date.getMonth() === month) {
      const dayCell = calendarEl.querySelector(`td[data-date="${event.date.getDate()}"]`);
      dayCell.innerHTML += `<div>${event.title}</div>`;
    }
  });
}

このコードでは、events配列に格納されたイベント情報をカレンダーに追加しています。

イベントの日付がカレンダーの日付と一致する場合、その日付のセルにイベントのタイトルが追加されます。

イベント情報を追加する際に、日付に一致するセルを見つけるために、querySelectorを使用しています。

サンプルコード4：週表示カレンダー

このサンプルコードでは、週表示のカレンダーを作成する方法を説明します。

まず、HTMLファイルに下記のコードを追加して、週表示のカレンダーのレイアウトを作成します。

<table id="weekCalendar">
  <thead>
    <tr>
      <th>日</th>
      <th>月</th>
      <th>火</th>
      <th>水</th>
      <th>木</th>
      <th>金</th>
      <th>土</th>
    </tr>
  </thead>
  <tbody>
    <tr id="weekDays"></tr>
  </tbody>
</table>

下記のJavaScriptコードを、HTMLファイルの<script>タグ内に追加します。

const weekCalendarEl = document.getElementById('weekCalendar');
const weekDaysEl = document.getElementById('weekDays');

function generateWeekCalendar(date) {
  weekDaysEl.innerHTML = '';
  const startOfWeek = new Date(date);
  startOfWeek.setDate(startOfWeek.getDate() - startOfWeek.getDay());

  for (let i = 0; i < 7; i++) {
    const day = new Date(startOfWeek);
    day.setDate(day.getDate() + i);
    const dayCell = document.createElement('td');
    dayCell.textContent = day.getDate();
    weekDaysEl.appendChild(dayCell);
  }
}

generateWeekCalendar(new Date());

このコードでは、generateWeekCalendar関数を作成し、引数として受け取った日付の週の日付を表示する週表示カレンダーを生成しています。

引数の日付が含まれる週の日曜日を計算し、その日から土曜日までの日付を表示します。

サンプルコード5：レスポンシブデザイン対応カレンダー

このサンプルコードでは、レスポンシブデザインに対応したカレンダーを作成する方法を説明します。

まず、HTMLファイルに下記の<style>タグを追加して、カレンダーのスタイルを設定します。

<style>
  #calendar {
    width: 100%;
    border-collapse: collapse;
  }
  #calendar th,
  #calendar td {
    width: 14.2857%;
    border: 1px solid #ccc;
    text-align: center;
  }
</style>

このスタイルでは、カレンダーのテーブルの幅を100%に設定し、セルの幅を均等に分けています。

これにより、画面サイズが変わってもカレンダーが適切に表示されます。

サンプルコード6：カスタムデザインカレンダー

このサンプルコードでは、カレンダーにカスタムデザインを適用する方法を説明します。

まず、HTMLファイルに下記の<style>タグを追加して、カスタムデザインのスタイルを設定します。

<style>
  #calendar {
    font-family: 'Arial', sans-serif;
    border-collapse: collapse;
  }
  #calendar th,
  #calendar td {
    padding: 10px;
    border: 1px solid #ccc;
    text-align: center;
  }
  #calendar th {
    background-color: #f3f3f3;
    color: #333;
  }
  #calendar .weekend {
    background-color: #e6e6e6;
  }
</style>

このスタイルでは、フォントファミリーをArialに設定し、セルにパディングを追加して見た目を整えています。

また、週末のセルには別の背景色を適用しています。

次に、JavaScriptコードを修正して、週末のセルに.weekendクラスを追加します。

function generateCalendar(date) {
  // 既存のコード

  for (let i = 0; i < 42; i++) {
    // 既存のコード

    if (day.getDay() === 0 || day.getDay() === 6) {
      dayCell.classList.add('weekend');
    }

    // 既存のコード
  }
}

サンプルコード7：年間カレンダー

このサンプルコードでは、年間カレンダーを作成する方法を説明します。

まず、HTMLファイルに下記のコードを追加して、年間カレンダーのレイアウトを作成します。

<div id="yearCalendar"></div>

下記のJavaScriptコードを、HTMLファイルの<script>タグ内に追加します。

const yearCalendarEl = document.getElementById('yearCalendar');

function generateYearCalendar(year) {
  yearCalendarEl.innerHTML = '';

  for (let i = 0; i < 12; i++) {
    const monthCalendar = document.createElement('div');
    const monthDate = new Date(year, i, 1);
    generateCalendar(monthDate, monthCalendar);
    yearCalendarEl.appendChild(monthCalendar);
  }
}

generateYearCalendar(new Date().getFullYear());

このコードでは、generateYearCalendar関数を作成し、引数として受け取った年の年間カレンダーを生成しています。

1月から12月までのカレンダーを順番に作成し、#yearCalendar要素に追加します。

サンプルコード8：ドラッグ＆ドロップ機能付きカレンダー

このサンプルコードでは、カレンダーにドラッグ＆ドロップ機能を追加する方法を説明します。

まず、HTMLファイルに以下のコードを追加して、イベント情報を持つ要素を作成します。

<div id="events">
  <div class="event" draggable="true">イベント1</div>
  <div class="event" draggable="true">イベント2</div>
  <div class="event" draggable="true">イベント3</div>
</div>

次に、JavaScriptコードを修正して、ドラッグ＆ドロップ機能を追加します。

const events = document.querySelectorAll('.event');

events.forEach((event) => {
  event.addEventListener('dragstart', (e) => {
    e.dataTransfer.setData('text/plain', e.target.textContent);
  });
});

function generateCalendar(date, targetEl) {
  // 既存のコード

  for (let i = 0; i < 42; i++) {
    // 既存のコード

    dayCell.addEventListener('dragover', (e) => {
      e.preventDefault();
    });

    dayCell.addEventListener('drop', (e) => {
      e.preventDefault();
      const eventData = e.dataTransfer.getData('text/plain');
      const eventDiv = document.createElement('div');
      eventDiv.textContent = eventData;
      dayCell.appendChild(eventDiv);
    });

    // 既存のコード
  }
}

このコードでは、ドラッグ開始時にイベントデータを設定し、カレンダーセルにドロップされたときにイベントデータを取得して表示します。

また、dragoverイベントでデフォルトの挙動をキャンセルすることで、カレンダーセルにドロップが可能になります。

サンプルコード9：カレンダーにToDoリスト機能追加

このサンプルコードでは、カレンダーにToDoリスト機能を追加する方法を説明します。

まず、HTMLファイルに下記のコードを追加して、ToDoリストの入力欄と表示欄を作成します。

<input type="text" id="todoInput" placeholder="ToDoを追加">
<ul id="todoList"></ul>

次に、JavaScriptコードを修正して、ToDoリスト機能を追加します。

const todoInput = document.getElementById('todoInput');
const todoList = document.getElementById('todoList');

todoInput.addEventListener('keydown', (e) => {
  if (e.key === 'Enter' && e.target.value.trim() !== '') {
    const listItem = document.createElement('li');
    listItem.textContent = e.target.value;
    todoList.appendChild(listItem);
    e.target.value = '';
  }
});

このコードでは、ToDoリストの入力欄でEnterキーが押されたときに、入力されたテキストをリストに追加します。

空白のみの入力は無視されます。

サンプルコード10：国際化対応カレンダー

このサンプルコードでは、カレンダーを国際化対応させる方法を説明します。

まず、HTMLファイルに次のコードを追加して、言語選択のドロップダウンメニューを作成します。

<select id="languageSelect">
  <option value="en">English</option>
  <option value="ja">日本語</option>
  <!-- 他の言語を追加 -->
</select>

次に、JavaScriptコードを修正して、言語に応じてカレンダーの表示を切り替えます。

const languageSelect = document.getElementById('languageSelect');

const weekDays = {
  en: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
  ja: ['日', '月', '火', '水', '木', '金', '土'],
  // 他の言語を追加
};

function updateWeekDayNames(lang) {
  const weekDayNameCells = document.querySelectorAll('#calendar thead th');
  weekDayNameCells.forEach((cell, index) => {
    cell.textContent = weekDays[lang][index];
  });
}

languageSelect.addEventListener('change', (e) => {
  updateWeekDayNames(e.target.value);
});

updateWeekDayNames(languageSelect.value);

このコードでは、updateWeekDayNames関数を作成し、引数として受け取った言語コードに応じて曜日の表示を切り替えます。

言語選択のドロップダウンメニューが変更されたときに、選択された言語に応じて曜日の表示を更新します。

注意点と対処法

カレンダー作成時には、特に日付や時間に関する注意点があります。

下記にいくつかの注意点と対処法を示します。

タイムゾーンの問題

カレンダーはタイムゾーンによって異なる日付が表示される可能性があります。
これを防ぐために、日付オブジェクトをUTCベースで作成し、表示時にローカルタイムに変換することができます。
うるう年の考慮

うるう年には2月に29日が存在します。
JavaScriptのDateオブジェクトは自動的にうるう年を考慮してくれるため、特別な対処は必要ありません。
カレンダーセルの書式設定

カレンダーセルにデータを追加する際、テキストやHTMLを適切にエスケープすることで、セキュリティ上の問題や表示の崩れを防ぐことができます。
パフォーマンス最適化

大量のカレンダーセルを一度に操作する場合、パフォーマンスが低下することがあります。
DocumentFragmentを使用して一度にDOMに追加することで、リフローやリペイントの回数を減らし、パフォーマンスを向上させることができます。