1.2.9 • Published 11 months ago
react-vonder-calendar v1.2.9
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 |
1.2.8
11 months ago
1.2.9
11 months ago
1.2.6
12 months ago
1.2.5
2 years ago
1.2.4
2 years ago
1.2.3
2 years ago
1.2.2
2 years ago
1.2.0
2 years ago
1.2.1
2 years ago
1.1.30
2 years ago
1.1.29
2 years ago
1.1.28
2 years ago
1.1.27
2 years ago
1.1.26
2 years ago
1.1.25
2 years ago
1.1.24
2 years ago
1.1.23
2 years ago
1.1.22
2 years ago
1.1.21
2 years ago
1.1.20
2 years ago
1.1.19
2 years ago
1.1.18
2 years ago
1.1.17
2 years ago
1.1.16
2 years ago
1.1.15
2 years ago
1.1.14
2 years ago
1.1.10
2 years ago
1.1.9
2 years ago
1.1.8
2 years ago
1.1.7
2 years ago
1.1.6
2 years ago
1.1.5
2 years ago
1.1.4
2 years ago
1.1.3
2 years ago
1.1.0
2 years ago
1.0.25
2 years ago
1.0.24
2 years ago
1.0.23
2 years ago
1.0.22
2 years ago
1.0.21
2 years ago
1.0.20
2 years ago
1.0.19
2 years ago
1.0.18
2 years ago
1.0.17
2 years ago
1.0.16
2 years ago
1.0.15
2 years ago
1.0.14
2 years ago
1.0.13
2 years ago
1.0.12
2 years ago
1.0.11
2 years ago
1.0.10
2 years ago
1.0.9
2 years ago
1.0.8
2 years ago
1.0.7
2 years ago
1.0.6
2 years ago
1.0.5
2 years ago
1.0.4
2 years ago
1.0.3
2 years ago
1.0.2
2 years ago
1.0.1
2 years ago
1.0.0
2 years ago