Top
Calendar - Getting started
Calendar
Zippytech React Toolkit is distributed via npm. So getting it installed is as easy as:
$ npm install @zippytech/react-toolkit --save
Or, if you are using yarn you have to run:
$ yarn add @zippytech/react-toolkit
To start using the <Calendar /> component, all you need to import is React and the code + styles of the component itself: @zippytech/react-toolkit/Calendar and @zippytech/react-toolkit/Calendar/index.css.
For integration with an input field, see DateInput component.
The <Calendar /> component depends on momentjs as a peer dependency. You should have momentjs included in your project for the component to work.
For supported formats, see momentjs formats.
Probably the first thing you want to configure is the dateFormat prop (which defaults to YYYY-MM-DD).
You can use defaultDate (or the controlled version, date) to specify a date that should be initially selected.
When a defaultDate or a date is specified, the <Calendar /> view is showing the month of the specified date. Or you can use defaultViewDate (or the controlled viewDate) to strictly control the month that is currently displayed in the <Calendar /> view. In this case, you can pair those props with onViewDateChange to be notified when the view is changing the month.
For being notified when the user selects a new date in the <Calendar />, use onChange(dateString, { dateMoment, timestamp }). On this callback prop, you can access the date both as a string or as a moment instance.
<Calendar /> uses Momentjs locales - so if you have the locales available in your code, you can specify the locale prop, as shown in the following example.