https://github.com/hanse/react-calendar

React.js Calendar Component (npm install react-calendar-component) 📅
https://github.com/hanse/react-calendar

calendar datepicker react

Last synced: about 1 month ago
JSON representation

React.js Calendar Component (npm install react-calendar-component) 📅

• Host: GitHub
• URL: https://github.com/hanse/react-calendar
• Owner: hanse
• License: mit
• Created: 2014-05-30T20:59:48.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2023-11-06T17:12:45.000Z (about 1 year ago)
• Last Synced: 2024-08-10T14:08:45.150Z (5 months ago)
• Topics: calendar, datepicker, react
• Language: JavaScript
• Homepage: http://hanse.github.io/react-calendar
• Size: 1.69 MB
• Stars: 145
• Watchers: 5
• Forks: 113
• Open Issues: 25
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# react-calendar

[React](http://facebook.github.io/react/) calendar component inspired by

[CLNDR.js](http://kylestetz.github.io/CLNDR/).

```

$ npm install react-calendar-component

```

Note: the npm name is `react-calendar-component`!

This is a low-level component for rendering monthly calendars using React. The

component will call `renderDay` and `renderHeader` functions provided by you to

make a calendar for the month of the given `Date`. Very basic default

implementations are provided for both, but they can be overridden to fit your

use case. This

[example](https://github.com/Hanse/react-calendar/tree/master/examples/basic)

shows how to create a regular grid calendar.

# Live Demo

http://hanse.github.io/react-calendar/

# Usage

```js

import React, { Component } from 'react';

import { render } from 'react-dom';

import { Calendar } from 'react-calendar-component';

import moment from 'moment';

import 'moment/locale/nb';

class CalendarExample extends Component {

  state = {

    date: moment()

  };

  render() {

    return (

       this.setState({ date })}

        date={this.state.date}

        onPickDate={date => console.log(date)}

        renderDay={({ day, classNames, onPickDate }) => (

          
 onPickDate(day)}

          >

            {day.format('D')}

          

        )}

        renderHeader={({ date, onPrevMonth, onNextMonth }) => (

          


            «

            


              {date.format('MMMM YYYY')}

            

            »

          

        )}

      />

    );

  }

}


render(, document.getElementById('calendar'));

```

# License

MIT