Calendar
The Calendar module displays events from your Haven feed. It supports multiple view formats, date filtering, ongoing event sidebars, and the same map/lightbox features as Directory.
Basic setup
HTML structure
For a daily calendar with an ongoing events sidebar:
html
<div id="main">
<div id="haven-app"></div>
<div id="haven-app--ongoing">
<h2>Ongoing Events</h2>
<div id="haven-list--ongoing"></div>
</div>
</div>Initialization
javascript
haven.config({
templatePath: 'https://YOUR_TEMPLATE_HOST/haven-templates/',
userTemplates: [
'haven-calendar-list-item.html',
'haven-calendar-detail.html',
'haven-calendar-ongoing-item.html',
],
useMapBox: true,
useFontAwesome: true,
})
.calendar.init({
routing: {
path: '/calendar/',
type: 'hash',
titleSep: ' | ',
doPathChange: true,
},
format: 'daily',
selector: '#haven-app',
options: {
id: 'haven-calendar',
sort: 'date',
css: 'haven__calendar',
cols: 1,
maxWidth: 1280,
includeMap: true,
includeLightbox: true,
ongoing: {
length: 14,
selector: '#haven-list--ongoing',
container: '#haven-app--ongoing',
hideOnDetail: true,
exclude: false,
applyFilter: true,
},
filter: {
selector: '#haven-filter-calendar',
fields: {
date: {
type: 'datepicker',
id: 'haven-date-filter',
name: 'date',
},
},
},
},
})
.render();Formats
| Format | Description |
|---|---|
list | Standard event list (default) |
daily | Events grouped by day; forces single column |
upcoming | Limited upcoming events widget |
ongoing | Ongoing/multi-day events only |
detail | Single event detail view |
itinerary | Curated event list |
contactcard | Contact card layout |
featured | Featured events layout |
Set format in .calendar.init():
javascript
.calendar.init({
format: 'upcoming',
// ...
})Upcoming widget
For a minimal embed (no map, no icons):
javascript
haven.config({
useMapBox: false,
useFontAwesome: false,
})
.calendar.init({
selector: '#haven-upcoming',
format: 'upcoming',
options: {
id: 'haven-upcoming',
sort: 'date',
css: 'haven__calendar haven__calendar--widget',
titleTag: 'h4',
cols: 1,
maxWidth: 640,
upcoming: { limit: 5 },
},
})
.render();Daily view
The daily format automatically sets cols: 1 and removes responsive column overrides. Events are grouped by date.
Ongoing events sidebar
Long-running events (spanning more than ongoing.length days) can be split into a separate sidebar:
javascript
options: {
ongoing: {
length: 14, // day threshold (default: 14)
selector: '#haven-list--ongoing', // list container inside sidebar
container: '#haven-app--ongoing', // sidebar wrapper (shown/hidden by Haven)
hideOnDetail: true, // hide sidebar on detail view
exclude: false, // exclude ongoing from main list
applyFilter: true, // apply active filters to ongoing list
},
}Date filter
Add a date picker to filter events by date:
javascript
filter: {
selector: '#haven-filter-calendar',
fields: {
date: {
type: 'datepicker',
id: 'haven-date-filter',
name: 'date',
css: 'haven-filter--date',
},
},
}Images
Same imgix configuration as Directory:
javascript
options: {
images: {
thumbnail: { ar: '3:2', w: 600, h: 400, fit: 'crop' },
featured: { ar: '3:2', w: 1280, h: 400, fit: 'max' },
},
}Routing
Calendar uses the same routing options as Directory:
javascript
routing: {
path: '/calendar/',
type: 'hash',
doPathChange: true,
}