@jbelien/openstreetmap-calendar-widget NPM

OpenStreetMap Calendar Widget

Widget to embed OpenStreetMap Calendar events in your application/website.

Usage

<script
  src="https://unpkg.com/@jbelien/openstreetmap-calendar-widget@0.4.1/dist/osmcal.js"
  integrity="sha512-5BkMcVKZ6nX+ddTRrnbd3cwVwp5bNvc/7aikO4iEmqydJcoyf8sUA+qx7Y9vb/nnoNXGOvPTcfUzriOA559W/Q=="
  crossorigin=""
></script>

Events list

const widget = new OSMCal.WidgetList(document.getElementById("osmcal"));
widget.display();

Filter

Country (`in`)

Using data-in attribute:

<div id="osmcal" data-in="Belgium"></div>

const widget = new OSMCal.WidgetList(document.getElementById("osmcal"));
widget.display();

Using JavaScript:

const widget = new OSMCal.WidgetList(document.getElementById("osmcal"), {
  filter: { in: "Belgium" },
});
widget.display();

Options

Locale(s)

Using data-locales attribute:

<div id="osmcal" data-locales="fr"></div>

const widget = new OSMCal.WidgetList(document.getElementById("osmcal"));
widget.display();

Using JavaScript:

const widget = new OSMCal.WidgetList(document.getElementById("osmcal"), {
  locales: "fr",
});
widget.display();

Limit

Using data-limit attribute:

<div id="osmcal" data-in="5"></div>

const widget = new OSMCal.WidgetList(document.getElementById("osmcal"));
widget.display();

Using JavaScript:

const widget = new OSMCal.WidgetList(document.getElementById("osmcal"), {
  limit: 5,
});
widget.display();

Past events

By default, only future events are displayed. If you want to display past events, here is how to do it.

const widget = new OSMCal.WidgetList(document.getElementById("osmcal"), {
  past: true,
});
widget.display();

Classes

Following classes are available for customization:

Class	Element	Description
`.osmcal-list__list`	`ul`	List of events
`.osmcal-list__event`	`li`	Event list item (containing the template)
`.osmcal-list__event--cancelled`	`li`	Cancelled event list item
`.osmcal-list__event__name`	`div`	Event name (default template)
`.osmcal-list__event__details`	`div`	Event datetime and location (default template)

Events calendar

const widget = new OSMCal.WidgetCalendar(document.getElementById("osmcal"));
widget.display();

All parameters described for WidgetList are also available for WidgetCalendar (filter, limit, past, locales, ...).

Options

Position

Using data-position attribute:

<div id="osmcal" data-position="bottom"></div>

const widget = new OSMCal.WidgetList(document.getElementById("osmcal"));
widget.display();

Using JavaScript:

const widget = new OSMCal.WidgetList(document.getElementById("osmcal"), {
  position: "bottom",
});
widget.display();

Classes

Following classes are available for customization:

Class	Element	Description
`.osmcal-calendar__btn-previous`	`div`	Button to switch to previous month
`.osmcal-calendar__btn-next`	`div`	Button to switch to next month
`.osmcal-calendar__month`	`div`	Element containing month and year
`.osmcal-calendar__table`	`tbody`	Element containing dates
`.osmcal-calendar__date`	`td`	Table cell containing date
`.osmcal-calendar__date--today`	`td`	Table cell containing today's date
`.osmcal-calendar__date--has-event`	`td`	Table cell containing date with event(s)
`.osmcal-calendar__list`	`ul`	List of events
`.osmcal-calendar__event`	`li`	Event list item (containing the template)
`.osmcal-calendar__event--cancelled`	`li`	Cancelled event list item
`.osmcal-calendar__event__name`	`div`	Event name (default template)
`.osmcal-calendar__event__details`	`div`	Event datetime and location (default template)

Events map

const widget = new OSMCal.WidgetMap(document.getElementById("osmcal"));
widget.display();

All parameters described for WidgetList are also available for WidgetMap (filter, limit, past, locales, ...).

Classes

Following classes are available for customization:

Class	Element	Description
`.osmcal-map__event`	`div`	Event item (containing the template)
`.osmcal-map__event--cancelled`	`li`	Cancelled event list item
`.osmcal-map__event__name`	`div`	Event name (default template)
`.osmcal-map__event__details`	`div`	Event datetime and location (default template)