为什么我的 react-big-calendar 看起来像这样？

Question

我刚刚开始使用 react-big-calendar，我只是编写了简单的代码来显示带有事件的日历，它看起来像这样，

是BC我没有添加任何样式吗？这是我的代码


import React, { FC } from 'react';

import moment from 'moment';
import { Calendar, momentLocalizer } from 'react-big-calendar';

const events = [
 {
   title: 'All Day Event very long title',
   allDay: true,
   start: new Date(2021, 3, 0),
   end: new Date(2021, 3, 1),
 },
 {
   title: 'Long Event',
   start: new Date(2021, 3, 7),
   end: new Date(2021, 3, 10),
 },

 {
   title: 'DTS STARTS',
   start: new Date(2021, 2, 13, 0, 0, 0),
   end: new Date(2021, 2, 20, 0, 0, 0),
 },

 {
   title: 'DTS ENDS',
   start: new Date(2021, 10, 6, 0, 0, 0),
   end: new Date(2021, 10, 13, 0, 0, 0),
 },

];

export const LeaveCalendar: FC = () => {
 const localizer = momentLocalizer(moment);

 const weekendDay = (current: moment.Moment) => {
   const weekDay = current.isoWeekday();
   const isWeekend: boolean = weekDay === 5 || weekDay === 6;

   return isWeekend;
 };
 return (
   <div style={{ height: '100%', width: '100%' }}>
     <Calendar
       localizer={localizer}
       events={events}
       startAccessor="start"
       endAccessor="end"
       style={{ height: 500 }}
     />
   </div>
 );
};

为什么会这样。像这样？

Answer 1

是的，您必须添加样式

import 'react-big-calendar/lib/css/react-big-calendar.css'

为什么我的 react-big-calendar 看起来像这样？

why does my react-big-calendar looks like this?

javascript

reactjs

react-big-calendar