[WP]MW WP FORMのカレンダーとXO Event Calendarの休日設定を連動させる

WordPress

2023.04.202024.03.12

XO Event Calendarの休日設定に登録した日付を、MW WP FORMのDatepicker（カレンダー）に反映して、休日設定された日はカレンダー上でクリックさせない処理のご紹介です。

お店やクリニックなど予約管理をされているサイトで便利なカスタマイズではないかと思います。

プラグインのインストール
1. MW WP FORM
2. XO Event Calendar
functions.phpの編集
固定ページの編集

プラグインのインストール

まずはMW WP FORMとXO Event Calendarのプラグインのインストールします。

MW WP FORM

https://ja.wordpress.org/plugins/mw-wp-form/

XO Event Calendar

https://ja.wordpress.org/plugins/xo-event-calendar/

functions.phpの編集

まずはfunctions.phpに以下のコードを追加します。

https://xakuro.com/blog/wordpress/1376/　で紹介されている次の休日を取得する処理を元にカスタマイズしています。

/**
* 次の休日を取得します。
*
* @param string $slug 休日のスラッグ ('all', 'am', 'pm' など)。
* @param string $start_date 開始日。
* @param string $end_date 終了日。
* @return null|string 休日 ('Y-m-d' 形式)。期間内に休日がない場合は null。
*/

function my_get_next_holiday( $slug, $start_date, $end_date ) {
date_default_timezone_set ('Asia/Tokyo');
$result = null;
  if ( $holiday_settings = get_option( 'xo_event_calendar_holiday_settings' ) ) {
    if ( isset( $holiday_settings[$slug] ) ) {
      $holiday_setting = $holiday_settings[$slug];
      $weeks = array( 'sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat' );
      $time = strtotime( $start_date);
      $end_time = strtotime( $end_date);
      $str = $holiday_setting['special_holiday'];//臨時休日設定を取得
      $str_ary = str_split($str, 11);//取得した臨時休日設定をカンマ＆クォーテーションで区切る
      $result = implode("','", $str_ary);
      //$special_holiday = $holiday_setting['special_holiday'];
      while( $time <= $end_time ) {
        if (
        ( $holiday_setting['dayofweek'][$weeks[date( 'w', $time )]] || 
          false !== strpos( $holiday_setting['special_holiday'], date( 'yymm-dd', $time ) ) )
        && false === strpos( $holiday_setting['non_holiday'], date( 'yy-mm-dd', $time ) )
        ) {
//print_r($result); 
      break;
    }
    $time = strtotime( date( 'Y-m-d', $time ) . '+1 day' );
    }
  }
}
$text = "'".$result."'";//取得した臨時休日設定をカンマ＆クォーテーションで区切る
$print = str_replace(PHP_EOL, '', $text);//最終的に日付の改行を除去
echo $print;//出力
}

/**

* 次の休日を取得します。

* @param string $slug 休日のスラッグ ('all', 'am', 'pm' など)。

* @param string $start_date 開始日。

* @param string $end_date 終了日。

* @return null|string 休日 ('Y-m-d' 形式)。期間内に休日がない場合は null。

function my_get_next_holiday( $slug, $start_date, $end_date ) {

date_default_timezone_set ('Asia/Tokyo');

$result = null;

if ( $holiday_settings = get_option( 'xo_event_calendar_holiday_settings' ) ) {

if ( isset( $holiday_settings[$slug] ) ) {

$holiday_setting = $holiday_settings[$slug];

$weeks = array( 'sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat' );

$time = strtotime( $start_date);

$end_time = strtotime( $end_date);

$str = $holiday_setting['special_holiday'];//臨時休日設定を取得

$str_ary = str_split($str, 11);//取得した臨時休日設定をカンマ＆クォーテーションで区切る

$result = implode("','", $str_ary);

//$special_holiday = $holiday_setting['special_holiday'];

while( $time <= $end_time ) {

if (

( $holiday_setting['dayofweek'][$weeks[date( 'w', $time )]] ||

false !== strpos( $holiday_setting['special_holiday'], date( 'yymm-dd', $time ) ) )

&& false === strpos( $holiday_setting['non_holiday'], date( 'yy-mm-dd', $time ) )

) {

//print_r($result);

break;

}

$time = strtotime( date( 'Y-m-d', $time ) . '+1 day' );

}

$text = "'".$result."'";//取得した臨時休日設定をカンマ＆クォーテーションで区切る

$print = str_replace(PHP_EOL, '', $text);//最終的に日付の改行を除去

echo $print;//出力

}

休日設定で取得した日付をカンマ＆クォーテーションで区切って出力します。

参考ぺージ
https://xakuro.com/blog/wordpress/1376/

固定ページの編集

続いて、MW WP FORMのフォームを表示するページ（例えばpage-contaci.php）に以下の<script>を追加します。

XO Event CalendarとMW WP FORMで日付フォーマットを合わせる必要があります。

<script>
jQuery(function($) {
    var disableDates = [
    <?php $date = my_get_next_holiday( 'all', date_i18n( 'yy-mm-dd' ), date( 'yy-mm-dd', strtotime( date_i18n( 'yy-mm-dd' ) . '+999 day' )));echo $date;?>
];
    var dateFormat   = 'yy-mm-dd';
    $(".datepicker").datepicker({
        //dateFormat: dateFormat,
        dateFormat: 'yy年mm月dd日',
        regional: "ja",
        dayNames:["日曜日","月曜日","火曜日","水曜日","木曜日","金曜日","土曜日"],
        dayNamesMin:["日","月","火","水","木","金","土"], 
        dayNamesShort:["日曜","月曜","火曜","水曜","木曜","金曜","土曜"],
        monthNames:["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
        monthNamesShort:["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
        nextText:"次",
        prefText:"前",
        beforeShowDay : function(date) {
        var disableDate = $.datepicker.formatDate(dateFormat, date);
        if (disableDates.indexOf(disableDate) !== -1) {
                return [false, ''];
            }
            return [true, ''];
        },
    });
});
</script>

jQuery(function($) {

var disableDates = [

<?php $date = my_get_next_holiday( 'all', date_i18n( 'yy-mm-dd' ), date( 'yy-mm-dd', strtotime( date_i18n( 'yy-mm-dd' ) . '+999 day' )));echo $date;?>

];

var dateFormat = 'yy-mm-dd';

$(".datepicker").datepicker({

//dateFormat: dateFormat,

dateFormat: 'yy年mm月dd日',

regional: "ja",