React-yearly-calendar

React calendar component with yearly view.

$ npm install react-yearly-calendar

Demo

http://belkalab.github.io/react-yearly-calendar/

Or taste an example usage below:

var ReactDOM = require('react-dom');
var {Calendar}  = require('react-yearly-calendar').Calendar;
var {CalendarControls}  = require('react-yearly-calendar').CalendarControls;

function onDatePicked(date) {
  alert(date);
}

ReactDOM.render(
  <Calendar
    onPickDate={onDatePicked}
  />
  document.getElementById('calendar')
);

Options

Calendar

year: React.PropTypes.number.isRequired: current year number [default: current year],
selectedDay: moment.js object: selected day [default: today],
forceFullWeeks: React.PropTypes.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.boolean: show today button 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 the today button

Styling guide

The calendar is rendered as an html table element, to ensure proper displaying even in case the style isn't being loaded.

Take a look at the css file in examples/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: adds bolder class 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 add pointer-events: none to 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

License

About Belka

Belka is a Digital Agency specialized in design, mobile applications development and custom solutions. We love open source software! You can see our projects or look at our case studies.

Interested? Hire us to help build your next amazing project.

eliot-akira / react-yearly-calendar Goto Github PK