Calendar Options
Complete reference for the options object passed to .calendar.init().
Top-level init keys
| Key | Type | Default | Description |
|---|---|---|---|
selector | string | #haven-app | DOM element to render into |
format | string | list | Calendar format (see below) |
data | array | null | Pre-fetched event data |
routing | object | see Routing | URL routing configuration |
options | object | {} | Feature options (below) |
Formats
| Format | Description |
|---|---|
list | Standard event list |
daily | Day-grouped view (forces cols: 1) |
upcoming | Limited upcoming events |
ongoing | Ongoing events only |
detail | Single event detail |
itinerary | Curated event list |
contactcard | Contact card layout |
featured | Featured events |
Layout
| Option | Type | Default | Description |
|---|---|---|---|
id | string | haven-list | ID of the generated list wrapper |
sort | string | name | Sort field (date recommended for calendars) |
cols | number | 1 | Grid columns |
maxWidth | number/string | 1280 | Max container width (px) |
responsive | object | null | Breakpoint → { cols } map |
css | string | '' | Additional CSS class |
titleTag | string | h3 | Heading tag for item titles |
omitDetails | array | [] | Detail fields to hide |
Upcoming
Used when format: 'upcoming'.
| Option | Type | Default | Description |
|---|---|---|---|
upcoming.limit | number | 5 | Maximum events to display |
Ongoing
Used with format: 'daily' or other formats that split long-running events.
| Option | Type | Default | Description |
|---|---|---|---|
ongoing.length | number | 14 | Day threshold for "ongoing" classification |
ongoing.selector | string | null | Container for ongoing event list |
ongoing.container | string | null | Sidebar wrapper (shown/hidden automatically) |
ongoing.hideOnDetail | boolean | false | Hide sidebar when viewing event detail |
ongoing.exclude | boolean | false | Exclude ongoing events from main list |
ongoing.applyFilter | boolean | true | Apply active filters to ongoing list |
Images
Same structure as Directory Options:
javascript
images: {
thumbnail: { ar: '3:2', w: 600, h: 400, fit: 'crop' },
logo: { ar: '3:2', w: 600, h: 400, fit: 'max' },
featured: { ar: '3:2', w: 1280, h: 400, fit: 'max' },
banner: { ar: '21:6', w: 1280, fit: 'crop' },
gallery: { ar: '16:9', w: 1280, fit: 'crop' },
}Map
Same options as Directory. Enable with includeMap: true. See Maps and Lightbox.
Lightbox
Same options as Directory. Enable with includeLightbox: true.
| Option | Type | Default | Description |
|---|---|---|---|
lightbox.expandDirection | string | bottom | top, bottom, left, right |
Filter
| Option | Type | Description |
|---|---|---|
filter.selector | string | External filter container |
filter.fields.date | object | Date picker field (type: 'datepicker') |
filter.fields.keyword | object | Keyword search field |
filter.fields.types | object | Type dropdown field |
See Filters and Search for field configuration.
Favorites
| Option | Type | Description |
|---|---|---|
faves | object | Favorites configuration |