tessl/npm-fullcalendar--timegrid

Display events on time slots for the FullCalendar JavaScript library

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Main Plugin

Name: tessl/npm-fullcalendar--timegrid
Author: tessl

The main plugin export provides the core time grid functionality for FullCalendar, registering three time-based view types with configurable options.

Capabilities

Default Plugin Export

The main plugin definition that registers time grid views with FullCalendar core.

/**
 * Main time grid plugin for FullCalendar
 * Provides timeGrid, timeGridDay, and timeGridWeek views
 */
declare const plugin: PluginDef;
export default plugin;

interface PluginDef {
  name: string;
  initialView: string;
  optionRefiners: Record<string, any>;
  views: Record<string, ViewSpec>;
}

Usage Examples:

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

// Basic time grid setup
const calendar = new Calendar(calendarEl, {
  plugins: [timeGridPlugin],
  initialView: 'timeGridWeek'
});

// Customized time grid configuration
const calendar = new Calendar(calendarEl, {
  plugins: [timeGridPlugin],
  initialView: 'timeGridDay',
  slotDuration: '00:15:00',
  slotMinTime: '08:00:00',
  slotMaxTime: '18:00:00',
  allDaySlot: false
});

// Business hours time grid with event handling
const businessCalendar = new Calendar(calendarEl, {
  plugins: [timeGridPlugin],
  initialView: 'timeGridWeek',
  businessHours: {
    daysOfWeek: [1, 2, 3, 4, 5], // Monday - Friday
    startTime: '09:00',
    endTime: '17:00'
  },
  slotMinTime: '07:00:00',
  slotMaxTime: '19:00:00',
  slotDuration: '00:30:00',
  events: [
    {
      title: 'Team Meeting',
      start: '2023-12-01T10:00:00',
      end: '2023-12-01T11:00:00'
    },
    {
      title: 'Project Review',
      start: '2023-12-01T14:30:00',
      end: '2023-12-01T15:30:00'
    }
  ],
  eventClick: function(info) {
    alert('Event: ' + info.event.title);
  },
  selectable: true,
  selectMirror: true,
  select: function(selectionInfo) {
    // Handle time slot selection
    console.log('Selected:', selectionInfo.start, selectionInfo.end);
  }
});

// Multi-calendar setup with different time grids
const multiCalendar = new Calendar(calendarEl, {
  plugins: [timeGridPlugin],
  headerToolbar: {
    left: 'prev,next today',
    center: 'title',
    right: 'timeGridWeek,timeGridDay'
  },
  initialView: 'timeGridWeek',
  nowIndicator: true,
  scrollTime: '09:00:00',
  height: 'auto',
  eventColor: '#378006',
  eventTextColor: '#ffffff'
});

View Types

Time Grid Base View

Base configuration for all time grid views.

interface TimeGridViewSpec extends ViewSpec {
  component: typeof DayTimeColsView;
  usesMinMaxTime: true;
  allDaySlot: boolean;
  slotDuration: DurationInput;
  slotEventOverlap: boolean;
}

The timeGrid view provides:

Time slot-based event display
Configurable slot duration (default: 30 minutes)
All-day event slot display
Event overlap handling
Min/max time range support

Time Grid Day View

Single day time grid view showing one day with hourly time slots.

interface TimeGridDayViewSpec extends TimeGridViewSpec {
  type: 'timeGrid';
  duration: { days: 1 };
}

Usage Examples:

const calendar = new Calendar(calendarEl, {
  plugins: [timeGridPlugin],
  initialView: 'timeGridDay',
  events: [
    {
      title: 'Morning Meeting',
      start: '2023-12-01T09:00:00',
      end: '2023-12-01T10:30:00'
    }
  ]
});

Time Grid Week View

Weekly time grid view showing seven days with hourly time slots.

interface TimeGridWeekViewSpec extends TimeGridViewSpec {
  type: 'timeGrid';
  duration: { weeks: 1 };
}

Usage Examples:

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

Plugin Configuration Options

All Day Slot

Controls the display of the all-day events section above the time grid.

interface AllDaySlotOption {
  allDaySlot?: boolean; // Default: true
}

Slot Duration

Defines the frequency of time slots in the grid.

interface SlotDurationOption {
  slotDuration?: DurationInput; // Default: '00:30:00'
}

Slot Event Overlap

Controls whether events can visually overlap within time slots.

interface SlotEventOverlapOption {
  slotEventOverlap?: boolean; // Default: true
}

Types

interface ViewSpec {
  component?: ComponentType<any>;
  type?: string;
  duration?: DurationInput;
  usesMinMaxTime?: boolean;
  allDaySlot?: boolean;
  slotDuration?: DurationInput;
  slotEventOverlap?: boolean;
}

interface DurationInput {
  years?: number;
  months?: number;
  weeks?: number;
  days?: number;
  hours?: number;
  minutes?: number;
  seconds?: number;
  milliseconds?: number;
}