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

Adam Shaw 171ef243d7 forgot pnpm gh action version bump on standard repo hai 1 mes
.github 171ef243d7 forgot pnpm gh action version bump on standard repo hai 1 mes
.vscode fa1b3dc222 manually copy certain meta files %!s(int64=3) %!d(string=hai) anos
bundle b0c1d6c612 RELEASING: Releasing 33 package(s) hai 1 mes
packages b0c1d6c612 RELEASING: Releasing 33 package(s) hai 1 mes
scripts b8a4d521a7 remove standard sub-workspace from pnpm workspaces hai 1 ano
tests b0c1d6c612 RELEASING: Releasing 33 package(s) hai 1 mes
.editorconfig e0f3f59f10 update meta %!s(int64=3) %!d(string=hai) anos
.gitignore 60c2ff8006 update gitignore %!s(int64=3) %!d(string=hai) anos
.npmrc 788ae1c9d3 meta:update hai 7 meses
CHANGELOG.md 4933a19b4b changelog hai 1 mes
CONTRIBUTING.md 8c93f35738 updated readmes %!s(int64=3) %!d(string=hai) anos
LICENSE.md 9033e07a3d copying of readme/license %!s(int64=3) %!d(string=hai) anos
README.md 476cc659b1 more markdown cleanup hai 1 ano
package.json 00e7a69313 fully bump hai 1 mes
pnpm-lock.yaml 8515a0df1f meta:update hai 1 mes
pnpm-workspace.yaml ed3c13615b make workspace-scripts relocation work %!s(int64=3) %!d(string=hai) anos
turbo.json a397c3b51d update turbo %!s(int64=3) %!d(string=hai) anos

README.md

FullCalendar

Full-sized drag & drop calendar in JavaScript

Connectors:

Bundle

The FullCalendar Standard Bundle is easier to install than individual plugins, though filesize will be larger. It works well with a CDN.

Installation

Install the FullCalendar core package and any plugins you plan to use:

npm install @fullcalendar/core @fullcalendar/interaction @fullcalendar/daygrid

Usage

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()

Development

You must install this repo with PNPM:

pnpm install

Available scripts (via pnpm run <script>):

  • build - build production-ready dist files
  • dev - build & watch development dist files
  • test - test headlessly
  • test:dev - test interactively
  • lint
  • clean

Info about contributing code »