A full interactive Calendar UI built for Vanilla JS or use in other frontend frameworks.
#javascript #js #vanillajs #ui #frontend #webdev #website #html #css #jquery
|
|
hai 1 mes | |
|---|---|---|
| .github | hai 1 mes | |
| .vscode | %!s(int64=3) %!d(string=hai) anos | |
| bundle | hai 1 mes | |
| packages | hai 1 mes | |
| scripts | hai 1 ano | |
| tests | hai 1 mes | |
| .editorconfig | %!s(int64=3) %!d(string=hai) anos | |
| .gitignore | %!s(int64=3) %!d(string=hai) anos | |
| .npmrc | hai 7 meses | |
| CHANGELOG.md | hai 1 mes | |
| CONTRIBUTING.md | %!s(int64=3) %!d(string=hai) anos | |
| LICENSE.md | %!s(int64=3) %!d(string=hai) anos | |
| README.md | hai 1 ano | |
| package.json | hai 1 mes | |
| pnpm-lock.yaml | hai 1 mes | |
| pnpm-workspace.yaml | %!s(int64=3) %!d(string=hai) anos | |
| turbo.json | %!s(int64=3) %!d(string=hai) anos |
Full-sized drag & drop calendar in JavaScript
Connectors:
The FullCalendar Standard Bundle is easier to install than individual plugins, though filesize will be larger. It works well with a CDN.
Install the FullCalendar core package and any plugins you plan to use:
npm install @fullcalendar/core @fullcalendar/interaction @fullcalendar/daygrid
Instantiate a Calendar with plugins and options:
import { Calendar } from '@fullcalendar/core'
import interactionPlugin from '@fullcalendar/interaction'
import dayGridPlugin from '@fullcalendar/daygrid'
const calendarEl = document.getElementById('calendar')
const calendar = new Calendar(calendarEl, {
plugins: [
interactionPlugin,
dayGridPlugin
],
initialView: 'timeGridWeek',
editable: true,
events: [
{ title: 'Meeting', start: new Date() }
]
})
calendar.render()
You must install this repo with PNPM:
pnpm install
Available scripts (via pnpm run <script>):
build - build production-ready dist filesdev - build & watch development dist filestest - test headlesslytest:dev - test interactivelylintclean