Backend API Integration

Examples of loading calendar events from JSON

API Method Examples

Available API Methods:

Example 1: Load events on initialization

// Fetch from backend and initialize
fetch('/api/events')
  .then(response => response.json())
  .then(eventsData => {
    const calendar = new BrickCalendar(document.getElementById('calendar'), {
      initialView: 'dayGridMonth',
      events: eventsData // Pass JSON array directly
    });
    calendar.render();
  });

Example 2: Load/refresh events after initialization

// Replace all events with fresh data from backend
fetch('/api/events')
  .then(response => response.json())
  .then(eventsData => {
    calendar.setEvents(eventsData);
  });

Example 3: Add events incrementally

// Add multiple events without clearing existing ones
fetch('/api/events/recent')
  .then(response => response.json())
  .then(eventsData => {
    calendar.addEvents(eventsData);
  });

Example 4: Create event and save to backend

// Create event, save to backend, then add to calendar
const eventData = {
  title: 'New Meeting',
  start: '2025-12-30T10:00:00',
  end: '2025-12-30T11:00:00'
};

fetch('/api/events', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify(eventData)
})
  .then(response => response.json())
  .then(savedEvent => {
    // Backend returns event with ID
    calendar.addEvent(savedEvent);
  });

Example 5: Update event and sync with backend

// Update event locally and on backend
const eventId = 'event-123';
const changes = { title: 'Updated Meeting' };

fetch(`/api/events/${eventId}`, {
  method: 'PATCH',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify(changes)
})
  .then(response => response.json())
  .then(() => {
    calendar.updateEvent(eventId, changes);
  });

Example 6: Delete event and sync with backend

// Delete from backend, then remove from calendar
const eventId = 'event-123';

fetch(`/api/events/${eventId}`, { method: 'DELETE' })
  .then(() => {
    calendar.removeEvent(eventId);
  });

Example 7: Handle drag/drop with backend sync

const calendar = new BrickCalendar(document.getElementById('calendar'), {
  editable: true,
  eventDrop: function(info) {
    // Sync with backend when user drags event
    fetch(`/api/events/${info.event.id}`, {
      method: 'PATCH',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        start: info.event.start.toISOString(),
        end: info.event.end?.toISOString()
      })
    });
  }
});