react-easy-calendar
v0.1.2
Published
react calendar - easy to use
Downloads
6
Readme
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
Multi-Select Calendar
Single 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 }
- param:
system_date(date)
Generate a vannila date object from REC calendar date oject
- param:
date
{ Date }
- param:
compare(level, date1, date2)
Compare two dates by year, month or date
- param:
level
{ String }
'year', 'month', 'day' - param:
date1
{ Date } - param:
date2
{ Date }
- param:
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]
)
- param:
days_of_month(date)
day count of the month corresponding to the date
- param:
date
{ Date }
- param:
normalize(date)
if month or day is out of range, transform it into the normal form
- param:
date
{ Date }
- param:
offset_date(date, offset)
Get date with offset to the original
- param:
date
{ Date } - param:
offset
{ Number }
- param:
Development
git clone https://github.com/kdepp/react-easy-calendar.git
npm install
npm run dev
local example: http://localhost:8384
Licence
MIT