react-yearly-calendar2
react-yearly-calendar2
npm i react-yearly-calendar2
react-yearly-calendar2

react-yearly-calendar2

React.js Yearly Calendar Component

by BelkaLab

1.1.3 (see all)License:MITTypeScript:Not Found
npm i react-yearly-calendar2
Readme

React-yearly-calendar

React calendar component with yearly view.

npm version Alt text

$ npm install react-yearly-calendar

Demo

http://belkalab.github.io/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
    year={2016}
    onPickDate={onDatePicked}
  />,
  document.getElementById('calendar')
);

Options

Calendar

PropTypeDescriptionDefault
yearReact.PropTypes.number.isRequiredyear to be displayedcurrent year
selectedDaymoment.js objectselected daytoday
forceFullWeeksReact.PropTypes.boolmatch calendar row end with row startfalse
showDaysOfWeekReact.PropTypes.boolshow table header with days of weektrue
showWeekSeparatorsReact.PropTypes.boolshows a blank column between one week and anothertrue
firstDayOfWeekReact.PropTypes.numberselect first day of week0 (Sunday)
selectRangeReact.PropTypes.boolenable selecting rangesfalse
selectedRange[moment.js obj, moment.js obj]selected range of dates in the form [start, end]
customClassesReact.PropTypes.object, React.PropTypes.funccustom days/periods coloring (see section below)

CalendarControls

PropTypeDescriptionDefault
yearReact.PropTypes.number.isRequiredcurrent year numbercurrent year
showTodayButtonReact.PropTypes.boolshow Today button on top lefttrue

Callbacks

Calendar

PropTypeSyntaxDescription
onPickDateReact.PropTypes.funcfunction(selectedDay) {}called when user clicks on a day
onPickRangeReact.PropTypes.funcfunction(rangeStart, rangeEnd) {}called when user selects a range of dates (only in selectRange mode)

CalendarControls

PropTypeSyntaxDescription
onPrevYearReact.PropTypes.funcfunction() {}called on user clicking « (previous year button)
onNextYearReact.PropTypes.funcfunction() {}called on user clicking » (next year button)
goToTodayReact.PropTypes.funcfunction() {}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.week-separator: class applied to table cells used to separate one week from another. As above, pointer-events: none is suggested
  • table.calendar td.selected: the currently selected day
  • table.calendar td.bolder: the days which are Sundays
  • table.calendar td.range: the days in the selected range
  • table.calendar td.range-left, table.calendar td.range-right: the left and right boundaries of the selected range

  • 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

Custom days/periods colors

By passing the customClasses prop, you can have a fine control on which CSS classes are assigned to each day.

  • customClasses can be a function accepting a moment object as a parameter, giving back the css class to be applied to the given day.
const customClasses = day => ( day.isBefore( moment([day.year(),2,21]) ) || day.isAfter( moment([day.year(),11,21]) ) ) ? 'cheap low-season': 'expensive high-season'
  • If customClasses is an object, the Calendar will use the keys as css classes and the values as rules to apply them.
    • if the value is an array of strings in the form YYYY-MM-DD, those days will be given the css class. Useful for single days, like holidays!
    • if the value is an object with a start and an end value (still in the YYYY-MM-DD form), the days in that period will be given the css class. Nice for seasons!
    • if the value is a string of comma-separated, three-letter weekdays names in the form "ddd,ddd", the class will be given to the days of the week appearing on the string. Great for closing days during the week!
    • if the value is a function returning a boolean value, the class will be assigned using the function itself as a test. A must have for the finest tuning!

Confused? see the example below!

const customClasses = {
  holidays: [
    "2016-04-25",
    "2016-05-01",
    "2016-06-02",
    "2016-08-15",
    "2016-11-01"
  ],
  spring: {
    start: "2016-03-21",
    end: "2016-6-20"
  },
  summer: {
    start: "2016-06-21",
    end: "2016-09-22"
  },
  autumn: {
    start: "2016-09-23",
    end: "2016-12-21"
  },
  weekend: "Sat,Sun",
  winter: day => day.isBefore( moment([2016,2,21]) ) || day.isAfter( moment([2016,11,21]))
}

Build it yourself

Clone and run

$ npm install

License

react-yearly-calendar is Copyright (c) 2016 Belka, srl. It is free software, and may be redistributed under the terms specified in the LICENSE file.

About Belka

Alt text

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.

www.belka.us

Downloads/wk

2

GitHub Stars

547

LAST COMMIT

2yrs ago

MAINTAINERS

1

CONTRIBUTORS

11

OPEN ISSUES

10

OPEN PRs

0
VersionTagPublished
1.1.3
latest
7yrs ago
No alternatives found
No tutorials found
Add a tutorial
No dependencies found

Rate & Review

100
No reviews found
Be the first to rate