react-interval-calendar v1.0.1

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

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.