Skip to content

kdepp/react-easy-calendar

Repository files navigation

React Easy Calendar (REC)

REC is a react calendar component which is easy to use.

Installation

npm install --save react-easy-calendar

Online Demo

http://kdepp.github.io/react-easy-calendar/demo.html

Playground

https://jsfiddle.net/kdepp/3uqudotn/

Screenshots

Simple Calendar
simple calendar

Multi-Select Calendar
simple calendar

Single Range Calendar
single range calendar

Double Range Calendar
double range calendar

Usage

// a normal calendar

import {SimpleCalendar, utils} from 'react-easy-calendar';

var app = React.createClass({
    render: function () {
        return (
            <SimpleCalendar
                mday  = {utils.make_date(2016, 4, 1)}
                today = {utils.make_date(2016, 4, 21)}
                selectedDates = {[utils.make_date(2016, 4, 13)]}
                selectMode   = {0}
            />
        );
    }
});
// A multi-select calendar

import {SimpleCalendar, utils} from 'react-easy-calendar';

var app = React.createClass({
    render: function () {
        return (
            <SimpleCalendar
                mday  = {utils.make_date(2016, 4, 1)}
                today = {utils.make_date(2016, 4, 21)}
                selectedDates = {[utils.make_date(2016, 4, 1), utils.make_date(2016, 4, 13)]}
                selectMode   = {1}
                showOutRange = {true}
            />
        );
    }
});

Component Props

  • onChange (optional)

    • callback for change of selected dates
  • onUpdateState (optional)

    • callback for state changes after mouse hover & mouse leave & click on dates
  • mday (optional)

    • sample date of the month
    • default: today
  • today (optional)

    • the current day
    • default: today
  • validRange (optional)

    • a tuple of dates, selection can only be made in the valid range
  • selectedDates (optional)

    • a list of selected dates
  • selectedReducer (optional)

    • customize selected date state change reducer
  • selectMode (optional)

    • calendar select mode, single or multiple. It will use the default select reducer if you don't customize it.
  • showOutRange (optional)

    • whether to show out-of-range dates
  • styles (optional)

    • customize styles

Calendar Utils API

  • make_date(year, month, day)

    Generate a new date object

    • param: year { Number }
    • param: month { Number }
    • param: day { Number }
  • system_date(date)

    Generate a vannila date object from REC calendar date oject

    • param: date { Date }
  • compare(level, date1, date2)

    Compare two dates by year, month or date

    • param: level { String }
      'year', 'month', 'day'
    • param: date1 { Date }
    • param: date2 { Date }
  • date_in_range(date, range)

    check whether date is in the range

    • param: date { Date }
    • param: range { Array }
      a tuple of date objects ([start, end])
  • days_of_month(date)

    day count of the month corresponding to the date

    • param: date { Date }
  • normalize(date)

    if month or day is out of range, transform it into the normal form

    • param: date { Date }
  • offset_date(date, offset)

    Get date with offset to the original

    • param: date { Date }
    • param: offset { Number }

Development

git clone https://github.com/kdepp/react-easy-calendar.git
npm install
npm run dev

local example: http://localhost:8384

Licence

MIT

About

react calendar - easy to use

Resources

License

Stars

Watchers

Forks

Packages

No packages published