1.0.4 • Published 4 years ago
rc-big-calendar v1.0.4
React Big Calendar
A lightweight Google Calendar like React Component built with grid and flexbox.
Demo
Install
npm install --save rc-big-calendar
Usage
import React from 'react'
import Calendar from 'rc-big-calendar'
const myCustomRender = (day) => {
return <div>Example</div>
}
const MyView = (props) => (
<Calendar
renderDay={myCustomRender}
previousButton={<span> 👈 </span>}
nextButton={<span> 👉 </span>}
onMonthChange={handleMonthChange}
/>
)
Props
renderDay: Function(currentDay: Date, startDate: Date, endDate: Date, isToday: boolean)
- Optional
- The custom renderer function for every day in the calendar.
previousButton: String | Component
- Optional
- The button to navigate to the previous month.
nextButton: String | Component
- Optional
- The button to navigate to the next month.
onMonthChange: Function(currentDay: Date, startDate: Date, endDate: Date)
- Optional
- The callback function to be called when clicking the next and previous buttons.
isMobile: Boolean
- Optional
- Whether to apply the mobile styles or not.
- Default value: false
headerDateFormat: String
- Optional
- The format of the date in the header of the calendar.
- Default value: 'MMMM YYYY'
headerColor: String
- Optional
- The color of the date in the header of the calendar.
- Default value: '#3c4043'
borderColor: String
- Optional
- The color of the borders.
- Default value: '#dadce0'
dayNameColor: String
- Optional
- The color of theday name (MON, TUE....).
- Default value: '#70757a'
For date formating please refer to the date-fns docs.
Changelog
1.0.4
- Remove styled-components dependency.
- Previously only the content of the cell could be controlled and not the header, now the render callback allows you to render the whole cell.
- Removed props for formatting the header of the cell since now you can render your own header with your own styles.
- Changed mobileBreakpoint by isMobile for more control on when to change to mobile styles
1.0.3
- Added support for date formatting.
- Added support for current day header color.
License
Licensed under the MIT License, Copyright © 2020-present Luis Guerrero drac94.
See LICENSE for more information.