FullScheduler — Add, Edit & Remove Calendar Events - Full Guide

Docs, demos, API

Edit, add & remove eventsAPI walkthrough

Typed (T)add / update / delete

Use the user API to modify your collection: setEvents, addEvents, updateEvents, deleteEvents. All calls are strongly typed (your T flows through).

API snippets

Add & remove:

type T = { id: string; color?: string }

// Add (note: id is inside data)
api.addEvents([{
  label: 'New',
  start: new Date(),
  end:   new Date(Date.now() + 30 * 60e3),
  data:  { id: 'new-1', color: '#dbeafe' }
}])

// Remove by predicate (operate on event.data.id or any field)
api.deleteEvents(e => e.data?.id === 'new-1')

// Replace entire collection
api.setEvents([{
  label: 'Fresh list',
  start: new Date(),
  end:   new Date(Date.now() + 60 * 60e3),
  data:  { id: 'reset-1' }
}])

Edit (predicate update):

type T = { id: string; color?: string }

// Change label & time window using predicate update (shallow-merge for data)
api.updateEvents(
  e => e.data?.id === 'reset-1',
  {
    label: 'Updated',
    start: new Date(),
    end:   new Date(Date.now() + 90 * 60e3),
    data:  { ...e.data, color: '#fde68a' }
  }
)

Interactive demoLive