Theme builder — mhcalendar | mhcalendar

Skip to main content

mhcalendarDocs

GitHub

mhcalendar

Calendar theme

Custom configBelow you can check how each option affects the calendar.

Layout & navigation

View typeAvailable views

None selected means every view is available in the switcher.Show date switcherShow view type switcherShow calendar navigationShow view header

Locale & labels

Day.js localeControls day/month names (e.g. weekday headers, date range label)."Today" label"+N more" labelUse {count} as a placeholder for the hidden event count.View switcher namesMonthWeekDayAgendaResource

Time grid

Time fromTime toSlot intervalHour formatShow current time indicator

Events

Allow draggingAllow resizeCreate event on clickMin duration (min)Overlap display

All-day row

Show all-day rowRow height (px)Make all-day row sticky

Hidden days

Tap a day to hide it from week/day view.

Properties

Overrides the CSS properties exposed by the selected theme. Clear a field to fall back to the theme default.Event backgroundToday highlightCurrent time indicatorGrid bordersResize handleResize tooltip backgroundResize tooltip textDuration diff labelMain backgroundNavigation backgroundFont colorDate font colorButtons colorHoliday date colorNon-business hours overlayFont familyEvent hover filterTime column widthView header heightMonth event heightNavigation bar height

Business hours

Enable business hours (Mon–Fri)Block dropping outside business hours

Timezones

MainReference 2Reference 3Custom label

Advanced

Start dateFixed heightVirtual scroll height

Docs

Getting Started

More

GitHub