CODEWITHSUNDEEP
javascriptreactjsreact-big-calendar
Ammar ALSananni
Ammar ALSananni

Reputation: 161

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

i have just start work with react-big-calendar , and i just wite the simple code to show the calendar with the event , and its looks like this , enter image description here

is it BC the i didn’t add any styles ? and this is my code


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>
 );
};

why it's look. like this ?

Upvotes: 1

Views: 293

Answers (1)

iunfixit
iunfixit

Reputation: 994

Yes you have to add styles

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

Upvotes: 2

Related Questions