我正在创建一个每周显示事件的日历。
这样https://fullcalendar.io/docs/timegrid-standard-view-demo
i指定了allDayDefault
的CC_1道具,并在事件props中指定了JSON数据。
将其allDay
值定义为false
的对象在全天区域表现良好。
但是将其allDay
值定义为true
的对象未显示。
<FullCalendar
defaultView="timeGridWeek"
plugins={[ timeGridPlugin, dayGridPlugin ]}
header={{
left: 'prev,next today',
center: 'title',
right: 'timeGridWeek,timeGridDay',
}}
nowIndicator={true}
allDayText="All Day"
allDayDefault={false}
locale='ko'
timeZone='UTC'
events={[
{
// not visible
id: 1,
title: "event 1",
start: "2019-05-21T11:00:00+09:00",
end: "2019-05-21T13:00:00+09:00",
allDay: false,
},
{
// not visible
id: 2,
title: "event 2",
start: "2019-05-21T11:00:00+09:00",
end: "2019-05-21T13:00:00+09:00",
},
{
// visible on All Day area
id: 3,
title: 'event 3',
start: "2019-05-21T11:00:00+09:00",
end: "2019-05-21T13:00:00+09:00",
allDay: true,
},
{
// not visible
id: 4,
title: 'event 4',
start: moment().toDate(),
end: moment().add(1, "days").toDate(),
},
{
// visible on All Day area
id: 5,
title: 'event 5',
date: '2019-05-20',
allDay: true,
},
{
// not visible
id: 6,
title: 'event 6',
date: '2019-05-20',
},
{
// not visible
id: 7,
title: 'event 7',
date: '2019-05-20',
allDay: false,
},
]}
scrollTime={'08:00:00'}
/>
我通过添加一行height: 100%
。
@fullcalendar/timegrid/main.css
.fc-time-grid .fc-content-skeleton {
position: absolute;
z-index: 3;
top: 0;
left: 0;
right: 0; }
to
.fc-time-grid .fc-content-skeleton {
position: absolute;
z-index: 3;
top: 0;
left: 0;
right: 0;
height: 100%; }