0.1.0 • Published 4 years ago
react-calendar-from-scratch v0.1.0
REACT EVENT CALENDAR FROM SCRATCH
An event calendar like the google's calendar with generic style.
Installation
npm i react-full-event-calendar
or
yarn add react-full-event-calendar
Day Calendar
Week Calendar
Month Calendar
Usage
const Calendar = require('react-full-event-calendar');
const titleText = 'working in the weekend';
const events = [
{
startTime: new Date(moment().add(2, 'hour')),
endTime: new Date(moment().add(3, 'hour')),
title: 'working in the weekend',
},
{
startTime: new Date(moment().add(-3, 'hour')),
endTime: new Date(moment().add(-2, 'hour')),
title: 'working in the weekend',
},
{
startTime: new Date(),
endTime: new Date(moment().add(1, 'hour')),
title: 'working in the weekend',
},
];
<Calendar
events={events}
/>
Props
Property | Type | Default | Description |
---|---|---|---|
events | Array | Required | Events to display on the calendar |
dayOrientation | String | horizontal | The orientation of the day calendar, either 'vertical' or 'horizontal' |
defautlCalendarView | String | week | The default calendar to show, either 'day' , 'week' or 'month' |
defaultDate | Date | new Date() | The date to start on when mounted |
onDayChange | func(day, newDay) | Callback when the day change on day calendar | |
onWeekChange | func(newStartOfTheWeek, newEendOfTheWeek) | Callback when the week change on week calendar | |
onMonthChange | func(newMonth, newYear) | Callback when the month change on month calendar |
Event Objects
Key | Type | Required | Description |
---|---|---|---|
title | String | true | The title of the event |
startTime | Date | true | The start time of the event |
endTime | Date | true | The end time of the event |
DEMO
Authors
See also the list of contributors who participated in this project.
0.1.0
4 years ago