ZabutoCalendar.jsでイベント入り要素をhoverしたときに、タイトルを表示させたい。

え?ホバーアクションないの?

Bootstrapを使ったカレンダーを実装「Zabuto Calendar」

ちょっとイベントカレンダーの実装案件があって、なにかいいプラグインないかな~と探していたときに、上記の記事を発見。
シンプルで使いやすそうなので早速使ってみる。

たしかに使いやすいんだけど、イベントのある日はいちいちクリックしないと内容がわからない。
クリックする度にポップアップするし、超めんどくせー。

てなわけで、改造することにした。

改造したい内容:
イベントタイトルを表示するエリアを設けて、イベントのある日にマウスカーソルがホバーしたときにタイトルを表示、ホバーアウトで消す。

要は、クリックしなくてもどんなイベントがあるかぐらいは分かった方がアレよね、便利よね…ってことです。

まずは、オプションで表示セレクタを設定できるようにする。
zabuto_calender.jsの
this.each(function () {…
に以下のコードを追加。

$calendarElement.data('viewSelector', opts.view_selector);

これで「view_selector」オプションを設定したときに、中に入ってるデータを「$calendarElement.data(‘viewSelector’)」で使用できる。

そしたら、今度は
$.fn.zabuto_calendar_defaults = function () {…

var settings = {…

view_selector: null

を追加して、デフォルト値も設定しておく。

とりあえず、ここまででオプション追加が出来るようになったので、今度はホバー時のイベントファンクションを追加。

function hoverEvents() {

	var sel = $calendarElement.data('viewSelector');

	if (typeof(sel) === 'string'){
			  
		$("td.event-clickable").hover(

		function () {

			var t = $(this).attr("title");	
			var v = "<p>" + t + </p>";
			$(sel).append(v);
				
		},
		function () {
				
			$(sel).empty();
			  
		}
		);  
	}
}

最後に「function drawEvents($calendarElement, type) {…」の一番最後に

hoverEvents();

を加えて終了。
drawEventsで全て表示が終わったら、実行する感じね。

使い方としてはこんな感じ。

<script>
$(document).ready(function () {
  $("#my-calendar").zabuto_calendar({
    show_days: true,
    view_selector: "#example",
    ajax: {
      url: "schedule.json",
      modal: true
    }
  });
});
</script>

<div class="row">
    <div id="my-calendar"></div>
</div>

<div id="example"></div>

これで、イベントの存在する日をホバーしたときにタイトルが<div id=”example”></div>の中に追加される…ハズ。

ホバーしたときのアクションに関しては、tooltipsにしても良いかも。

「最初から一覧表示しとけば?」
とか言っちゃダメ、絶対!