Top
Calendar - Working with dates
Calendar
As already mentioned, dateFormat determines how date (when specified as string) is parsed.
Another very useful prop is isDisabledDay(dayProps) function prop, which determines if a certain date/day can be selected or not(ie, is rendered as enabled or disabled).
Besides using isDisabledDay to specify disabled dates, you can also use minDate and/or maxDate - which also prevents navigation outside the specified range.
To see an example of how the date format in the <NavBar /> can be configured, see the example below.
The user can navigate to the next/prev month using the simple arrows in the <Calendar /> header. The double arrows can be used to go to next/prev year. Additionally, clicking the <Calendar /> header/navbar, where the current month and year is displayed, the user can navigate to another distant date using the overlay showing up (the <MonthDecadeView /> component - can be disabled using enableMonthDecadeView).
The top <NavBar /> can be hidden altogether by using navigation=false. Similarly, the footer can be displayed by specifying footer=true.
It is possible to filly customize the days being rendered in the <Calendar /> by using the renderDay(dayProps) render prop. You can either modify the dayProps object passed to this function (which will ultimately be passed to the <div /> being rendered), and don't return anything in order to let the default rendering happen, or you can return something completely different.
In the dayProps object passed to the renderDay(props) prop, you have access to the dateMoment property, holding the momentjs instance corresponding to the current day being rendered.