EventizeReactCalendar

EventizeReactCalendar is a customizable, responsive React calendar component that allows you to display events by day, week, or month. The calendar supports custom event rendering, navigation between months, weeks, and days, and allows you to fetch and display events dynamically.

Features

• Multiple Views: Switch between Month, Week, and Day views.
• Event Fetching: Fetch events dynamically for a specific month and year.
• Event Click Handling: Trigger actions when clicking on an event.
• Custom Event Rendering: Customize how events are rendered on the calendar.
• Navigation: Navigate between different time frames.
• Responsive Design: Adapts to different screen sizes for optimal viewing.

Installation

Install the package via npm:

npm install eventize-react-calendar

Basic Usage Example

Below is a basic example of how to use the EventizeReactCalendar in your React application, complete with dummy event data:

import React from "react";
import EventizeCalendar from "eventize-react-calendar";

/**
 * Main App component where EventizeCalendar is used.
 */
const Calendar = () => {
  /**
   * Dummy data for calendar events.
   */
  const dummyEvents = [
    {
      id: "1",
      title: "Project Kickoff",
      start: "2024-11-01T09:00:00",
      color: "#ff4500",
      status: "Open",
    },
    {
      id: "2",
      title: "Client Review Meeting",
      start: "2024-11-01T11:00:00",
      color: "#32cd32",
      status: "Open",
    },
    {
      id: "3",
      title: "Code Review Session",
      start: "2024-11-05T10:00:00",
      color: "#1e90ff",
      status: "Closed",
    },
    {
      id: "4",
      title: "Team Lunch",
      start: "2024-11-05T12:00:00",
      color: "#ffd700",
      status: "Open",
    },
    {
      id: "5",
      title: "Monthly Wrap-Up",
      start: "2024-11-30T15:00:00",
      color: "#8a2be2",
      status: "Closed",
    },
  ];

  /**
   * Function to fetch events based on the month and year.
   * @param {number} month - The current month.
   * @param {number} year - The current year.
   * @returns {Promise<Array>} A promise that resolves to an array of event objects.
   */
  const fetchEvents = async (month, year) => {
    // Filter events for the month and year
    return Promise.resolve(
      dummyEvents.filter((event) => {
        const eventDate = new Date(event.start);
        return (
          eventDate.getMonth() + 1 === month && eventDate.getFullYear() === year
        );
      })
    );
  };

  /**
   * Function to render events for a specific date.
   * [Note] - Add your own CSS class name here to customize the design further.
   * @param {string} date - The date in 'YYYY-MM-DD' format.
   * @returns {JSX.Element[]} An array of JSX elements representing events for that date.
   */
  const renderEvent = (date) => {
    return dummyEvents
      .filter((event) => event.start.startsWith(date))
      .map((event) => (
        <div
          key={event.id}
          style={{
            backgroundColor: event.color,
          }}
        >
          <strong>{event.title}</strong>
          <p>{event.description}</p>
        </div>
      ));
  };

  return (
    <EventizeCalendar fetchEvents={fetchEvents} renderEvent={renderEvent} />
  );
};

export default Calendar;

Props

| Prop | Type | Default | Description | | ------------- | ---------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------- | | fetchEvents | function | None | A function that must return a promise that resolves to an array of events. It accepts month and year as parameters. | | renderEvent | function | None | A function that returns JSX to render for a given date. The function receives a date string in 'YYYY-MM-DD' format as its parameter. | | defaultView | string | "month" | Optional. Determines the initial view of the calendar. Possible values are "month", "week", and "day". |

To-Do

Below are enhancements and features that are planned for future releases of EventizeReactCalendar:

• [ ] Time Slot Display: Implementing visualization of time slots for events in Day and Week views to enable a detailed hourly schedule.
• [ ] Drag-and-Drop Functionality: Adding the ability to drag and drop events to quickly reschedule them.

Current Work in Progress:

• [] Implementing time slots for the Week and Day views: Show events in specific time intervals.