react-calendar-full 📆

A full-featured React calendar component with event scheduling and monthly, weekly, and daily views.

Demo

Check it out the demo!

Installation

Using npm:

npm install react-calendar-full --save

Or using yarn:

yarn add react-calendar-full

Example Usage

import React from 'react';
import { Calendar, CalendarEvent, CalendarEventStore } from 'react-calendar-full';

function CalendarDemo() {
  const initialEvents: Array<CalendarEvent> = [
    {
      id: 1,
      description: "Morning Meeting",
      date: "2023-10-24",
      startTime: "09:00",
      endTime: "10:00"
    },
    {
      id: 2,
      description: "Lunch with Client",
      date: "2023-10-24",
      startTime: "12:30",
      endTime: "13:30"
    },
    {
      id: 3,
      description: "Project Review",
      date: "2023-10-25",
      startTime: "15:00",
      endTime: "16:30"
    },
    {
      id: 4,
      description: "Team Outing",
      date: "2023-10-26",
      startTime: "17:00",
      endTime: "20:00"
    }
  ];
  
  const calenderEventStore = new CalendarEventStore(initialEvents);

  // Support for listening for calendar events:
  calenderEventStore.onAdd((event: CalendarEvent) => {
    // Call server to add event
    fetch('https://api.example.com/events', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(event)
    });
  });
  calenderEventStore.onUpdate((event: CalendarEvent) => {
    // Call server to add event
    fetch(`https://api.example.com/events/${event.id}`, {
      method: 'PUT',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(event)
    });
  });
  calenderEventStore.onDelete((event: CalendarEvent) => {
    fetch(`https://api.example.com/events/${event.id}`, {
      method: 'DELETE',
      headers: {
        'Content-Type': 'application/json'
      }
    });
  });

  return (
    <div className="container">
      <Calendar
        activeDate={new Date("2023-10-24T00:00")}
        dayStartTime={5}
        dayEndTime={23}
        eventStore={calenderEventStore}
      />
    </div>
  );
}

export default CalendarDemo;

License

This project is licensed under the MIT License.