fullcalendarでカレンダーに定期予定を入れる

Webサイトにちょっとした予定が見れるカレンダーがあったら便利という時に、探してみたところ

  • デザインのカスタマイズがカンタン
  • 繰り返しの予定もカンタン

そんなfullCalendarが使いやすかったという話です。

Alt text

FullCalendar
https://fullcalendar.io/

普通の予定

eventsという要素で予定をコントロールするのですがJSON形式でデータを扱います。
「title」:予定の名称
「start」:予定開始日

 events: [
{
title: '掃除',
start: '2017-01-22',
className:'fc-event-time'
},
{
title: 'おでかけ',
start: '2017-01-29',
className:'fc-event-time'
}
]

定期的な予定

毎週月曜日は、ずっと同じ予定にしておきたいときdowというパラメータを使用します。

dow: [ 0 ]⇒日曜日
dow: [ 1 ]⇒月曜日
dow: [ 2 ]⇒火曜日
dow: [ 3 ]⇒水曜日
dow: [ 4 ]⇒木曜日
dow: [ 5 ]⇒金曜日
dow: [ 6 ]⇒土曜日

このルールで、データを作成する。

 events: [
{
//毎週水曜日
title: '燃えないゴミ',
dow: [ 3 ]
},
{
//毎週月・木曜日
title: '燃えるゴミ',
dow: [ 1,4 ]
}
]

これでカンタンな予定(スケジュール:Schedule)共有ができる。

参考デモ:
https://fullcalendar.io/js/fullcalendar-3.1.0/demos/agenda-views.html

[Sponsored Links]







  • このエントリーをはてなブックマークに追加
[Sponsored Links]