周视图与全日历反应之间的天数如何分开？

Question

我有一个 FullCalendar :

import FullCalendar from "@fullcalendar/react";
import dayGridPlugin from "@fullcalendar/daygrid";
import timeGridPlugin from "@fullcalendar/timegrid";
import interactionPlugin from "@fullcalendar/interaction";

// must manually import the stylesheets for each plugin

import "@fullcalendar/core/main.css";
import "@fullcalendar/daygrid/main.css";
import "@fullcalendar/timegrid/main.css";


<FullCalendar 
                   locale={frLocale}
                   allDaySlot={false}
            defaultView="timeGridWeek"
            nowIndicator={true}
            hiddenDays={[0]}
            slotDuration='00:45:00'
            minTime="07:00:00"
            maxTime="20:00:00"
            slotEventOverlap={false}
            handleWindowResize={true}
            header={{
              left: "prev,next today",
              center: "title",
              right: "dayGridMonth,timeGridWeek,timeGridDay"
            }}
            plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin ]}
            ref={this.calendarComponentRef}
            events={this.state.events}
            displayEventEnd={true}
          />

当我运行它时，我得到：

我想像黄线一样分隔日子：

我的 package.json :

我尝试添加这个 css :

.fc-timeGrid-view .fc-time-grid tbody tr:nth-of-type(even) {
    background: rgba(246, 246, 246, 0.667);
}

.fc-timeGrid-view .fc-widget-content {
  border-right: 2px solid #EE7 !important;
}

.fc-timeGrid-view .fc-widget-content:first-child {
  border-right: inherit !important;
}

但它不起作用，我希望日历的背景颜色为白色。

我该如何解决？

Answer 1

除非您使用 Bootstrap，否则网格显示正常。下面的示例使用与您的 <FullCalendar> 属性相同的配置。

编辑： 添加了 Bootstrap 主题并且列仍然分开。

plugins: [ 'bootstrap',  ... ],
themeSystem: 'bootstrap'

编辑 #2： 如果您真的想要设置列的样式，您可以试试这个：

.fc-widget-content {
  border-right: 2px solid #EE7 !important; /* Line thickness is 2px to better show */
}
.fc-widget-content:first-child {
  border-right: inherit !important; /* Revert the first child */
}

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');
  var calendar = new FullCalendar.Calendar(calendarEl, {
    plugins: [ 'dayGrid', 'timeGrid' ],
    defaultView: 'timeGridWeek',
    locale: 'fr',
    allDaySlot: false,
    nowIndicator: true,
    hiddenDays: [0],
    slotDuration: '00:45:00',
    minTime: "07:00:00",
    maxTime: "20:00:00",
    slotEventOverlap: false,
    handleWindowResize: true,
    eventLimit: true,
    displayEventEnd: true,
    header : {
      left: "prev,next today",
      center: "title",
      right: "dayGridMonth,timeGridWeek,timeGridDay"
    }
  });
  calendar.render();
});

.fc-timeGrid-view .fc-time-grid tbody tr:nth-of-type(even) {
    background: rgba(246, 246, 246, 0.667);
}

.fc-timeGrid-view .fc-widget-content {
  border-right: 2px solid #EE7 !important;
}

.fc-timeGrid-view .fc-widget-content:first-child {
  border-right: inherit !important;
}

<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/core/main.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/daygrid/main.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/timegrid/main.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/bootstrap/main.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/core/main.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/core/locales/fr.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/daygrid/main.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/timegrid/main.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/bootstrap/main.min.js"></script>
<div id="calendar"></div>

Answer 2

我通过添加来解决这个问题：

.fc-timeGrid-view .fc-time-grid tbody tr:nth-of-type(even) {
  background-color: transparent;
  border-right: 1px solid #f0f0f0 !important;
}
.fc-timeGrid-view .fc-time-grid tbody tr:nth-of-type(odd) {
  background: transparent;
  border-right: 1px solid #f0f0f0 !important;
}

.fc-widget-content {
  border-right: 1px solid #ddd !important; /* Line thickness is 2px to better show */
}
.fc-timeGrid-view .fc-widget-content:first-child{
  border-right: 1px solid #ddd !important;
}

Answer 3

我修复了它：

.fc .fc-scrollgrid-section .fc-timegrid-cols table {
    height: 100%;
}

我正在使用 fullcalendar 5.11.0 和 bootstrap 4.6.1，加载了 webpack。显然，有一条规则与将列高设置为 1px 的网格可滚动有关。此规则将其重置为原始的 100%。

周视图与全日历反应之间的天数如何分开？

How separate between days on the week view with fullcalendar react?

javascript

reactjs

bootstrap-4

fullcalendar

fullcalendar-4