Webデザイン

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

calendar
o_wani
この記事は作成から7年以上経過しているため、内容が古くなっている可能性があります。

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

STAFF
o_wani
o_wani
スタッフ
大学卒業後、15年間WEB業界で働く。現在はマネジメントに従事していますが、ChatGPTの登場に触発され、このブログを再開。AIをパートナーに、自分で手を動かして実装する楽しさと喜びを再発見中。時代が変わりつつある中でも、陳腐化しない情報発信も目指しています。
記事URLをコピーしました