forget for get

覚えるために忘れる

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

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

 

↓こんな感じ。

吉岡里帆カレンダー

 

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

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

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

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

 

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

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

 

githubhttps://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();