monthly.jsを使って俺の嫁リストにカレンダー表示機能を追加

monthly.jsを使って俺の嫁リストにカレンダー表示機能を追加してみました。

↓こんな感じ。

新垣結衣カレンダー

年末年始、本屋さんとかでカレンダーを見かけることも多くて、

ふと、好きな画像でカレンダー作れたらいいなと思って、

キーワードからgoogle画像検索でひっかかった画像を表示するサイト「俺の嫁リスト」があったので、

そこにカレンダー表示機能をつけてみたらそれっぽいのができると思って、作業開始。

カレンダー表示するjQueryプラグインとして、fullcalendar.jsを使ったことがあったので、今回も使おうと思ったのですが、レスポンシブ対応してないようなので、

レスポンシブ対応しているmonthly.jsを使いました。

github：https://github.com/kthornbloom/Monthly

デモ：http://kthornbloom.com/monthly/

Quick Startに書いてある通りでほぼ完成。

<link rel="stylesheet" href="css/monthly.css">

<div class="monthly" id="mycalendar"></div>

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/monthly.js"></script>
<script type="text/javascript">
    $(window).load( function() {
        $('#mycalendar').monthly();
    });
</script>

月の切り替えで画像を入れ替えるために、

.monthly-prev、.monthly-next、.monthly-resetのクリックイベントを拾うくらい。

.monthly-resetのクリックイベントだけ拾えなかったのですが、

monthly.jsでクリックイベントがキャンセルされていたので、コメントアウトして対処しました。

//event.stopPropagation();