JavaScriptでカレンダーを作成！サンプルコード10選で簡単理解

はじめに
●JavaScriptカレンダーの基本
- ○カレンダーのHTML構造
- ○JavaScriptでのカレンダー生成
●カレンダー作成のための10選サンプル
●注意点と対処法
まとめ

はじめに

JavaScriptを活用してカレンダーを作成し、カスタマイズする手法について詳しく解説します。

初心者の方々にも理解しやすいよう、丁寧に説明を進めていきます。

このガイドでは、10種類のサンプルコードを通じて、様々なカレンダー機能の実装方法を解説します。

実践的なコード例と共に、各機能の意義や活用場面についても触れていきますので、ぜひ最後までお付き合いください。

●JavaScriptカレンダーの基本

JavaScriptを使用してカレンダーを作成する際、基本的な構造とアプローチを理解することが重要です。

カレンダーの基本要素は日付と曜日であり、これを効果的に表示し操作することがカレンダー作成の核心となります。

○カレンダーのHTML構造

カレンダーを作成する際、一般的にはHTML要素の中でも<table>要素を利用します。

この表形式の構造を用いることで、曜日や日付を整然と配置することが可能となります。

具体的には、テーブルのセル（<td>）に各日付や曜日の情報を格納していきます。

この方法を採用することで、見やすく使いやすいカレンダーのレイアウトを実現できるのです。

○JavaScriptでのカレンダー生成

JavaScriptの力を借りて、動的にカレンダーを生成します。

現在の年月を取得し、それに基づいてカレンダーの内容を構築していきます。

この過程で、JavaScriptのDateオブジェクトが非常に重要な役割を果たします。

Dateオブジェクトを活用すれば、年、月、日といった日付情報を簡単に操作できるため、カレンダーの作成作業が格段に効率化されます。

●カレンダー作成のための10選サンプル

では、早速マスターするために10選のサンプルコードを見ていきましょう。

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

まずは、現在の月のカレンダーを表示する基本的な方法について説明します。

次のHTMLコードを使用し、基本的な構造を作成します。

<!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>

この基本的なHTML構造に、JavaScriptコードを追加してカレンダーを生成します。

次のコードを<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;

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

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

このコードを実行すると、現在の月のカレンダーが画面に表示されます。

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

次に、ボタンをクリックすることで前後の月のカレンダーを表示する機能を追加します。

この機能を実装することで、ユーザーは簡単に異なる月のカレンダーを閲覧できるようになります。

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

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

次に、次のJavaScriptコードを<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キーが押されたときに、入力されたテキストをリストに追加します。

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

ToDoリスト機能を組み込んだカレンダーは、日々のタスク管理と長期的な予定管理を同時に行えるため、生産性向上に大きく貢献します。

例えば、会議の予定と同時に、その会議に向けた準備タスクを登録することができます。

これで、ユーザーは予定とタスクの関連性を視覚的に把握でき、より効果的な時間管理が可能になります。

さらに、ToDoリストとカレンダーを連携させることで、締め切りのあるタスクを自動的にカレンダーに反映させたり、特定の日付に関連するToDoをカレンダー上で表示したりすることも可能になります。

これで、ユーザーは重要なタスクを見逃すことなく、計画的に作業を進めることができます。

○サンプルコード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ベースで作成し、表示時にローカルタイムに変換することができます。

例えば、new Date().toUTCString()を使用してUTC時間を取得し、必要に応じてローカル時間に変換します。

うるう年の考慮も忘れてはいけません。

うるう年には2月に29日が存在します。

JavaScriptのDateオブジェクトは自動的にうるう年を考慮してくれるため、特別な対処は必要ありません。

ただし、カスタムカレンダー関数を作成する場合は、うるう年の判定ロジックを組み込むことが重要です。

カレンダーセルの書式設定にも注意が必要です。

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

例えば、ユーザー入力をそのまま表示するのではなく、textContentプロパティを使用してテキストとして追加することで、XSS攻撃のリスクを軽減できます。

パフォーマンス最適化も重要な課題です。

大量のカレンダーセルを一度に操作する場合、パフォーマンスが低下することがあります。

DocumentFragmentを使用して一度にDOMに追加することで、リフローやリペイントの回数を減らし、パフォーマンスを向上させることができます。

例えば、次のようなコードを使用します。

const fragment = document.createDocumentFragment();
// ここでfragmentにカレンダーセルを追加
calendarEl.appendChild(fragment);

この注意点を考慮しながらカレンダーを作成することで、より安全で効率的、そして使いやすいカレンダーアプリケーションを開発することができます。

まとめ

本記事では、JavaScriptを用いたカレンダー作成の多様な手法を詳しく解説しました。

基本的なカレンダー表示から始まり、月ごとの切り替え、イベント情報の追加、週表示、レスポンシブデザイン、カスタムデザイン、年間表示、ドラッグ＆ドロップ機能、ToDoリスト機能、そして国際化対応まで、幅広い機能を持つカレンダーの実装方法を紹介しました。

これらのサンプルコードは、それぞれ異なるニーズに対応しており、用途に応じて適切なカレンダーを選択・カスタマイズすることができます。

例えば、個人利用であれば基本的なカレンダーにToDoリスト機能を追加したものが適しているかもしれません。

一方、企業での使用を想定する場合は、ドラッグ＆ドロップ機能や国際化対応が重要になるでしょう。