
Security News
vlt Launches "reproduce": A New Tool Challenging the Limits of Package Provenance
vlt's new "reproduce" tool verifies npm packages against their source code, outperforming traditional provenance adoption in the JavaScript ecosystem.
fullcalendar
Advanced tools
FullCalendar is a JavaScript calendar library that provides a full-sized, drag-and-drop calendar. It is highly customizable and can be used to display events, handle user interactions, and integrate with various data sources.
Display a Basic Calendar
This code initializes a basic calendar using FullCalendar with the dayGrid plugin to display a month view.
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();
Add Events to the Calendar
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();
Handle Event Clicks
This code shows how to handle event clicks. When an event is clicked, an alert is shown with the event's title, and the event's border color is changed.
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' }
],
eventClick: function(info) {
alert('Event: ' + info.event.title);
// change the border color just for fun
info.el.style.borderColor = 'red';
}
});
calendar.render();
Drag and Drop Events
This code enables drag-and-drop functionality for events. The 'editable' property is set to true, allowing users to drag and drop events to different dates.
import { Calendar } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';
import interactionPlugin from '@fullcalendar/interaction';
const calendarEl = document.getElementById('calendar');
const calendar = new Calendar(calendarEl, {
plugins: [dayGridPlugin, interactionPlugin],
initialView: 'dayGridMonth',
editable: true,
events: [
{ title: 'Event 1', start: '2023-10-01' },
{ title: 'Event 2', start: '2023-10-05', end: '2023-10-07' }
]
});
calendar.render();
React Big Calendar is a full-featured calendar component for React. It is similar to FullCalendar but is specifically designed for React applications. It offers a variety of views (month, week, day) and supports drag-and-drop functionality.
TOAST UI Calendar is a JavaScript calendar library that provides a variety of views and supports drag-and-drop functionality. It is highly customizable and can be used in both vanilla JavaScript and frameworks like React and Vue.
Calendarize is a lightweight JavaScript library for creating simple calendars. It is less feature-rich compared to FullCalendar but is suitable for basic calendar needs and has a smaller footprint.
FullCalendar is a full-sized drag & drop event calendar. This packages is an easily consumable combination of standard plugins. It makes the root namespace available as the FullCalendar
browser global. View the docs »
This fullcalendar
package bundles together these plugins:
FAQs
Easily render a full-sized drag & drop calendar with a combination of standard plugins
The npm package fullcalendar receives a total of 139,607 weekly downloads. As such, fullcalendar popularity was classified as popular.
We found that fullcalendar demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
vlt's new "reproduce" tool verifies npm packages against their source code, outperforming traditional provenance adoption in the JavaScript ecosystem.
Research
Security News
Socket researchers uncovered a malicious PyPI package exploiting Deezer’s API to enable coordinated music piracy through API abuse and C2 server control.
Research
The Socket Research Team discovered a malicious npm package, '@ton-wallet/create', stealing cryptocurrency wallet keys from developers and users in the TON ecosystem.