➧Create Beautiful Responsive And Flexible Event Calendar For React Application • Softbranchdevelopers

Contents

Description:

A fully responsive and flexible event calendar for React application with monthly and weekly calendar component to show the custom events.

How to use it?

Install the component using NPM.

npm install @zach.codes/react-calendar date-fns

2. Import the required components.

import { format, subHours, startOfMonth } from ‘date-fns’;
import {
MonthlyBody,
MonthlyDay,
MonthlyCalendar,
MonthlyNav,
DefaultMonthlyEventItem,
} from ‘@zach.codes/react-calendar’;

3. The code to create responsive event calendar.

export const MyMonthlyCalendar = () => {
let [currentMonth, setCurrentMonth] = useState<Date>(
startOfMonth(new Date())
);

return (
<MonthlyCalendar
currentMonth={currentMonth}
onCurrentMonthChange={date => setCurrentMonth(date)}
>
<MonthlyNav />
<MonthlyBody
events={[
{ title: ‘Call John’, date: subHours(new Date(), 2) },
{ title: ‘Call John’, date: subHours(new Date(), 1) },
{ title: ‘Meeting with Bob’, date: new Date() },
]}
>
<MonthlyDay<EventType>
renderDay={data =>
data.map((item, index) => (
<DefaultMonthlyEventItem
key={index}
title={item.title}
// Format the date here to be in the format you prefer
date={format(item.date, ‘k:mm’)}
/>
))
}
/>
</MonthlyBody>
</MonthlyCalendar>
);
};