React.js的年日历组件：React-yearly-calendar
jopen
9年前
React 是一个年日历视图组件。
$ npm install react-yearly-calendar
示例
http://belkalab.github.io/react-yearly-calendar/
Or taste an example usage below:
var ReactDOM = require('react-dom'); var {Calendar, CalendarControls} = require('react-yearly-calendar'); function onDatePicked(date) { alert(date); } ReactDOM.render( <Calendar onPickDate={onDatePicked} />, document.getElementById('calendar') );- s.bool: match calendar row end with row start [default: false],
- showDaysOfWeek: React.PropTypes.bool: show days of week table header [default: true]
CalendarControls
- year: React.PropTypes.number.isRequired: current year number [default: current year],
- showTodayButton: React.PropTypes.bool: showtodaybutton on top left [default: true]
Callbacks
Calendar
- onPickDate: React.PropTypes.func: func(selectedDay) called when user clicks on a day
CalendarControls
- onPrevYear: React.PropTypes.func: func() called on user clicking«(previous year button),
- onNextYear: React.PropTypes.func: func() called on user clicking»(next year button),
- goToToday: React.PropTypes.func: func() called on user clicking thetodaybutton
Styling guide
The calendar is rendered as an htmltableelement, to ensure proper displaying even in case the style isn't being loaded.
Take a look at the css file inexamples/basic/style.css. Here are some head-ups if you want to style it yourself.
- table.calendar: the main element that renders the calendar
- table.calendar thead: renders the week day names
- table.calendar thead th.bolder: addsbolderclass to Sundays
- table.calendar td.month-name: first column in table body, showing month names
- table.calendar td.prev-month,table.calendar td.next-month: classes applied to the days of the previous and next month showed in a month's row to fill it up. Day numbers and callbacks are present even in these cells, so we suggest to play with text color to make days less intrusive and addpointer-events: noneto prevent clicking.
- table.calendar td.selected: the currently selected day
-
table.calendar td.bolder: the days which are Sundays
-
div.calendar-controls: the main CalendarControls container
- div.calendar-controls .current-year: the current year
- div.calendar-controls .controls: applies to next and previous arrows and to today button
- div.calendar-controls .today: the today button
Build it yourself
Clone and run
$ npm install