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
25 April26272829301 May23456789101112131415161718192021222324252627282930311 June2345
"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;