Create Beautiful Responsive And Flexible Event Calendar For React Application

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

The post Create Beautiful Responsive And Flexible Event Calendar For React Application appeared first on Lipku.com.

Flatlogic Admin Templates banner

Leave a Reply

Your email address will not be published. Required fields are marked *