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 = = = = />
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.