45 lines
930 B
Markdown
45 lines
930 B
Markdown
|
|
||
|
|
# FullCalendar Core
|
||
|
|
|
||
|
|
FullCalendar core package for rendering a calendar
|
||
|
|
|
||
|
|
## Installation
|
||
|
|
|
||
|
|
This package is never used alone. Use it with least one plugin (like [daygrid](https://fullcalendar.io/docs/month-view)):
|
||
|
|
|
||
|
|
```sh
|
||
|
|
npm install @fullcalendar/core @fullcalendar/daygrid
|
||
|
|
```
|
||
|
|
|
||
|
|
## Usage
|
||
|
|
|
||
|
|
First, ensure there's a DOM element for your calendar to render into:
|
||
|
|
|
||
|
|
```html
|
||
|
|
<body>
|
||
|
|
<div id='calendar'></div>
|
||
|
|
</body>
|
||
|
|
```
|
||
|
|
|
||
|
|
Then, instantiate a Calendar object with [options](https://fullcalendar.io/docs#toc) and call its `render` method:
|
||
|
|
|
||
|
|
```js
|
||
|
|
import { Calendar } from '@fullcalendar/core'
|
||
|
|
import dayGridPlugin from '@fullcalendar/daygrid'
|
||
|
|
|
||
|
|
const calendarEl = document.getElementById('calendar')
|
||
|
|
const calendar = new Calendar(calendarEl, {
|
||
|
|
plugins: [
|
||
|
|
dayGridPlugin
|
||
|
|
// any other plugins
|
||
|
|
],
|
||
|
|
initialView: 'dayGridMonth',
|
||
|
|
weekends: false,
|
||
|
|
events: [
|
||
|
|
{ title: 'Meeting', start: new Date() }
|
||
|
|
]
|
||
|
|
})
|
||
|
|
|
||
|
|
calendar.render()
|
||
|
|
```
|