ClassNames Prop
Styling Customization with classNames
You can override the default CSS classes of the calendar using the classNames prop.
You can view the default styles here.
| Key | Description |
|---|---|
root | The main calendar container |
header | The calendar header |
nav | The navigation container (month/year and buttons) |
month | The month text |
year | The year text |
weekdays | The weekdays container |
weekday | Each weekday label |
days | The days container |
day | Each individual day |
currentDay | Highlight for the current day |
lastMonth | Days from the previous month |
nextMonth | Days from the next month |
Note: When overriding styles in Tailwind CSS, use the
!prefix. In regular CSS, use!importantto ensure your styles take precedence.
For example, removing the background and borders of the weekday container, and making the weekday text size responsive.
SatSunMonTueWedThuFri
29 November301 December23456789101112131415161718192021222324252627282930311 January2
"use client";
import { Calendar as EventlyCalendar } from "react-evently-calendar";
const Calendar = () => {
return (
<EventlyCalendar
classNames={{
weekdays: "!text-[0.6rem] md:!text-xs !border-0 !bg-transparent",
weekday: "!border-0",
}}
/>
); };
export default Calendar;