尽管指定了时间,并且Allday是错误的,但FullCalendar并未显示时间



我正在创建一个每周显示事件的日历。

这样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%; }

相关内容

  • 没有找到相关文章

最新更新