Home Explore Help
Sign In
javascript
/
fullcalendar
mirror of https://github.com/fullcalendar/fullcalendar.git
2
0
Fork 0
Files Issues 0 Wiki
Branch: main
Branches Tags
fullcalendar
/
packages
/
web-component
arshaw b0c1d6c612 RELEASING: Releasing 33 package(s) 1 month ago
..
src d87c62e073 smarter about styles root 2 years ago
.eslintrc.cjs 613ab5765f Adjust pkg names to @fullcalenadar-tests/*, @fullcalenadar-scripts/*, and @fullcalenadar-monorepos/* 1 year ago
README.md 21f81a56bf spruce up web-component README 3 years ago
package.json b0c1d6c612 RELEASING: Releasing 33 package(s) 1 month ago

README.md

FullCalendar Web Component

This package provides a FullCalendar Web Component (aka "Custom Element").

Installing via NPM

Install the core package, the web-component package, and any plugins you plan to use:

npm install --save \
  @fullcalendar/core \
  @fullcalendar/web-component \
  @fullcalendar/daygrid

Then, either register the element globally under its default tag name of <full-calendar />:

import '@fullcalendar/web-component/global'

Or, customize the tag name:

import { FullCalendarElement } from '@fullcalendar/web-component'

customElements.define('some-calendar-tag', FullCalendarElement);

Installing via CDN

Include script tags for the core package, the web-component package, and any plugins you plan to use:

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<script src='https://cdn.jsdelivr.net/npm/@fullcalendar/core/index.global.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/@fullcalendar/web-component/index.global.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/@fullcalendar/daygrid/index.global.min.js'></script>
</head>
<body>

  <full-calendar shadow options='{
    "headerToolbar": {
      "left": "prev,next today",
      "center": "title",
      "right": "dayGridMonth,dayGridWeek,dayGridDay"
    }
  }' />

</body>
</html>

Options

The full-calendar element accepts a single options attribute. It must be a valid JSON string.

The shadow attribute is necessary for rendering the calendar within its own shadow DOM (added in v6.1.0). This is recommended.

It is possible to set an options property on the DOM element. This property is a real JavaScript object, not merely a JSON string.

const fullCalendarElement = document.querySelector('full-calendar')

fullCalendarElement.options = {
  headerToolbar: {
    left: 'prev,next today',
    center: 'title',
    right: 'dayGridMonth,dayGridWeek,dayGridDay'
  }
}