【kintone】日付から曜日と祝日を判定

日付を入力すると、曜日と祝日が埋まる。
日曜と祝日は赤、土曜は青になる。

---

日付に応じた曜日の表示は自動計算でできるが

• 日付が未入力のとき木曜と表示されてしまう
• 日時フィールドを使った場合に1969年12月31日以前が正しく計算されない

という欠点があるので、Luxonを使った方がいい。

日付が祝日か、祝日なら何の日かの判定はholiday_jp.min.jsでやる。

PC用のJavaScript / CSSファイル は下図のようにする。

sample.js は下記のコードを使う。

sample.js

(() => {
  'use strict';

  // 日付から祝日名を取得（祝日でない場合はnullを返す）
  const getHolidayName = (dateStr) => {
    if (!dateStr) return null;
    const date = new Date(dateStr);
    // holiday_jp.isHolidayで祝日か否か判定し、holiday_jp.betweenで祝日名を取得
    return holiday_jp.isHoliday(date) ? holiday_jp.between(date, date)[0]?.name : null;
  };

  // 日付に応じて文字色と背景色を適用
  const decorateDateField = (dateStr, element) => {
    if (!dateStr || !element) return;
    // Luxonのweekdayは1=月曜、6=土曜、7=日曜
    const weekdayIndex = luxon.DateTime.fromISO(dateStr).weekday;
    const isHoliday = getHolidayName(dateStr);
    // 日曜(7)か祝日の場合は赤文字+薄赤背景
    if (isHoliday || weekdayIndex === 7) {
      Object.assign(element.style, { color: '#ff0000', backgroundColor: '#ffe0e0' });
    } 
    // 土曜(6)の場合は青文字+薄青背景
    else if (weekdayIndex === 6) {
      Object.assign(element.style, { color: '#0000ff', backgroundColor: '#e0e0ff' });
    }
  };

  // 着色対象のフィールド一覧
  const targetFields = ['日付', '曜日', '祝日'];

  const events = [
    // レコード追加・レコード編集・インライン編集の[日付]の値変更イベント
    ...['create', 'edit', 'index.edit'].map(type => `app.record.${type}.change.日付`),
    // レコード追加・レコード編集・インライン編集の画面表示イベント
    ...['create', 'edit', 'index.edit'].map(type => `app.record.${type}.show`)
  ];

  kintone.events.on(events, (event) => {
    const record = event.record;
    const dateValue = record.日付?.value;
    // [曜日][祝日]を編集不可にする
    ['曜日', '祝日'].forEach(field => record[field].disabled = true);
    // [日付]に応じた[曜日]を設定（[日付]が未入力の場合は空文字を設定）
    const weekdays = ['月', '火', '水', '木', '金', '土', '日'];
    const weekdayIndex = dateValue ? luxon.DateTime.fromISO(dateValue).weekday : 0;
    record.曜日.value = weekdayIndex ? weekdays[weekdayIndex - 1] : '';    
    // [日付]の祝日名を取得して[祝日]に設定（祝日でない場合は空文字を設定）
    record.祝日.value = getHolidayName(dateValue) || '';
    return event;
  });

  // 詳細画面を表示したときの処理
  kintone.events.on('app.record.detail.show', (event) => {
    // DOMの描画完了を待ってから処理開始
    requestAnimationFrame(() => {
      const dateValue = event.record.日付?.value;
      if (!dateValue) return;
      // [日付][曜日][祝日]に文字色と背景色を設定
      targetFields.forEach(field => {
        decorateDateField(dateValue, kintone.app.record.getFieldElement(field));
      });
    });
    return event;
  });

  // 一覧画面を表示したときの処理
  kintone.events.on('app.record.index.show', (event) => {
    requestAnimationFrame(() => {
      // [日付][曜日][祝日]に文字色と背景色を設定
      const fieldElements = targetFields.map(field => kintone.app.getFieldElements(field));
      fieldElements[0].forEach((dateEl, i) => {
        const dateText = dateEl.textContent.trim();
        targetFields.forEach((_, j) => {
          decorateDateField(dateText, fieldElements[j][i]);
        });
      });
    });
    return event;
  });
})();

---