技術Note

2023/06/14追記

表示期限付きの指定を無視して次月までになっていたので修正しました

弊社では最近、WordPressサイト上にカレンダーを埋め込む際にEvent Organizerを使用することがよくあります。 Event Organizerは、イベントの作成、管理、表示を簡単に行えるWordPressプラグインです。 しかし、標準の機能だけでは思ったようなカスタマイズを実装できない場合があります。 そこで、本記事では、弊社で実装したEvent Organizerのカスタマイズ方法を紹介していきます。

今回は過去の月は確認できず、未来は何ヶ月後までか指定したところまでしか見れなくする方法について紹介します。

コピペでの利用も可能なので是非参考にしてください。

ショートコードの準備

まず、事前にカレンダーを表示するショートコードを調整します。

[eo_fullcalendar titleformatmonth="Y年n月" defaultView="month" responsive="false"]

titleformatmonth="Y年n月" で日付の表示を「2023年5月」のように出力されるようにし、 defaultView="month" で月別表示に、 responsive="false" でスマホ時も月別表示が保たれるようにします。

JavaScriptのコード

後は下記コードをそのままJavaScriptに貼り付け、カレンダーのIDと表示期限のみ変えてるだけです！

コードの解説に関してはコメントアウトでコード上に記述しています。

// 対象のカレンダーのidを指定
let calendar = document.getElementById('eo_fullcalendar_1');
// ここで何ヶ月後まで表示するか指定
let limitMonth = 2;

// カレンダーの表示期限を制限する関数
function format_date() {
  let does_action = false;

  // 連打対策に一旦カレンダーを押せなくする
  calendar.style.setProperty('pointer-events', 'none');

  // 日付を表示している要素を指定
  let calenderTitle = calendar.querySelectorAll('.fc-toolbar h2')[0];

  if ( calenderTitle ) {
		// カレンダーのタイトルテキストから表示している年と月を取得
    let baseDate = calenderTitle.innerText;
    let calDay_year = Number(baseDate.replace(/(\\d{4})年\\s(\\d{1,2})月/, '$1'));
    let calDay_month = Number(baseDate.replace(/(\\d{4})年\\s(\\d{1,2})月/, '$2')) - 1;// Date関数の月は0から始まるのでカレンダーの表記からそのまま数字を取ったので-1している
    let calDay = new Date(calDay_year,calDay_month)

		// 本日の日付から制限する年と月を取得
    let today = new Date();
    let limitDay = new Date(today.getFullYear(), today.getMonth() + limitMonth);
    let limitDay_year = limitDay.getFullYear();
    let limitDay_month = limitDay.getMonth();

		// 月切り替えのボタンを取得
    let tgt_next = calendar.getElementsByClassName('fc-next-button')[0];
    let tgt_prev = calendar.getElementsByClassName('fc-prev-button')[0];

    // 月切り替えのボタンを押せなくして期間を制限

    // 未来の月の表示期限を制限する
    // カレンダーの表示月が表示期限の月と同じ時
    // 先の月に進むボタンを押せなく＆透明度を0.3に
    if ( limitDay_year === calDay_year && limitDay_month === calDay_month ) {
      tgt_next.style.setProperty('opacity', '0.3', 'important');
      tgt_next.style.setProperty('pointer-events', 'none', 'important');
    } else {
      tgt_next.style.setProperty('opacity', null);
      tgt_next.style.setProperty('pointer-events', null);
    }

    // 過去の月は表示できなくする
    // カレンダーの表示月が今月のとき
    // 前の月に進むボタンを押せなく＆透明度を0.3に
    if (calDay.getMonth() === today.getMonth()) {
      tgt_prev.style.setProperty('opacity', '0.3', 'important');
      tgt_prev.style.setProperty('pointer-events', 'none', 'important');
    } else {
      tgt_prev.style.setProperty('opacity', null);
      tgt_prev.style.setProperty('pointer-events', null);
    }

    // 処理を実行できたのでtrueをセット
    does_action = true;
  }

  // 処理が完了したのでカレンダーを押せるように戻す
  calendar.style.setProperty('pointer-events', null);

  // 処理を実行したかを返す
  return does_action;
}

function interval_function() {
  // アクションフックがないので処理が実行できるまで50ミリ秒ごと、最大20回実行
  let counter = 0;
  let set_calender = setInterval(function () {
    let action = format_date();

    if (counter > 20 || action) {
      clearInterval(set_calender);
    }
  }, 50);
}

if (calendar) {
  // js読み込んだ時とカレンダーをクリックした際に実行
  interval_function();
  calendar.addEventListener('click', interval_function);
} 

ショートコードの調整とJavaScriptの実装で、カレンダーの表示期限を制限することができます。ぜひ参考にしてみてください。

Event Organiser – WordPress プラグイン | WordPress.org 日本語

おまけ

上記記事を投稿する前にNotion AIに校正させたらこんな文がおまけで付いてきました。

<aside class=”notice”>
本記事は、投稿前に校正を行っておりますが、いくつかの誤りが残っている可能性があります。予めご了承ください。
</aside>