https://github.com/alexstaroselsky/react-lite-calendar
React calendar component
https://github.com/alexstaroselsky/react-lite-calendar
calendar css dayjs html nwb react
Last synced: 4 months ago
JSON representation
React calendar component
- Host: GitHub
- URL: https://github.com/alexstaroselsky/react-lite-calendar
- Owner: alexstaroselsky
- Created: 2019-06-21T03:42:43.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T00:50:27.000Z (over 3 years ago)
- Last Synced: 2025-10-20T19:27:11.830Z (8 months ago)
- Topics: calendar, css, dayjs, html, nwb, react
- Language: JavaScript
- Size: 3.37 MB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 25
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
Awesome Lists containing this project
README
# react-lite-calendar
[![Travis][build-badge]][build]
[![npm package][npm-badge]][npm]
React calendar component:
## Getting started
### Installation
```
npm install react-lite-calendar
```
### Installation
Usage:
```js
import React, { Component } from "react";
import LiteCalendar from "react-lite-calendar";
class App extends Component {
state = {
date: new Date()
};
handleChange = value => this.setState({ date: value });
handleOpened = () => console.log("opened");
handleClosed = () => console.log("closed");
render() {
return (
);
}
}
export default App;
```
## User guide
#### Props
|Prop name|Description|Example values|
|----|----|----|
|start|The beginning of a period that shall be selectable by default when no value is given. Defaults to `new Date(1987, 9, 29)`.|`new Date(2017, 5, 1)`|
|end|The ending of a period that shall be selectable by default when no value is given. Defaults to `new Date(2020, 9, 29)`.|`new Date(2020, 5, 1)`|
|onChange|Function called when the user clicks an item (day on month view, month on year view and so on) on the most detailed view available.|`(value) => console.log('New date is: ', value)`|
|onOpened|Function called when calendar is opened.|`(value) => console.log('onOpened')`|
|onClosed|Function called when calendar is closed.|`(value) => console.log('onClosed')`|
|value|Defines the value of the calendar. Defaults to `new Date()`.|Date: `new Date()`|
|format|[dayjs date format](https://github.com/iamkun/dayjs/blob/dev/docs/en/API-reference.md#format-formatstringwithtokens-string) string for default trigger button. Defaults to `"dddd, MMMM D, YYYY"`|`"dddd, MMMM D, YYYY"`|
## License
The MIT License.
## Author
Alexander Staroselsky
[build-badge]: https://img.shields.io/travis/user/repo/master.png?style=flat-square
[build]: https://travis-ci.org/user/repo
[npm-badge]: https://img.shields.io/npm/v/npm-package.png?style=flat-square
[npm]: https://www.npmjs.org/package/npm-package