@knightburton/react-interval-calendar

Infinite scrolling based calendar for interval dates built with React.

Usage no npm install needed!

<script type="module">
  import knightburtonReactIntervalCalendar from 'https://cdn.skypack.dev/@knightburton/react-interval-calendar';
</script>

README

react-interval-calendar

Build Workflow npm npm

react-interval-calendar-light react-interval-calendar-dark

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 @knightburton/react-interval-calendar

or

yarn add @knightburton/react-interval-calendar

Usage

Here's an example of basic usage:

import React from 'react';
import IntervalCalendar from '@knightburton/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.