Secura Vita

Category: Works , WordPress , Plugins
25
Works

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

Tag:

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

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

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

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

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

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

カレンダーを2つ

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

Biz Calendar2ヶ月

こんな感じにします。

注意

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

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

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

2020/04/13追記
バージョン2.2.0向けに書き直しました。
変更したところはJSだけです。

カスマイズ実践

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

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

変更するファイル

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

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

それでは1つずつ。

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

calendar.js

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

2020/04/13追記
バージョン2.2.0対応版に書き直しました。

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

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

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

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

②9行目～17行目

※2015/12/3追記
年度が変わる際の不具合を修正しました。
ありがとうございます。

※2017/12/4追記
カレンダーを2以上表示したときの年度変更の際に起こる不具合の修正をしました。

//元
start: function () {
	var now = new Date();
	this.setting = {
		year: now.getFullYear(),
		month: now.getMonth() + 1,
		options: window.bizcalOptions
	};
	document.getElementById('biz_calendar').innerHTML = this.getCalendar();
},

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

//変更後
getCalendar: function (num) {

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

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

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

//変更後
if(num == 2) {
	html += this.getHolidayTitle();
	html += this.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年にわたって出る場合は不具合でます…あまり必要ないと思うのでこのままにしておきます。

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

Adobe Creative Cloud コンプリート|12か月版|Windows/Mac対応|オンラインコード版
Adobe Creative Cloud コンプリート|12か月版|Windows/Mac対応|オンラインコード版
Microsoft 365 Personal(最新 1年版)|オンラインコード版|Win/Mac/iPad|インストール台数無制限(同時使用可能台数5台)
Microsoft 365 Personal(最新 1年版)|オンラインコード版|Win/Mac/iPad|インストール台数無制限(同時使用可能台数5台)
コメント(25)
おもしろかった・役に立った
▼ブログランキング参加中！クリック！▼
  • ブログランキング・にほんブログ村へ

Comment

  1. 向日葵 より:
    2020/04/11 17:42

    はじめまして。
    こちらの記事を参考に「2ヶ月表示」をしたいのですが、現在のバージョンではソースコードが異なっているようで、具体的な変更箇所などご教授いただけましたら幸いです。

    返信
    1. あつお より:
      2020/04/11 21:42

      コメントありがとうございます。
      ↓下のコメントにもver2.2.0について書いてるので参照してください。
      変更するファイルはJSのみで書いてる内容は基本的に同じで書き方が変わってるだけです。
      やることは同じで「出力したい分だけカレンダー出力用の関数に送る」です。
      ソースコードを見比べると新・旧で対応する箇所がわかると思いますので探してみてください。

    2. あつお より:
      2020/04/13 15:57

      時間ができたので検証した上でバージョン2.2.0向けに書き直しましたので見てみてください。
      変更したソースはJSのみで、それ以外は以前と同じです。

  2. takahamasuzuki より:
    2018/08/02 19:23

    こんにちは。
    バージョンが2.2.0なのですが、上記の記述を試してみて、カレンダーが一切反映されませんでした。
    calender.jsのgetCalendar: function () {の部分のみ記述が異なっていてうまく表示されません、、。
    どの様に記述しなおせば良いでしょうか。
    getCalendar: function () {
    var weekArray = new Array(“日”, “月”, “火”, “水”, “木”, “金”, “土”);
    var start_day = this.getStartDayOfMonth(this.setting.year, this.setting.month);
    var last_date = this.getEndDateOfMonth(this.setting.year, this.setting.month);
    var calLine = Math.ceil((start_day + last_date) / 7);
    var calArray = new Array(7 * calLine);

    返信
    1. あつお より:
      2018/08/03 16:27

      takahamasuzuki様

      2.2.0を見てみました。
      js結構変わってましたね。
      下記箇所を書き直してみてください。

      //jQuery(document).ready～
bizCalendar.start();
↓
bizCalendar.start(1);
bizCalendar.start(2);

//var bizCalendar
start: function () {
    var now = new Date();
    this.setting = {
        year: now.getFullYear(),
        month: now.getMonth() + 1,
        options: window.bizcalOptions
    };
    document.getElementById('biz_calendar').innerHTML = this.getCalendar();
}
↓
start: function (num) {
    var options = window.bizcalOptions;
    var now = new Date();
    var year = now.getFullYear();
    var month = now.getMonth() + num;
    if(month > 12) {
        ++year;
        month = month - 12;
    }
    this.setting = {
        year : year,
        month : month,
        options : options
    };
document.getElementById('biz_calendar' + num).innerHTML = this.getCalendar();
}

      PHPは同様です。
      付き送り等は機能しませんが2ヶ月分は表示できると思います。

      ご確認ください。

  3. ykk より:
    2018/02/03 21:02

    ありがたい情報で早速やってみたいですので、
    最新のプラグインしかダウンロードできないので、こちらのカスタマイズがうまくいきません。。。
    元になるソースが異なっているようです。

    できれば最新版のプラグインで再度ご教授いただけませんか？？

    返信
    1. あつお より:
      2018/02/06 14:08

      ykk様

      コメントありがとうございます。
      最新バージョンでの対応ですが、今余裕が無いので後々に確認したいと思います。
      過去バージョンですが、
      https://wordpress.org/plugins/biz-calendar/advanced/
      こちらからダウンロードできるので問題なければこちらお使いください。

  4. コウ より:
    2017/12/04 09:32

    うまく3つのカレンダーを表示できましたが
    12月　｜　1月　｜　2月
    とならず
    12月　｜　1月　｜　1月
    と、1月が2連続してしまいます。
    おそらく、monthが12を超えた場合の
    if(month > 12) {…}が、3連の12月始めの時に2月を表示できないことが原因かなと見ています。
    改善のヒントをいただければ助かります。
    お忙しいところすみませんが、よろしくお願いいたします。

    返信
    1. あつお より:
      2017/12/04 13:54

      コウ様

      コメントありがとうございます。
      ご質問の件ですが、原因はおっしゃる通りの箇所ですね。
      下記の様に変更してください。

      month = 1;
      ↓
      month = month – 12;

      これで3つ目のカレンダーも正常に表示できると思います。

  5. おがた より:
    2017/04/25 15:49

    こんにちは。こちらの記事を参考にさせていただいています。助かっており感謝申し上げます。

    ２ヶ月分のカレンダーの他に固定ページで年間カレンダーも同時に表示させたい場合はどうすれば良いかお知恵を貸して頂けると大変助かります。

    返信
    1. あつお より:
      2017/04/25 18:10

      おがた様

      コメントありがとうございます。
      固定ページに出す方法ですが、これはウイジェット出力用に作られてるため固定ページ向けに作り直す必要があるかと思います。
      ウイジェットは表示用divを出力させてるだけ？なので同じようになので固定ページに直接1年分書く（IDはウィジェット用と区別する）。

      jsは固定ページ用に新規作成（コピー）し、固定ページ出力用のカレンダーIDで指定して必要な数だけ増やす。
      グローバルな関数なので関数名も変更する必要があるかと思います。
      同じファイルでやるならウイジェット表示・固定ページ表示で分岐させる必要がありますね。

      単純に表示だけならこれでいけるかなと思います。確認はしていませんが…
      主なファイルはウィジェット出力時に読まれてるので大丈夫だとは思います。多分…

      わかりにくくてすみません。。

  6. いとう より:
    2016/04/08 10:50

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

    返信
    1. あつお より:
      2016/04/08 14:19

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

  7. ATSU より:
    2016/03/30 22:20

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

    返信
    1. あつお より:
      2016/03/31 02:29

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

  8. ATSU より:
    2016/03/28 20:05

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

    返信
    1. あつお より:
      2016/03/29 18:37

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

  9. よしだん より:
    2016/02/01 12:05

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

    返信
    1. あつお より:
      2016/02/01 12:24

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

  10. 通りすがり より:
    2015/12/02 19:54

    カスタム方法を載せていただきありがとうございました。
    こちらのカスタム方法で、年送りの部分がおかしくなっております。
    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. あつお より:
      2015/12/03 01:03

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

    2. 通りすがり より:
      2015/12/03 16:40

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

    3. あつお より:
      2015/12/03 17:10

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

  11. syt より:
    2015/10/30 13:28

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

    返信
    1. あつお より:
      2015/10/30 14:05

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

Leave a comment

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

ソースコードを記入する場合は [code]～[/code] でくくってください。 
[code]
echo "Hello World";
[/code]

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。