Top
Calendar - Styling & Theming
Calendar
To style and customize the appearance of <Calendar />, you can use one of the following strategies:
  • Specify a style prop with the desired values.
  • Specify a Calendar className - note that this will not override the default css className of zippy-react-toolkit-tool-bar, but rather will be appended to the classNames that the component already has.
ClassNameDescription
zippy-react-toolkit-calendar
This is the block className for all calendars. Always applied.
zippy-react-toolkit-calendar__month-view
Applied on MonthView subcomponent.
zippy-react-toolkit-calendar__month-view-week-day-names
Applied on week day names.
zippy-react-toolkit-calendar__month-view-week-number
Applied on week day numbers.
zippy-react-toolkit-calendar__month-view-cell
Applied on cells of week numbers.
zippy-react-toolkit-calendar__month-view-day
Applied on month days.
zippy-react-toolkit-calendar__month-view-day-text
Applied on text of month days.
zippy-react-toolkit-calendar__month-view-day--today
Applied on today.
zippy-react-toolkit-calendar__month-view-day--weekend
Applied on weekend days.
zippy-react-toolkit-calendar__month-view-day--prev-month
Applied on preview month days
zippy-react-toolkit-calendar__month-view-day--next-month
Applied on next month days.
ClassNameDescription
zippy-react-toolkit-calendar__nav-bar
This is the main class of navBar component.
zippy-react-toolkit-calendar__nav-bar-arrow
Applied on navBar arrows.
zippy-react-toolkit-calendar__nav-bar-date
Applied on navBar date.
zippy-react-toolkit-calendar__nav-bar-month-decade-view
Applied on navBar month-decade view component.
ClassNameDescription
zippy-react-toolkit-calendar__clock
This is the main class of Clock component.
zippy-react-toolkit-calendar__clock-hand-hour
Applied on the hour hand od the clock.
zippy-react-toolkit-calendar__clock-hand-minute
Applied on the minute hand of the clock.
zippy-react-toolkit-calendar__clock-hand-second
Applied on the seconds hand of the clock.
zippy-react-toolkit-calendar__clock-tick--big
Applied on the dash that indicates hours.
zippy-react-toolkit-calendar__clock-tick--small
Applied on the dash that indicates minutes.
zippy-react-toolkit-calendar__clock-input
Applied on clock input
zippy-react-toolkit-calendar__clock-input-spinner
Applied on spinner arrows wrapper
zippy-react-toolkit-calendar__clock-input-arrow
Applied on spinner arrows