Calendar

Copyimport { IlamyCalendar } from '@ilamy/calendar';

function MyCalendar() {
  const handleEventClick = (event) => {
    console.log('Event clicked:', event);
    // Open event details modal, navigate to event page, etc.
  };

  const handleDateClick = (date) => {
    console.log('Date clicked:', date);
    // Create new event, switch to day view, etc.
  };

  const handleViewChange = (view) => {
    console.log('View changed to:', view);
    // Update URL, track analytics, etc.
  };

  return (
    <IlamyCalendar
      events={events}
      firstDayOfWeek="monday"
      onEventClick={handleEventClick}
      onCellClick={handleDateClick}
      onViewChange={handleViewChange}
    />
  );
}

Copyimport { IlamyCalendar } from '@ilamy/calendar';

function CustomCalendar() {
  const renderEvent = (event) => (
    <div className="px-2 py-1 rounded bg-blue-100 text-blue-800">
      <div className="font-semibold">{event.title}</div>
      <div className="text-xs">{event.description}</div>
    </div>
  );

  return (
    <IlamyCalendar
      events={events}
      renderEvent={renderEvent}
      onEventClick={(event) => alert(`Clicked: ${event.title}`)}
      onCellClick={(date) => console.log('Selected date:', date)}
    />
  );
}

Copyimport { IlamyCalendar } from '@ilamy/calendar';
import { useState } from 'react';

function AdvancedCalendar() {
  const [events, setEvents] = useState([]);

  const handleEventAdd = (event) => {
    console.log('New event added:', event);
    setEvents(prev => [...prev, event]);
    // Save to your backend API
  };

  const handleEventUpdate = (updatedEvent) => {
    console.log('Event updated:', updatedEvent);
    setEvents(prev => 
      prev.map(event => 
        event.id === updatedEvent.id ? updatedEvent : event
      )
    );
    // Update in your backend API
  };

  const handleEventDelete = (deletedEvent) => {
    console.log('Event deleted:', deletedEvent);
    setEvents(prev => 
      prev.filter(event => event.id !== deletedEvent.id)
    );
    // Delete from your backend API
  };

  const handleDateChange = (date) => {
    console.log('Date changed to:', date.format('YYYY-MM-DD'));
    // Load events for the new date range
    // fetchEventsForDate(date);
  };

  return (
    <IlamyCalendar
      events={events}
      initialView="week" // Start with week view
      onEventAdd={handleEventAdd}
      onEventUpdate={handleEventUpdate}
      onEventDelete={handleEventDelete}
      onDateChange={handleDateChange}
      onEventClick={(event) => console.log('Event clicked:', event)}
      onCellClick={(date) => console.log('Cell clicked:', date)}
    />
  );
}

Copyimport { IlamyCalendar } from '@ilamy/calendar';
import { useState } from 'react';

function CalendarWithAPI() {
  const [events, setEvents] = useState([]);
  const [loading, setLoading] = useState(false);

  // Handle new event creation
  const handleEventAdd = async (event) => {
    setLoading(true);
    try {
      // Save to backend
      const response = await fetch('/api/events', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(event)
      });
      
      if (response.ok) {
        const savedEvent = await response.json();
        setEvents(prev => [...prev, savedEvent]);
        console.log('Event created successfully:', savedEvent);
      }
    } catch (error) {
      console.error('Failed to create event:', error);
    } finally {
      setLoading(false);
    }
  };

  // Handle event updates
  const handleEventUpdate = async (updatedEvent) => {
    setLoading(true);
    try {
      const response = await fetch('/api/events/' + updatedEvent.id, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(updatedEvent)
      });
      
      if (response.ok) {
        setEvents(prev => 
          prev.map(event => 
            event.id === updatedEvent.id ? updatedEvent : event
          )
        );
        console.log('Event updated successfully:', updatedEvent);
      }
    } catch (error) {
      console.error('Failed to update event:', error);
    } finally {
      setLoading(false);
    }
  };

  // Handle event deletion
  const handleEventDelete = async (deletedEvent) => {
    setLoading(true);
    try {
      const response = await fetch('/api/events/' + deletedEvent.id, {
        method: 'DELETE'
      });
      
      if (response.ok) {
        setEvents(prev => 
          prev.filter(event => event.id !== deletedEvent.id)
        );
        console.log('Event deleted successfully:', deletedEvent);
      }
    } catch (error) {
      console.error('Failed to delete event:', error);
    } finally {
      setLoading(false);
    }
  };

  // Handle date navigation
  const handleDateChange = async (date) => {
    console.log('Navigating to:', date.format('YYYY-MM-DD'));
    
    // Optionally load events for the new date range
    const monthStart = date.startOf('month');
    const monthEnd = date.endOf('month');
    
    try {
      const response = await fetch(
        '/api/events?start=' + monthStart.toISOString() + 
        '&end=' + monthEnd.toISOString()
      );
      
      if (response.ok) {
        const monthEvents = await response.json();
        setEvents(monthEvents);
      }
    } catch (error) {
      console.error('Failed to load events for date:', error);
    }
  };

  return (
    <div className="relative">
      {loading && (
        <div className="absolute inset-0 bg-white/50 flex items-center justify-center z-10">
          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
        </div>
      )}
      
      <IlamyCalendar
        events={events}
        initialView="month"
        onEventAdd={handleEventAdd}
        onEventUpdate={handleEventUpdate}
        onEventDelete={handleEventDelete}
        onDateChange={handleDateChange}
        onEventClick={(event) => {
          // Navigate to event details or open modal
          console.log('Event clicked:', event);
        }}
      />
    </div>
  );
}

Copyinterface CalendarEvent {
  id: string;              // Unique identifier for the event
  title: string;           // Display title of the event
  start: Date;             // Start date and time
  end: Date;               // End date and time
  description?: string;    // Optional description text
  color?: string;          // Optional text color (hex, rgb, named colors, class names)
  backgroundColor?: string; // Optional background color (hex, rgb, named colors, class names)
  allDay?: boolean;        // Whether this is an all-day event
  data?: Record<string, any>; // Optional custom data for additional properties
}

Copy// Regular timed event
const meeting = {
  id: 'meeting-1',
  title: 'Team Standup',
  start: new Date('2024-01-15T09:00:00'),
  end: new Date('2024-01-15T09:30:00'),
  description: 'Daily team sync meeting',
  color: '#3b82f6'
};

// All-day event
const holiday = {
  id: 'holiday-1',
  title: 'National Holiday',
  start: new Date('2024-01-01'),
  end: new Date('2024-01-01'),
  allDay: true,
  color: '#ef4444'
};

// Multi-day event
const conference = {
  id: 'conf-1',
  title: 'Tech Conference',
  start: new Date('2024-01-20T08:00:00'),
  end: new Date('2024-01-22T18:00:00'),
  description: 'Annual technology conference',
  color: '#10b981'
};