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
30 May311 June234567891011121314151617181920212223242526272829301 July23
"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;