Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →

@fullcalendar/core

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@fullcalendar/core

FullCalendar core package for rendering a calendar

6.1.9
Source
npm

Version published: last year

Weekly downloads: 256K; decreased by-61%

Maintainers: 1

Weekly downloads

Created: 6 years ago

What is @fullcalendar/core?

@fullcalendar/core is a powerful and flexible JavaScript library for creating interactive and customizable calendars on web applications. It provides a wide range of features including event management, date navigation, and view customization.

What are @fullcalendar/core's main functionalities?

Basic Calendar Setup

This code sets up a basic calendar using the dayGrid plugin, which displays a month view of the calendar.

import { Calendar } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';

const calendarEl = document.getElementById('calendar');
const calendar = new Calendar(calendarEl, {
  plugins: [dayGridPlugin],
  initialView: 'dayGridMonth'
});
calendar.render();

Event Management

This code demonstrates how to add events to the calendar. Events can have a title, start date, and optionally an end date.

import { Calendar } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';

const calendarEl = document.getElementById('calendar');
const calendar = new Calendar(calendarEl, {
  plugins: [dayGridPlugin],
  initialView: 'dayGridMonth',
  events: [
    { title: 'Event 1', start: '2023-10-01' },
    { title: 'Event 2', start: '2023-10-05', end: '2023-10-07' }
  ]
});
calendar.render();

Custom Views

This code shows how to set up a calendar with a custom view, in this case, a weekly time grid view.

import { Calendar } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';

const calendarEl = document.getElementById('calendar');
const calendar = new Calendar(calendarEl, {
  plugins: [dayGridPlugin, timeGridPlugin],
  initialView: 'timeGridWeek'
});
calendar.render();

Date Navigation

This code configures the calendar with navigation buttons to move between months, weeks, and days, as well as a 'today' button.

import { Calendar } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';

const calendarEl = document.getElementById('calendar');
const calendar = new Calendar(calendarEl, {
  plugins: [dayGridPlugin],
  initialView: 'dayGridMonth',
  headerToolbar: {
    left: 'prev,next today',
    center: 'title',
    right: 'dayGridMonth,timeGridWeek,timeGridDay'
  }
});
calendar.render();

Other packages similar to @fullcalendar/core