Upcoming Events Widget

A minimal calendar embed showing the next few upcoming events. No map, no icons — just a compact list.

HTML

html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Upcoming Events</title>

  <script src="https://kit.havendestinations.ca/YOUR_KIT_ID.js"></script>
  <link rel="stylesheet" href="/haven-theme--default.css" />
  <link rel="stylesheet" href="/haven-theme--calendar.css" />
</head>
<body>

  <div id="haven-upcoming-widget">
    <h2>Upcoming Events</h2>
    <div id="haven-upcoming"></div>
  </div>

  <style>
    #haven-upcoming-widget {
      max-width: 640px;
      margin: 0 auto;
      padding: 20px;
    }
  </style>

  <script>
    (function () {
      var poll = setInterval(function () {
        if (window.haven && haven.ready && haven.ready()) {
          clearInterval(poll);

          haven.config({
            templatePath: 'https://YOUR_TEMPLATE_HOST/haven-templates/',
            userTemplates: ['haven-calendar-upcoming-item.html'],
            useMapBox: false,
            useFontAwesome: false,
          })
          .calendar.init({
            selector: '#haven-upcoming',
            format: 'upcoming',
            routing: {
              path: '/calendar/',
              type: 'hash',
              titleSep: ' | ',
              doPathChange: true,
            },
            options: {
              id: 'haven-upcoming',
              sort: 'date',
              css: 'haven__calendar haven__calendar--widget',
              titleTag: 'h4',
              cols: 1,
              maxWidth: 640,
              upcoming: { limit: 5 },
              images: {
                thumbnail: { ar: '1:1', w: 100, h: 100, fit: 'crop' },
              },
            },
          })
          .render();
        }
      }, 10);
    })();
  </script>

</body>
</html>

Key settings

Setting	Value	Why
`format: 'upcoming'`	Upcoming events only	Widget-style list
`useMapBox: false`	No map	Lightweight embed
`useFontAwesome: false`	No icons	No FA dependency
`upcoming.limit: 5`	Show 5 events	Configurable count
`css: '...--widget'`	Widget class	Compact theme styles

Customization

Change upcoming.limit to show more or fewer events.
Override haven-calendar-upcoming-item.html for custom item markup.
Add includeLightbox: true if you want click-through detail views.

Upcoming Events Widget ​

HTML ​

Key settings ​

Customization ​

HTML

Key settings

Customization