Calendar

[elicharlese]

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import { Paper, Typography } from '@material-ui/core';
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 useStyles = makeStyles((theme) => ({
  root: {
    width: '100%',
  },
  paper: {
    padding: theme.spacing(2),
  },
}));

const events = [
  {
    title: 'Project kickoff meeting',
    start: new Date(2023, 1, 20, 9, 0),
    end: new Date(2023, 1, 20, 11, 0),
  },
  {
    title: 'Development sprint 1',
    start: new Date(2023, 1, 27, 9, 0),
    end: new Date(2023, 2, 3, 17, 0),
  },
  {
    title: 'QA testing',
    start: new Date(2023, 2, 4, 10, 0),
    end: new Date(2023, 2, 8, 17, 0),
  },
  {
    title: 'Deployment',
    start: new Date(2023, 2, 9, 9, 0),
    end: new Date(2023, 2, 9, 12, 0),
  },
];

const CalendarComponent = () => {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <Paper className={classes.paper}>
        <Typography variant="h6" gutterBottom>
          Project Calendar
        </Typography>
        <Calendar
          localizer={localizer}
          events={events}
          startAccessor="start"
          endAccessor="end"
          style={{ height: 500 }}
        />
      </Paper>
    </div>
  );
};

export default CalendarComponent;

In this example, we are using the react-big-calendar library to display a calendar component. We are passing the calendar events as a prop and using Material-UI's Paper component to wrap the calendar. We also added a Typography component to give the calendar a title.