web制作

カレンダーを表示できるレスポンシブ対応のjs!monthly.jsの使い方

monthly.jsの使い方がわからない

予定つきカレンダーを自分のサイトに埋め込んでみたいがいいjsはないだろうか

というかた向けの記事です。

先日、クライアントサイトにカレンダー機能を搭載しようと、monthly.jsを使いました。

設定方法を調べたのですが、あまり検索しても詳しく日本語で出てこなかったのでここに書いておきたいと思います。

monthly.jsとは

monthly.jsはシンプルなカレンダーを自分のサイトに設定することができるjsです。

使用にはjqueryが必要です。

色分けして予定も記入、表示させることができます。

予定はjsまたはxmlでの設定する仕様です。

デモはこちら

カレンダー設定できるmonthly.jsの使い方

1.monthly.jsをダウンロードします。

monthly.js

2.ダウンロードデータ内のmonthly.css、monthly.js、jquery.jsを自分のサイトに入れる。

3.読み込みたいサイトのheadにmonthly.css、body直前にmonthly.js(+jquery.js)を入れます。新規ファイルでshedule.jsも作成しました。

[html/head内に]

 

[html/</body>直前に]

4.html内のカレンダーを表示させたい箇所に以下コードを入れる。

[html/表示させたい場所に]

5.xml形式での読み込みがうまくいかなかったので、schedule.jsに予定のプログラムを設定しました。

[schedule.js]

以下、予定の記載やオプション設定についてです。

予定の記載について

“id”: 1(id番号)
“name”: “予定”,(予定名)
“startdate”: “2018-08-27”,(開始日)
“enddate”: “”,(終了日)
“color”: “#e84d38”,(背景色)

monthly.jsの設定オプション

今回使ったオプション設定が以下です。

$(‘#mycalendar’).monthly({
mode: ‘event’,(イベント表示またはピッカー表示)
dataType: ‘json’,
events: Events,
eventList:false(日付をクリックしたら予定一覧を表示させるか/デフォルト:true)
});

詳しくは以下もどうぞ。

monthly.cssを1部変更しました

デフォルト設定だと、今日の日付の背景に赤色がつきます。
不要だったので、cssの設定を変更しました。

monthly.css内の.monthly-today .monthly-day-numberの部分です。

[変更前]

 

[変更後]

参考になれば幸いです。

この他にも使っていないオプションがありました。

wordpressでの設定の際は、monthly.jsよりプラグイン使用のほうが便利かと思います。