React Calendar Component

The React Calendar Component allows you to display a calendar with events in your web application. It provides a simple and customizable way to visualize and manage events over time. This component uses the popular 'react-calendar' library to render the calendar and extends it with the ability to display events on specific dates. It also includes a feature to add events to Google or Outlook calendars.

Installation

To get started, install the component package using npm or yarn:

npm install @vipindevelops/react-calendar

yarn add @vipindevelops/react-calendar

Usage

import React from 'react';
import { Calendar } from 'react-calendar-component';

export default function MyCalendar() {
  const Events = [
    {
      event_date: new Date('8-24-23 12:00'),
      event_title: "Gsoc Demo Day",
      event_theme: 'blue',
      event_description: "This is a Demo day for GSoC contributors where they showcase their work for the community",
    },
    {
      event_date: new Date('8-1-23 12:00'),
      event_title: "World Wide Web Day",
      event_theme: 'blue',
      event_description: "YAY! Today is World Wide Web Day",
    },
    // Add more events as needed
  ];

  return (
    <div>
      <Calendar
        Events={Events}
        stylesOverrides={{
          today: "bg-red-500", // Add style overrides as needed
        }}
      />
    </div>
  );
}