1.1.14 • Published 2 years ago
react-vonder-calendar-test v1.1.14
React Calendar with Compound Component Pattern
Demo
Basic Usage
<Calendar
type={"month"}
displayFullEvent
eventLists={[
{
id: 1,
startDate: new Date(2021, 11, 30),
endDate: new Date(2022, 0, 2),
events: [
{
title: "Meeting",
},
],
},
]}
>
<CalendarControlButton />
<CalendarHeader />
<CalendarWeekDay />
<DateEvent />
</Calendar>
Advance Usage
<Calendar
type={"month"}
displayFullEvent
eventLists={[
{
id: 1,
startDate: new Date(2021, 11, 30),
endDate: new Date(2022, 0, 2),
title: "Meeting",
},
{
id: 2,
startDate: new Date(2022, 0, 7),
endDate: new Date(2022, 0, 10),
title: "test",
},
{
id: 3,
startDate: new Date(2022, 0, 21),
endDate: new Date(2022, 0, 21),
title: "Meeting",
},
]}
>
<CalendarControlButton>
{({ goNextMonth, goToDay }) => {
return (
<>
<button onClick={() => goNextMonth()}>
next month with render props
</button>
<button onClick={() => goToDay()}>go to day with render props</button>
</>
);
}}
</CalendarControlButton>
<CalendarHeader>
{({ activeYear, activeMonth }) => {
return (
<h2>
this is header - {activeYear.toString()} /{" "}
{activeMonth + 1?.toString()}
</h2>
);
}}
</CalendarHeader>
<CalendarWeekDay>
{MONTH_LIST?.map((item) => {
return <CalendarWeekDay.Item>{item?.name}</CalendarWeekDay.Item>;
})}
</CalendarWeekDay>
<DateEvent
renderEvent={({ events }) => {
return events?.map((event) => {
return <span key={Math.random() * 2022}>{event?.title}</span>;
});
}}
/>
</Calendar>
Calendar Props
Prop | Description |
---|---|
type | "month" or "week" |
displayFullEvent | boolean default is false |
eventLists | Array of Events |
children | <CalendarControlButton /> or <CalendarHeader /> or <CalendarWeekDay /> or <DateEvent /> |
fixWeek | work with calendarType === "week" only, calendar will not play animation when select date |
disableSwipe | disable swipe calendar to next month or prev month |
onClick | on user click date |