Get started with react-big-calendar CDN

MIT licensed

React Big Calendar is a popular React library for rendering interactive, customizable calendar views.

Tags:
  • scheduler
  • react-component
  • react
  • calendar
  • events
  • full calendar

Stable version

Copied!

How to start using react-big-calendar CDN


import React from 'react';
import moment from 'moment';
import 'moment/locale/en-gb'; // Import locale for moment.js
import Calendar from 'react-big-calendar';
import 'react-big-calendar/lib/css/react-big-calendar.css';

moment.locale('en-gb');

const events = [
  {
    title: 'Birthday Party',
    start: new Date(2023, 3, 14),
    end: new Date(2023, 3, 15),
  },
  {
    title: 'Doctor Appointment',
    start: new Date(2023, 4, 20),
  },
];

const CalendarComponent = () => {
  return (
    <Calendar
      locales={{ 'en-gb': moment }}
      events={events}
      startAccessor="start"
      endAccessor="end"
    >
      <Calendar.Toolbar />
      <Calendar.Week numbers={true} />
      <Calendar.Month />
    </Calendar>
  );
};

export default CalendarComponent;
Copied!
Copied!
Copied!
Copied!

All versions