@fullcalendar/timeline

What is @fullcalendar/timeline?

@fullcalendar/timeline is a plugin for FullCalendar that provides a timeline view, which is useful for visualizing events over a long period of time. It is particularly useful for scheduling applications, project management, and resource management.

What are @fullcalendar/timeline's main functionalities?

Basic Timeline View

This code initializes a FullCalendar instance with the timeline plugin and sets the initial view to a daily timeline. It also includes two sample events.

const calendarEl = document.getElementById('calendar');
const calendar = new FullCalendar.Calendar(calendarEl, {
  plugins: [ 'timeline' ],
  initialView: 'timelineDay',
  events: [
    { title: 'Event 1', start: '2023-10-01T10:00:00', end: '2023-10-01T12:00:00' },
    { title: 'Event 2', start: '2023-10-01T13:00:00', end: '2023-10-01T15:00:00' }
  ]
});
calendar.render();

Resource Timeline View

This code initializes a FullCalendar instance with the resource timeline plugin and sets the initial view to a daily resource timeline. It includes two resources and two events assigned to these resources.

const calendarEl = document.getElementById('calendar');
const calendar = new FullCalendar.Calendar(calendarEl, {
  plugins: [ 'resourceTimeline' ],
  initialView: 'resourceTimelineDay',
  resources: [
    { id: 'a', title: 'Resource A' },
    { id: 'b', title: 'Resource B' }
  ],
  events: [
    { title: 'Event 1', start: '2023-10-01T10:00:00', end: '2023-10-01T12:00:00', resourceId: 'a' },
    { title: 'Event 2', start: '2023-10-01T13:00:00', end: '2023-10-01T15:00:00', resourceId: 'b' }
  ]
});
calendar.render();

Customizable Time Slots

This code initializes a FullCalendar instance with the timeline plugin and sets the initial view to a weekly timeline with 30-minute time slots. It includes two sample events.

const calendarEl = document.getElementById('calendar');
const calendar = new FullCalendar.Calendar(calendarEl, {
  plugins: [ 'timeline' ],
  initialView: 'timelineWeek',
  slotDuration: '00:30',
  events: [
    { title: 'Event 1', start: '2023-10-01T10:00:00', end: '2023-10-01T12:00:00' },
    { title: 'Event 2', start: '2023-10-01T13:00:00', end: '2023-10-01T15:00:00' }
  ]
});
calendar.render();

Other packages similar to @fullcalendar/timeline

react-big-scheduler

react-big-scheduler is a scheduler and resource planning component built for React. It provides a timeline view similar to @fullcalendar/timeline and is useful for resource management and scheduling applications. It is highly customizable and supports drag-and-drop functionality.

dhtmlx-scheduler

dhtmlx-scheduler is a JavaScript event calendar component that offers various views including timeline, day, week, and month. It is highly customizable and supports features like recurring events, drag-and-drop, and multiple resource views. It is comparable to @fullcalendar/timeline in terms of functionality and flexibility.

scheduler

scheduler is a lightweight JavaScript library for creating interactive event calendars. It supports timeline views and is designed to be easy to integrate and customize. While it may not have as many features as @fullcalendar/timeline, it is a good option for simpler scheduling needs.

README

FullCalendar Timeline Plugin

Display events on a horizontal time axis (without resources)

Installation

Install the necessary packages:

npm install @fullcalendar/core @fullcalendar/timeline

Usage

Instantiate a Calendar with the necessary plugin:

import { Calendar } from '@fullcalendar/core'
import timelinePlugin from '@fullcalendar/timeline'

const calendarEl = document.getElementById('calendar')
const calendar = new Calendar(calendarEl, {
  plugins: [timelinePlugin],
  initialView: 'timelineWeek',
  events: [
    { title: 'Meeting', start: new Date() }
  ]
})

calendar.render()