javascript - 全日历的周视图中各天之间的反应如何？(How separate between days on the week view with fullcalendar react?)

Question

I have a FullCalendar :(我有一个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} /> when I run it, I get:(当我运行它时，我得到：) I want to separate between days like a yellow line :(我想像黄线一样分隔几天：) My package.json :(我的package.json ：) I try to add this css :(我尝试添加此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; } But it doesn't working and I want the background color of the calendar is white.(但这不起作用，我希望日历的背景颜色是白色。) How can I fix it ?(我该如何解决？)   ask by CodeLover translate from so

Answer 1

Unless you're using Bootstrap, the grid shows up fine.(除非您使用Bootstrap，否则网格显示会很好。)

The example below uses an identical configuration to your <FullCalendar> attributes.(下面的示例使用与<FullCalendar>属性相同的配置。) Edit: Added the Bootstrap theme and the columns are still separated.(编辑：添加了Bootstrap主题，列仍然分开。) plugins: [ 'bootstrap', ... ], themeSystem: 'bootstrap' Edit #2: If you REALLY want to style the columns, you can try this:(编辑＃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>