Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jbelien/openstreetmap-calendar-widget
Widget to embed OpenStreetMap Calendar (https://osmcal.org/) events in your application/website.
https://github.com/jbelien/openstreetmap-calendar-widget
javascript openstreetmap openstreetmap-calendar osm osmcal widget
Last synced: about 1 month ago
JSON representation
Widget to embed OpenStreetMap Calendar (https://osmcal.org/) events in your application/website.
- Host: GitHub
- URL: https://github.com/jbelien/openstreetmap-calendar-widget
- Owner: jbelien
- License: apache-2.0
- Created: 2020-05-16T20:47:20.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-07-10T14:25:36.000Z (6 months ago)
- Last Synced: 2024-08-09T12:51:30.132Z (5 months ago)
- Topics: javascript, openstreetmap, openstreetmap-calendar, osm, osmcal, widget
- Language: TypeScript
- Homepage: https://jbelien.github.io/openstreetmap-calendar-widget/
- Size: 2.68 MB
- Stars: 6
- Watchers: 0
- Forks: 3
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# OpenStreetMap Calendar Widget
[](https://www.npmjs.com/package/@jbelien/openstreetmap-calendar-widget)
[](https://github.com/jbelien/openstreetmap-calendar-widget/blob/master/LICENSE)
Widget to embed [OpenStreetMap Calendar](https://osmcal.org/) events in your application/website.
Demo:
---
## Usage
```html
```
OR
```shell
npm install @jbelien/openstreetmap-calendar-widget
```
## Events list
```js
const widget = new OSMCal.WidgetList(document.getElementById("osmcal"));
widget.display();
```
### Filter
#### Country (`in`)
**Using `data-in` attribute:**
```html
```
```js
const widget = new OSMCal.WidgetList(document.getElementById("osmcal"));
widget.display();
```
**Using JavaScript:**
```js
const widget = new OSMCal.WidgetList(document.getElementById("osmcal"), {
filter: { in: "Belgium" },
});
widget.display();
```
### Options
#### Locale(s)
**Using `data-locales` attribute:**
```html
```
```js
const widget = new OSMCal.WidgetList(document.getElementById("osmcal"));
widget.display();
```
**Using JavaScript:**
```js
const widget = new OSMCal.WidgetList(document.getElementById("osmcal"), {
locales: "fr",
});
widget.display();
```
#### Limit
**Using `data-limit` attribute:**
```html
```
```js
const widget = new OSMCal.WidgetList(document.getElementById("osmcal"));
widget.display();
```
**Using JavaScript:**
```js
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.
```js
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
```js
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:**
```html
```
```js
const widget = new OSMCal.WidgetList(document.getElementById("osmcal"));
widget.display();
```
**Using JavaScript:**
```js
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
```js
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) |