@types/react-big-calendar

Basic Calendar Setup

This code sets up a basic calendar using react-big-calendar with moment.js as the date localizer. It initializes the calendar with no events and sets the height to 500 pixels.

import { Calendar, momentLocalizer } from 'react-big-calendar';
import moment from 'moment';
import 'react-big-calendar/lib/css/react-big-calendar.css';

const localizer = momentLocalizer(moment);

const MyCalendar = () => (
  <Calendar
    localizer={localizer}
    events={[]}
    startAccessor="start"
    endAccessor="end"
    style={{ height: 500 }}
  />
);

Adding Events

This code demonstrates how to add events to the calendar. The events array contains objects with title, start, and end properties, which are then passed to the Calendar component.

const events = [
  {
    title: 'Meeting',
    start: new Date(2023, 9, 20, 10, 0),
    end: new Date(2023, 9, 20, 12, 0)
  },
  {
    title: 'Lunch',
    start: new Date(2023, 9, 21, 12, 0),
    end: new Date(2023, 9, 21, 13, 0)
  }
];

const MyCalendar = () => (
  <Calendar
    localizer={localizer}
    events={events}
    startAccessor="start"
    endAccessor="end"
    style={{ height: 500 }}
  />
);

Customizing Event Appearance

This code shows how to customize the appearance of events in the calendar. The eventStyleGetter function returns a style object based on the event's title, which is then applied to the events in the calendar.

const eventStyleGetter = (event, start, end, isSelected) => {
  let backgroundColor = event.title === 'Meeting' ? 'blue' : 'green';
  let style = {
    backgroundColor: backgroundColor,
    borderRadius: '0px',
    opacity: 0.8,
    color: 'white',
    border: '0px',
    display: 'block'
  };
  return {
    style: style
  };
};

const MyCalendar = () => (
  <Calendar
    localizer={localizer}
    events={events}
    startAccessor="start"
    endAccessor="end"
    style={{ height: 500 }}
    eventPropGetter={eventStyleGetter}
  />
);