README
react-interval-calendar
Infinite scrolling based calendar for interval dates built with React.
- no additional dependencies
- no additional date library
- customizable
- lightweight
Getting started
Compatibility
Your project needs to use React.js 16.8 or later.
React-Interval-Calendar uses modern web technologies. It's only supports modern web browser with internationalization API. In legacy browsers you have to use additional polyfill for internationalization to be able to use this library.
Installation
$ npm i react-interval-calendar
or
yarn add react-interval-calendar
Usage
Here's an example of basic usage:
import React from 'react';
import IntervalCalendar from 'react-interval-calendar';
const App = () => (
<IntervalCalendar
weekStartsOn={1}
start={new Date(2021, 1, 1)}
end={new Date(2021, 6, 31)}
highlighted={[
{
key: 'audit',
start: new Date(2021, 1, 16),
end: new Date(2021, 1, 20),
},
]}
height={700}
showToday={false}
showMonths
showYears
showBorder
showBorderRadius
fadeWeekends
/>
);
export default App;
For more detailed example check the example directory.
Prop-Types
Prop name | Type | Default value | Description |
---|---|---|---|
start | Date | undefined |
The beginning of the calendar that should displayed. The calendar will display the whole month of the start date. |
end | Date | undefined |
The end of the calendar that should displayed. The calendar will display the whole month of the end date. |
customClassNames | object | {} |
Class name(s) that will be applied to a given calendar item. More details see Custom Class Names props. |
enableSelect | boolean | false |
Whether the day cell selection is enabled or not |
emptyLabel | string | There is no date range to display |
Content of a label rendered in case of no or invalid start-end interval. |
fadeWeekends | boolean | false |
Whether the weekends shall be faded or not. |
height | number or string | 500 |
Height of the calendar. Can be a number in pixels, 100% , auto or a string that can be evaluated in css. |
highlighted | array | [] |
Array of the intervals that should be highlighted between the start and end date. The highlighted interval cannot intersect with each other yet. More details see Highlighted Props. |
highlightedColorAlpha | number | 0.2 |
Alpha level of the highlighted colors. Can be between 0.0 and 1.0 . |
locale | string | default |
Locale that should be used to format and display the days and months. Can be an IETF language tag. |
numberOfWeekFirstRender | number | 8 |
Number of weeks to render below the visible weeks on the first render. |
numberOfWeekPreRender | number | 4 |
Number of weeks to render below the visible weeks. Tweaking this can help reduce flickering during scrolling on certain browers/devices. |
onSelect | function | undefined |
Function called when the user clicks a day. It returns a Day object. Only takes effect when the enableSelect is true |
showBorder | boolean | false |
Whether the calendar component border shall be rendered or not. |
showBorderRadius | boolean | false |
Whether the calendar component border shall be rounded or not. Only takes effect when the showBorder prop set to true . |
showGutterBetweenHighlighted | boolean | false |
Whether a small gutter shall be shown on the highlighted intervals to be more separated or not. |
showHeader | boolean | true |
Whether the whole header shall be shown or not. |
showHeaderWeekdays | boolean | true |
Whether the name of the day shall be shown in the header columns or not. Only takes effect when the showHeader prop set to true . |
showMonthStripes | boolean | true |
Whether the months background color stripes shall be shown or not. |
showMonths | boolean | false |
Whether the month name shall be shown on the first day of a month or not. |
showToday | boolean | true |
Whether the current day shall be highlighted or not. |
showYears | boolean | false |
Whether the year number shall be shown on the first day of a month or not. |
theme | string | light |
The color theme of the calendar. Can be light or dark . |
weekStartsOn | number | 0 |
The index of the day that the week should starts on. Can be 0 , 1 , 2 , 3 , 4 , 5 or 6 . |
Custom Class Names Props
The customClassNames
prop can consume the following props where each prop can be a string
or an array of string
:
| Prop name | Description |
| --- | --- |
| calendar | Classname(s) that will be applied to the calendar container element. |
| calendarEmpty | Classname(s) that will be applied to calendar empty state container element. |
| header | Classname(s) that will be applied to header element. |
| headerWeekdays | Classname(s) that will be applied to weekdays list wrapper element inside the header. |
| headerWeekday | Classname(s) that will be applied to each day list item element inside the header weekdays list. |
| weeks | Classname(s) that will be applied to the weeks container element. |
| week | Classname(s) that will be applied to week container element. |
| day | Classname(s) that will be applied to the day container element. |
| dayText | Classname(s) that will be applied to the main day text element inside the day container. |
| dayMonthText | Classname(s) that will be applied to the month text element inside the day container. |
| dayYearText | Classname(s) that will be applied to the year text element inside the day container. |
| dayHighlighted | Classname(s) that will be applied to the highlighted day element inside the day container. |
| daySelected | Classname(s) that will be applied to the user selected day element inside the day container. |
| dayToday | Classname(s) that will be applied to the current day element inside the day container. |
Highlighted Props
The highlighted
prop is an array and each item is an object
and should look like the following:
| Prop name | Required/Optional | Description |
| --- | --- | --- |
| id | Optional | Identifies the item inside the array. |
| key | Optional | Identifies the item inside the array. |
| start | Required | Start date of the highlighted interval. |
| end | Required | End date of the highlighted interval. |
| color | Optional | Highilight color of the interval. The color can be in hex
, rgb
or rgba
format. The calendar will convert the color into an rgba
format where the alpha
value will be equal to highlightedColorAlpha
prop by default if that is not provided as part of the color. |
Day Object
The onSelect
function will return a Day object
with the following props:
| Prop name | Description |
| --- | --- |
| key | Day identifier that created from the number of week and day of the week. |
| date | Actual Date object of the day. |
| yearLabel | Year label from the actual date. |
| monthLabel | Month label from the actual date formatted with the provided locale
prop. |
| dayLabel | Day of the month label that is displayed in the calendar. |
| isMonthEven | Describes whether the month of the actual date is even or not. |
| isFirstDayOfMonth | Describes whether the actual date is the first day of the month or not. |
| isLastDayOfMonth | Describes whether the actual date is the last day of the month or not. |
| isToday | Describes whether the actual date is the same date as today or not. |
| isWeekend | Describes whether the actual date is on weekend or not. |
| isHighlighted | Describes whether the actual date is highlighted or not. |
| isFirstOfHighlighted | Describes whether the actual date is the first date of the highlighted interval or not. |
| isLastOfHighlighted | Describes whether the actual date is the last date of the highlighted interval or not. |
| highlightColor | The color of the highlight in rgba
format. |
| highlightId | The highlight id
or key
if the actual date is highlighted. |
Development
Local development is broken into two parts (ideally using two terminal tabs).
First, run rollup to watch your src/
module and automatically recompile it into dist/
whenever you make changes.
# Assume that you are in the project main folder
$ npm i
$ npm start
The second part will be running the example/
create-react-app that's linked to the local version of your module.
# Assume that you are in the project main folder
$ cd example
$ npm i
$ npm start
Contributing
First off all, thanks for taking the time to contribute! :muscle:
Before any action, please visit the Code of Conduct and Contributing guideline for more information.
License
React Interval Calendar is Open Source software under the MIT license. Complete license and copyright information can be found within the license.