【GAS】サイドメニューとカレンダー【スプレッドシート】サンプルあり

スプレッドシートでサイドメニューを作り、その中にカレンダーを表示する機能の紹介です。

こちからファイルを開き、保存してご利用ください。

サイドメニューとカレンダー

Google Apps Script
html
サイドメニューの活用方法

Google Apps Script

スプレッドシートの「拡張機能」▶「Apps Script」を開きます。

「ファイル」▶「＋」から「サイドメニュー.gs」を作成します。

function onOpen() {
  SpreadsheetApp.getUi()
    .createMenu('スクリプト')
    .addItem('サイドバーを表示', 'showSidebar')
    .addToUi();
}

function showSidebar() {
  SpreadsheetApp.getUi().showSidebar(HtmlService.createHtmlOutputFromFile('sidebar').setTitle('サイドバー'));
}

function getCalendar(year, month) {
  const firstDay = new Date(year, month - 1, 1);
  const lastDay = new Date(year, month, 0);
  const daysInMonth = lastDay.getDate();
  const header = ['日', '月', '火', '水', '木', '金', '土'];
  const weeks = [];
  let week = [];

  for (let i = 0; i < firstDay.getDay(); i++) week.push('');

  for (let day = 1; day <= daysInMonth; day++) {
    week.push(day);
    if (week.length === 7) {
      weeks.push(week);
      week = [];
    }
  }
  if (week.length) weeks.push(week);

  return { header, weeks };
}

スプレッドシートに「スクリプト」「サイドバーを表示」を表示します。

html

カレンダーのhtmlを用意します。

同じく「ファイル」▶「＋」から「sidebar.html」を作成します。

<!DOCTYPE html>
<html>
<head>
  <base target="_top">
  <title>カレンダー</title>
  <style>
    table { width: 100%; border-collapse: collapse; font-family: sans-serif; }
    th, td { text-align: center; padding: 8px; border: 1px solid #eee; }
    th { background-color: #f0f0f0; font-weight: bold; }
    td.sunday { color: red; }
    td.today { background-color: #e0f0e0; font-weight: bold; }
    .month-controls { display: flex; align-items: center; justify-content: center; margin-bottom: 10px; }
    .month-button { padding: 8px 16px; border: 1px solid #ccc; background-color: transparent; color: #333; border-radius: 0; cursor: pointer; transition: background-color 0.3s ease; }
    .month-button:hover { background-color: #eee; }
    #currentMonth { margin: 0 10px; }
    #prevMonth { margin-right: auto; }
    #nextMonth { margin-left: auto; }
  </style>
</head>
<body>
  <div class="month-controls">
    <button id="prevMonth" class="month-button" onclick="changeMonth(-1)">前月</button>
    <span id="currentMonth"></span>
    <button id="nextMonth" class="month-button" onclick="changeMonth(1)">次月</button>
  </div>
  <table id="calendar">
    <thead><tr></tr></thead>
    <tbody></tbody>
  </table>

  <script>
    let currentYear = new Date().getFullYear();
    let currentMonth = new Date().getMonth() + 1;

    const updateCalendar = (year, month) => {
      document.getElementById('currentMonth').textContent = `${year}年${month}月`;
      google.script.run.withSuccessHandler(displayCalendar).getCalendar(year, month);
    };

    const displayCalendar = (calendar) => {
      const thead = document.querySelector('#calendar thead tr');
      const tbody = document.querySelector('#calendar tbody');
      const today = new Date();

      thead.innerHTML = calendar.header.map(day => `<th>${day}</th>`).join('');

      tbody.innerHTML = calendar.weeks.map(week => `<tr>${week.map(day => {
        const isToday = day && currentYear === today.getFullYear() && currentMonth === today.getMonth() + 1 && day === today.getDate();
        return `<td class="${calendar.header[week.indexOf(day)] === '日' ? 'sunday' : ''} ${isToday ? 'today' : ''}">${day || ''}</td>`;
      }).join('')}</tr>`).join('');
    };

    const changeMonth = (diff) => {
      currentMonth += diff;
      if (currentMonth === 0) { currentMonth = 12; currentYear--; }
      if (currentMonth === 13) { currentMonth = 1; currentYear++; }
      updateCalendar(currentYear, currentMonth);
    };

    updateCalendar(currentYear, currentMonth);
  </script>
</body>
</html>

前月ボタン、次月ボタンを設置し、日曜日は赤色で表示するようにしています。