|
2 | 2 | title: Web Component |
3 | 3 | --- |
4 | 4 |
|
5 | | -This is a test |
| 5 | +FullCalendar comes as a [Web Component](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) (aka "Custom Element"). |
| 6 | + |
| 7 | + |
| 8 | +## Installing via NPM |
| 9 | + |
| 10 | +Install the core package, the web-component package, and any plugins you plan to use: |
| 11 | + |
| 12 | +```sh |
| 13 | +npm install --save \ |
| 14 | + @fullcalendar/core \ |
| 15 | + @fullcalendar/web-component \ |
| 16 | + @fullcalendar/daygrid |
| 17 | +``` |
| 18 | + |
| 19 | +Then, either register the element globally under its default tag name of `<full-calendar />`: |
| 20 | + |
| 21 | +```js |
| 22 | +import '@fullcalendar/web-component/global' |
| 23 | +``` |
| 24 | + |
| 25 | +Or, customize the tag name: |
| 26 | + |
| 27 | +```js |
| 28 | +import { FullCalendarElement } from '@fullcalendar/web-component' |
| 29 | + |
| 30 | +customElements.define('some-calendar-tag', FullCalendarElement); |
| 31 | +``` |
| 32 | + |
| 33 | +## Installing via CDN |
| 34 | + |
| 35 | +Include script tags for the core package, the web-component package, and any plugins you plan to use: |
| 36 | + |
| 37 | +```html |
| 38 | +<!DOCTYPE html> |
| 39 | +<html> |
| 40 | +<head> |
| 41 | +<meta charset='utf-8' /> |
| 42 | +<script src='https://cdn.jsdelivr.net/npm/@fullcalendar/core@{{ site.data.latest-releases.v6 }}/index.global.min.js'></script> |
| 43 | +<script src='https://cdn.jsdelivr.net/npm/@fullcalendar/web-component@{{ site.data.latest-releases.v6 }}/index.global.min.js'></script> |
| 44 | +<script src='https://cdn.jsdelivr.net/npm/@fullcalendar/daygrid@{{ site.data.latest-releases.v6 }}/index.global.min.js'></script> |
| 45 | +</head> |
| 46 | +<body> |
| 47 | + |
| 48 | + <full-calendar shadow options='{ |
| 49 | + "headerToolbar": { |
| 50 | + "left": "prev,next today", |
| 51 | + "center": "title", |
| 52 | + "right": "dayGridMonth,dayGridWeek,dayGridDay" |
| 53 | + } |
| 54 | + }' /> |
| 55 | + |
| 56 | +</body> |
| 57 | +</html> |
| 58 | +``` |
| 59 | + |
| 60 | + |
| 61 | +## Options |
| 62 | + |
| 63 | +The full-calendar element accepts a single `options` attribute. It must be a valid JSON string. |
| 64 | + |
| 65 | +The `shadow` attribute is necessary for rendering the calendar within its own shadow DOM (added in v6.1.0). This is recommended. |
| 66 | + |
| 67 | +It is possible to set an `options` *property* on the DOM element. This property is a real JavaScript object, not merely a JSON string. |
| 68 | + |
| 69 | +```js |
| 70 | +const fullCalendarElement = document.querySelector('full-calendar') |
| 71 | + |
| 72 | +fullCalendarElement.options = { |
| 73 | + headerToolbar: { |
| 74 | + left: 'prev,next today', |
| 75 | + center: 'title', |
| 76 | + right: 'dayGridMonth,dayGridWeek,dayGridDay' |
| 77 | + } |
| 78 | +} |
| 79 | +``` |
0 commit comments