Secura Vita

Category: Works > wordpress » Biz Calendar:カレンダー表示を2ヶ月にカスタマイズ
2015/10/03
Works

Biz Calendar:カレンダー表示を2ヶ月にカスタマイズ

Biz Calendar:カレンダー表示を2ヶ月にカスタマイズ

wordpressプラグイン「Biz Calendar」のカスタマイズ

営業日・イベントカレンダーとしてこのプラグインを使用してる人も多いと思います。

このプラグインでは基本1ヶ月分のみの表示となりますが、それを2ヶ月分表示できるようにカスタマイズしたいと思います。

プラグインの説明・配布はこちら
Biz Calendar│WP-BizPlugin

プラグインの使い方はググってください。

カレンダーを2つ

ショッピングサイト等でよく見かけるあれです。

Biz Calendar2ヶ月

こんな感じにします。

注意

今回のカスタマイズでは月送りを無効にします。
表示されたカレンダー毎に月送りを実装するとなると変更箇所が多くなるのと、2ヶ月分表示するなら月送りいらないよねという判断です。
月送りがあれば1ヶ月表示でいいわけですし。

需要があれば作ろうかなとも思いますけど。

使用したバージョンは2.0.1です。

スポンサーリンク

カスマイズ実践

このやり方はプラグインディレクトリ内ファイルを直接変更します。
プラグインディレクトリ内ファイルを変更しない方法も後述してますが、やり方は一緒なのでとりあえず上から読み進めてください。

プラグインディレクトリは「/wp-content/plugins/biz-calendar」です。
予めローカルにダウンロードしておいてください。

変更するファイル

変更するファイルは以下のとおり。

  • calendar.js
  • biz-calendar.php
  • biz-cal.css

それでは1つずつ。

行番号は元ファイルの行番号です。コピーして元ファイルは保管しておいてください。

calendar.js

このファイルは実際にカレンダーを描画するスクリプトとなっています。

①1行目~6行目
//元
jQuery(document).ready(function($) {
	if ($("#biz_calendar").size() == 0) {
		return;
	}
	bizCalendar();
});

//変更後
jQuery(document).ready(function($) {
	if ($("#biz_calendar1").size() == 0) {
		return;
	}
	bizCalendar(1);
    bizCalendar(2);
});

bizCalendar()という関数にナンバーを渡します。
これで別々のカレンダーが生成されるようにします。

カレンダーのIDがナンバー付になりますので#biz_calendar → #biz_calendar1 に変更しておきます。

②10行目~21行目

※2015/12/3追記
コメントにて年度が変わる際のミスをご指摘いただき、その部分を修正しました。
ありがとうございます。

//元
var bizCalendar = function() {
	var options = window.bizcalOptions;
	var now = new Date();

	var setting = {
		year : now.getFullYear(),
		month : now.getMonth() + 1,
		options : options
	};
	window.currentSetting = setting;
	document.getElementById('biz_calendar').innerHTML = getCalendar(setting);
}

//変更後
var bizCalendar = function(num) {
	var options = window.bizcalOptions;
	var now = new Date();

    var year = now.getFullYear();
    var month = now.getMonth() + num;
    if(month > 12) {
        ++year;
        month = 1;
    }
    
	var setting = {
		year : year,
		month : month,
		options : options
	};
	window.currentSetting = setting;
	document.getElementById('biz_calendar' + num).innerHTML = getCalendar(setting,num);
}
  • bizCalendar = function(num)
    で①で指定したナンバーを取得します。
  • var year = now.getFullYear()
    今年の年度を変数に代入します。
  • var month = now.getMonth() + num;
    カレンダー1は今月、カレンダー2は次月というように表示する月を変更し、変数に代入します。
  • if(month > 12) {}
    monthが12を超えた場合(年度が変わった場合)に変数yearを来年の年度に、変数monthを1月にします。
  • var setting = {}
    上記で設定した変数をsettingに入れます。
  • document.getElementById(‘biz_calendar’ + num)
    ナンバー付きのIDに対しカレンダーHTMLを表示するようにします。
  • getCalendar(setting,num)
    getCalendar()というカレンダーを描画する関数にナンバーを渡します。
③53行目
//元
var getCalendar = function(setting) {

//変更後
var getCalendar = function(setting,num) {

②の最後で指定したナンバーを取得します。

④69行目~75行目
//元
var title = setting.year + "年 " + setting.month + "月";
var html = "<table class='bizcal' ><tr>";
html += "<td class='calmonth' colspan='4'>" + title + "</td>";
html += getPrevMonthTag();
html += "<td class='calbtn today-img' onclick='goToday()' title='今月へ' ><img src='" + currentSetting.options.plugindir + "image/today.png' ></td>";
html += getNextMonthTag();
html += "</tr>";

//変更後
var title = setting.year + "年 " + setting.month + "月";
var html = "<table class='bizcal' ><tr>";
html += "<td class='calmonth' colspan='7'>" + title + "</td>";
//html += getPrevMonthTag();
//html += "<td class='calbtn today-img' onclick='goToday()' title='今月へ' ><img src='" + currentSetting.options.plugindir + "image/today.png' ></td>";
//html += getNextMonthTag();
html += "</tr>";
  • colspan=’4′ → colspan=’7′
    月送りを削除するのでその分広げます。
  • getPrevMonthTag() ~ getNextMonthTag()
    この部分が月送りです。削除でもいいですが一応コメントアウトでソースは残すようにしています。
⑤101行目・102行目
//元
html += getHolidayTitle();
html += getEventdayTitle();

//変更後
if(num == 2) {
    html += getHolidayTitle();
    html += getEventdayTitle();
}

ここは説明文の箇所です。

Biz Calendar2ヶ月

今回は2つなので2番目のみ表示するようにしています。
これを書いておかないとカレンダーごとにこの部分が表示されてしまいます。

biz-calendar.php

このファイルはプラグインの本体です。
ウィジェットの設定が書かれてありますのでその部分を変更します。

229行目
//元
echo "<div id='biz_calendar'></div>";

//変更後
echo "<div id='biz_calendar1' class='biz_calendar'></div>";
echo "<div id='biz_calendar2' class='biz_calendar'></div>";

見たまんまですね。カレンダー分DIVボックスを増やします。
クラスはCSSのために追加しています。

PHPはこれだけ。

biz-cal.css

このカレンダーのスタイルはIDで指定しているため(1つのみ使用が前提)それをクラスに書き換え複数対応できるようにします。

全て
//元
#biz_calendar

//変更後
.biz_calendar

一括置換でOKです。CSSもこれだけ。


これで2つカレンダーが表示されるようになったかと思います。
あとはCSSを調整するなりしてください。

Biz Calendar2ヶ月

テーマディレクトリ内でカスタマイズ

プラグインディレクトリのファイルを直接変更するのは嫌だ!という場合、テーマディレクトリ内でもカスタマイズ可能です。
アップデートの対応等のためこっちの方がおすすめですかね。

ファイルの移動・書き換え

  • calendar.js
  • biz-cal.css

をテーマディレクトリ内にコピーして上で説明した通り変更してください。
それ以外は特に無しです。

functions.php

functions.phpにもろもろ記述していきます。

//css,jsの削除・読み込み
add_action('wp_enqueue_scripts', 'rewite_bizcalendar_script' );
function rewite_bizcalendar_script() {
    
    wp_deregister_style( 'biz-cal-style' );
    wp_enqueue_style( 'biz-cal-style',  get_template_directory_uri().'/biz-cal.css' );
    
    wp_deregister_script( 'biz-cal-script' );
    wp_enqueue_script( 'biz-cal-script',  get_template_directory_uri().'/calendar.js', array('jquery') );
    
    $biz_option = new BC();
    $biz_option->localize_js();
}

//ウイジェットの再設定
add_action( 'widgets_init', 'rewrite_bizcalendar_widget_init' );
function rewrite_bizcalendar_widget_init() {
  register_widget( 'rewrite_bizcalendar_widget' );
}

class rewrite_bizcalendar_widget extends BizCalendarWidget {
    
	public function widget( $args, $instance ) {
		extract( $args );
		$title = apply_filters( 'widget_title', $instance['title'] );

		echo $before_widget;
		if ( ! empty( $title ) ){
			echo $before_title . $title . $after_title;
		}
		$options = get_option( 'bizcalendar_options' );
		echo "<div id='biz_calendar1' class='biz_calendar'></div>";
        echo "<div id='biz_calendar2' class='biz_calendar'></div>";
		echo $after_widget;
	}
    
}

このままコピーでも大丈夫ですが、css,jsのファイル名を変えたりサブディレクトリ内に入れたりする場合はパスを書き換えてください。

rewite_bizcalendar_script()

プラグインで読み込まれているファイルを再定義します。

  • wp_deregister_****
    指定されたIDで読み込まれているファイル(プラグインディレクトリのファイル)を削除します。
  • wp_enqueue_****
    上で削除したIDで読み込ませます。ここでテーマディレクトリに移動したcss,jsを読み込ませます。
  • $biz_option = new BC();
    $biz_option->localize_js();

    [biz-cal-script]を削除するとオプション(イベント情報等)も消えてしまいます。
    同じIDで読み込まれてるみたいですね。ですの再取得します。
rewrite_bizcalendar_widget_init()

ウィジェットの内容を書き換えるため再設定します。
下のクラスを実行するという命令になります。

class rewrite_bizcalendar_widget

プラグインファイルにあるクラス「BizCalendarWidget」を上書き処理します。
上書きする箇所はfunction widgetです。
biz-calendar.phpに書かれている同箇所のコピーで、書き換える箇所は上で説明している通りです。

これでプラグインで設定されたウィジェットの内容が書き換わり2が月分の表示になります。


ナンバーを増やして、それに応じて変更する箇所を増やせば何ヶ月でも対応できます。
そういう必要があればやってみてください。
※3年にわたって出る場合は不具合でます…あまり必要ないと思うのでこのままにしておきます。

というか、このプラグインで複数月表示という結構ニッチなカスタマイズ…需要ありますかね?
そういう作業があったからやってみたんですが。
プラグイン指定無しで複数月表示なら別のプラグイン使ったほうが楽かも。。

スポンサーリンク
おもしろかった・役に立った

Comment

  1. いとう より:

    カレンダーを2か月分表示させることはできましたが、色が設定されず
    黒文字に白背景のカレンダーが作成されました。

    1. あつお あつお より:

      その症状だと単純にCSSが読み込まれていないか、CSSの間違いだと思います。まずはCSSが読み込まれているか確認してください。それ以外だと書かしてもらってるやり方はID変更・クラス追加を行っているので、CSSのIDをクラスに直しているか、PHPでクラスを指定しているか確認してみてください。

  2. ATSU より:

    ありがとうございました!
    うまく3つのカレンダーを表示することができました!

    1. あつお あつお より:

      ご連絡ありがとうございます。無事表示されたようで安心しました!

  3. ATSU より:

    こちら、参考に使わせていただこうと思いますが、ちなみにですが、3ヵ月分を表示することは、可能なのでしょうか?

    1. あつお あつお より:

      コメントありがとうございます。数に関係している箇所を個数分に変更してもらえれば大丈夫ですよ。試してみてください。

  4. よしだん より:

    ありがたやー、ありがたやー。m(_ _)m

    1. あつお あつお より:

      喜んでいただけてなによりです!何か不具合あったらご連絡くださいませ。

  5. 通りすがり より:

    カスタム方法を載せていただきありがとうございました。
    こちらのカスタム方法で、年送りの部分がおかしくなっております。
    12月の横が2015年13月となるので、
    calendar.jsの13行目から下記ソースに変更いたしました。

    var calendar_month = now.getMonth() + num;

    if(calendar_month == 13) {
    var setting = {
    year : now.getFullYear()+1,
    month : 1,
    options : options
    };
    } else {
    var setting = {
    year : now.getFullYear(),
    month : now.getMonth() + num,
    options : options
    };
    }

    お気づきでしたら、申し訳ございません。
    後素人のカスタマイズなので、もっと良いソースが有りましたら、お願いいたします。

    1. あつお あつお より:

      コメントありがとうございます。
      年度が変わる際の事をすっかり失念しておりました。。。ご指摘ありがとうございます!
      来年のカレンダーがちゃんと表示されるようブログ記事も修正しましたのでもしよろしければご確認ください。

    2. 通りすがり より:

      年送りの対応ありがとうございます。
      そして、すっきりしたコードになって、ありがとうございます。

    3. あつお あつお より:

      こちらこそありがとうございました。
      またちょっとだけ修正しましたのでよろしければ。。
      year = ++year → ++year
      癖なんですよね…ついつい=で書いてしまいます^^;

  6. syt より:

    全てコピペでやってみましたが真っ白で何もでてこなくなりましたねぇ

    1. あつお あつお より:

      もしよろしければエラーログを送ってもらえますか?検証してみます。
      上記スクリプトはwp4.3,プラグイン2.0.1でのみ確認しているのでそれ以外のバージョンだとどうなるかはわかりかねます。