Event Organizerの表示期間を制限する

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>

著者:

■□■□■□■□■□■□■□■□■□■□

福岡のホームページ制作・運用は
株式会社レッドキリン

営業時間:平日9:00〜18:00

●福岡オフィス
〒810-0042
福岡市中央区赤坂1-12-6 赤坂Sビル2F
TEL:092-726-5550 FAX:092-726-5558

●宮崎出張所
〒880-0001
宮崎県宮崎市橘通西3-10-32
宮崎ナナイロ東館8FATOMica内

メールでのお問合せ
ホームページ制作実績
会社案内

■□■□■□■□■□■□■□■□■□■□

contact

ホームページ制作に関することなら、
バナー1個からでもお気軽にご連絡ください。

お電話でのお問い合わせ

<福岡本社・宮崎サテライトオフィス共通>
平日9:00〜18:00まで。営業・セールス目的のお電話は固くお断りいたします。

092-726-5550 092-726-5550

メールでのお問い合わせ

ご相談をご希望の場合、まずはお問い合わせフォームよりご連絡ください。
確認後、担当者よりご連絡させていただきます。

お問い合わせフォーム

会社案内ダウンロード

社内で検討されたい方のために、弊社の特徴や実績、会社概要などをまとめた会社案内をご用意しています。ご自由にダウンロードください。

ダウンロードはこちら
yahoo!japanプロモーション広告

当社はYahoo!プロモーション広告の代理店です。
(福岡県福岡市中央区赤坂)

採用関連の電話営業やセールス目的でのお電話は業務の妨げとなりますので固くお断りいたします。
一度電話口でお断りした企業様は着信拒否登録をしております。ご了承ください。