Skip to main content

Props

proptypedefaultoptionsrequireddesc
initialDatestringfalsestarting date for calendar
initialViewCalendarView - day, three days, week, monthCALENDAR_VIEW.WEEKtruestarts in calendar view
selectedViewCalendarViewfalseselected view for control outside of the component
disabledViewsCalendarView[]falsedisable views you don't need
hourHeightnumber40falseheight for one hour column in px
eventssee example below[]trueevents for calendar
onNewEventClickcallback funcfalsecallback for clicking on calendar table to create new event
onEventClickcallback funcfalsecallback for clicking on event
onSelectViewcallback funcfalsecallback for view change event
onPageChangecallback funcfalsecallback for navigating through calendar pages
showMoreMonthcallback funcfalsecallback for accessing events which didn't fit in month view
disableMobileDropdownbooleanfalsefalsedisable button for triggering mobile dropdown with views
timezonestringsystem timezonefalseIANA timezone format, if not provided, system timezone will be used
weekDayStartstringMondayMonday or Sundayfalsestarting date for week
timeFormatstring2424 or 12falsetime format - 24 hours or 12 hours AM/PM
calendarIDsHiddenstring[]falseids in array will be used to filter all events with matchin calendarID property
languagestringenen, de, es, fr, it, ptBR, ru, zhfalsetranslate texts to different languages
customLanguagejsonfalseimport your own translation
isNewEventOpenbooleanfalseshow/hide new event dragging element
draggingDisabledConditionsobjectfalsedefine rules for disabling event dragging with key value object
resizeDisabledConditionsobjectfalsedefine rules for disabling event resizing with key value object
showTimeLinebooleanfalsefalseshow timeline representing current time
focusHournumberfalseinitial focus to hour
showWeekNumbersbooleanfalseshow week numbers in month and day views
autoScrollbooleanfalsescroll to current time on load
isDarkbooleanfalseset dark theme
disabledDraggingbooleanfalsedisable dragging and resizing globally
colorssee morefalseset custom colors for dark/light theme
testModebooleanfalsedisable validations for testing
newEventTextstringfalsecustom new event text replaces default "New event"