jQueryで簡単に作成できるカレンダーデモアプリ｜メモ機能付き

最近、Webアプリケーションでカレンダーを使いたいシーンが増えてきました。例えば、スケジュール管理やイベントの追加、日付の確認など、ユーザーインターフェースにカレンダーを組み込む場面は多岐にわたります。今回は、jQueryを使って簡単にカレンダーアプリを作成し、メモ機能も実装する方法をご紹介します。このチュートリアルでは、カレンダーが月ごとに切り替わり、日付をクリックしてメモを残せるようにします。

See the Pen Untitled by masakazuimai (@masakazuimai) on CodePen.

jQueryでカレンダーアプリを作成するメリット

1. シンプルで直感的な操作

jQueryを使えば、DOM操作が簡単に行えるため、カレンダーの月切り替えや日付クリックイベントの処理が非常にシンプルになります。JavaScriptを手動で書くよりも、コード量が少なく済み、読みやすくなります。

2. クロスブラウザ対応

jQueryは長年の利用実績があり、クロスブラウザ対応がしっかりしています。新しいブラウザや古いブラウザでも、予期せぬ動作をすることなく、安定した動作を実現できます。

3. カスタマイズしやすい

jQueryを使って作成したカレンダーは、デザインや機能を簡単にカスタマイズできます。例えば、背景色やフォントを変更したり、イベントの追加や削除機能を実装することも容易です。

実装するカレンダーの機能

このチュートリアルでは、以下の基本的な機能を持ったカレンダーを作成します。

• 月の切り替え：前月・次月ボタンを使って、カレンダーの月を切り替えられる機能。
• 日付クリックでメモを保存：日付をクリックすると、その日にメモが残せるポップアップが表示され、メモをlocalStorageに保存する機能。
• メモの削除：保存したメモを削除できる機能。

jQueryカレンダーアプリの作成手順

1. HTMLとCSSで基本レイアウト

まず、カレンダーを表示するための基本的なHTML構造を作成します。月名や日付を表示するためのdiv要素を配置し、カレンダーのヘッダー部分に「前月」と「次月」のボタンを配置します。

<div id="calendar">
  <div id="calendar-header">
    <button id="prev-month">前月</button>
    <h2 id="month-name"></h2>
    <button id="next-month">次月</button>
  </div>
  <div id="calendar-body">
    <div class="weekdays">
      <div class="sunday">日</div>
      <div>月</div>
      <div>火</div>
      <div>水</div>
      <div>木</div>
      <div>金</div>
      <div class="saturday">土</div>
    </div>
    <div id="days"></div>
  </div>
</div>

次に、カレンダーのスタイルを指定します。背景色やボタンのスタイル、日付セルのデザインを指定して、カレンダーが見やすくなるようにします。

#calendar {
  width: 350px;
  background-color: #e0e5ec;
  border-radius: 20px;
  box-shadow: 8px 8px 15px #a3b1c6, -8px -8px 15px #ffffff;
  padding: 20px;
}

#calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

button {
  padding: 10px;
  background-color: #e0e5ec;
  border: none;
  border-radius: 10px;
  box-shadow: 4px 4px 10px #a3b1c6, -4px -4px 10px #ffffff;
  cursor: pointer;
  transition: all 0.3s ease;
}

button:hover {
  box-shadow: 2px 2px 5px #a3b1c6, -2px -2px 5px #ffffff;
}

2. jQueryで動的なカレンダー機能を追加

次に、jQueryを使用して、月切り替え機能や日付クリックイベントを実装します。

$(document).ready(function() {
  let currentYear = new Date().getFullYear();
  let currentMonth = new Date().getMonth();

  // 月名を表示する関数
  function displayMonth() {
    const monthNames = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"];
    $("#month-name").text(`${currentYear}年 ${monthNames[currentMonth]}`);
  }

  // カレンダーを描画する関数
  function renderCalendar() {
    const days = [];
    const firstDayOfMonth = new Date(currentYear, currentMonth, 1);
    const firstDayWeekday = firstDayOfMonth.getDay();
    const daysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate();

    // 空白の日付を追加
    for (let i = 0; i < firstDayWeekday; i++) {
      days.push('');
    }

    // 日付を追加
    for (let i = 1; i <= daysInMonth; i++) {
      days.push(i);
    }

    // カレンダーに日付を表示
    $("#days").empty();
    days.forEach((day, index) => {
      const $dayDiv = $("<div>").text(day).addClass('day');
      if (day !== '' && localStorage.getItem(`memo-${day}`)) {
        $dayDiv.addClass('has-memo');
      }
      $dayDiv.on('click', function() {
        openMemoPopup(day);
      });
      $("#days").append($dayDiv);
    });
  }

  // メモポップアップを開く
  function openMemoPopup(day) {
    selectedDate = day;
    const storedMemo = localStorage.getItem(`memo-${selectedDate}`);
    $("#memo-text").val(storedMemo ? storedMemo : '');
    $("#note-popup").show();
  }

  // 前月ボタン
  $("#prev-month").on('click', function() {
    currentMonth--;
    if (currentMonth < 0) {
      currentMonth = 11;
      currentYear--;
    }
    displayMonth();
    renderCalendar();
  });

  // 次月ボタン
  $("#next-month").on('click', function() {
    currentMonth++;
    if (currentMonth > 11) {
      currentMonth = 0;
      currentYear++;
    }
    displayMonth();
    renderCalendar();
  });

  // 初期表示
  displayMonth();
  renderCalendar();
});

3. メモ機能の実装

ユーザーが日付をクリックすると、ポップアップが表示され、その日にメモを追加できます。localStorageに保存されたメモを読み込み、更新できるようにします。

// メモ保存
$("#save-memo").on('click', function() {
  const memoKey = `memo-${selectedDate}`;
  localStorage.setItem(memoKey, $("#memo-text").val());
  alert("メモが保存されました");
  $("#note-popup").hide();
  renderCalendar();
});

// メモ削除
$("#delete-memo").on('click', function() {
  const memoKey = `memo-${selectedDate}`;
  localStorage.removeItem(memoKey);
  alert("メモが削除されました");
  $("#note-popup").hide();
  renderCalendar();
});

まとめ

jQueryを使って、月ごとに切り替え可能なカレンダーアプリを作成しました。メモ機能を追加することで、ユーザーが特定の日にメモを残せるようになり、localStorageを使ってデータを保存することができます。前月・次月の切り替えや、日付をクリックしてメモを追加する操作も簡単に実装できました。

あなたもこのアプリを使って、スケジュール管理や日々のメモを簡単に管理できるようになるでしょう。