前提・実現したいこと
FullCallendarを使って予定表を出力したいと考えています。
eventsプロパティに連想配列としてeventsを渡せばうまく表示してくれるはずなのですが、デフォルトのeventsは表示されるのですが、追加したeventsが表示されません。
setする前にコンソールで中身が正しいことは確認しています。
また、中身のフォーマットが同じことも確認済みです。
ご教示お願いします。
####参考
https://fullcalendar.io/docs/react
発ている問題・エラーメッセージ
追加した予定が表示されない
該当のソースコード
js
1const [calendarEvents, setCalendarEvents] = React.useState([ 2 { 3 title: "Event!!!!!!!!", 4 start: new Date(), 5 }, 6 { 7 title: "サンプル", 8 start: new Date(), 9 }, 10 ]); 11 12//省略 13 14// google calendarから取ってきた予定を追加 15Promise.all( 16 events.map((item, index) => { 17 return new Promise((resolve, reject) => { 18 temp.push({ 19 title: item.summary, 20 start: new Date(item.start.dateTime), 21 }); 22 resolve("ok"); 23 }); 24 }) 25 ).then((result) => { 26 console.log(temp); //正しいものを確認 27 setCalendarEvents(temp); 28 }); 29 30//省略 31 32<FullCalendar 33 defaultView="resourceTimelineDay" 34 header={{ 35 left: "prev,next today", 36 center: "title", 37 right: "resourceTimelineDay,dayGridMonth", 38 }} 39 schedulerLicenseKey="GPL-My-Project-Is-Open-Source" 40 locale="ja" 41 plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin, resourceTimelinePlugin]} 42 ref={calendarComponentRef} 43 weekends={calendarWeekends} 44 events={calendarEvents} 45 // events={[ 46 // { title: "event 1", date: "2020-08-26" }, 47 // { title: "event 2", date: "2020-08-27" }, 48 // ]} 49 resourceAreaWidth="10%" 50 resourceLabelText="名前" 51 // events={personEvents} 52 />
試したこと
ここに問題に対して試したことを記載してください。
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
あなたの回答
tips
プレビュー