test-calendar-test

Customizable and Modern React Calendar Component

Overview

This React calendar component provides a versatile and interactive calendar experience for your application. It supports multiple calendar views—year, month, week, and day—and includes event management features to handle and display events effectively. Designed with modern aesthetics and customization options, it fits various needs.

Key Features

Multiple Calendar Views

• Year View: Displays the entire year at a glance, with navigation options to specific months or years.
• Month View: Shows a traditional monthly calendar grid. Day cells can display events or reveal event details on click.
• Week View: Provides a detailed view of a single week, with days as columns and events organized by time slots.
• Day View: Offers an in-depth look at a single day, with time slots and scheduled events.

Event Management

• Event Display: Events appear in their respective date and time slots. Customize event styling with CSS.
• Event Details: Click on an event to open a popup or modal with detailed information, including title, description, and time.
• Interactive Features: Add, edit, and delete events directly within the calendar.

Customizable UI

• Modern Design: Clean and modern design with flexible styling options. Apply custom CSS classes for a personalized appearance.
• Responsive Layout: Fully responsive, adapting to various screen sizes for a seamless experience on both desktop and mobile devices.

Interactive Components

• Drag and Drop: Allows users to drag and drop events between different time slots or days.
• Resize Events: Users can resize events to adjust their duration or timing.
• Date Navigation: Intuitive controls for navigating between views, such as month or week transitions.

Integration and Flexibility

• Custom Views: Easily integrate and customize the calendar for specific needs. Extend or modify components to add features or adapt to different use cases.
• Data Management: Supports various methods for managing event data, including API integration, static data, or external databases.

Code Structure

• Component-Based Design: Utilizes React’s component-based architecture for easy management, extension, and reuse.
• Separation of Concerns: Clear separation between logic and styling for improved maintainability.

Features

• Responsive Views: Supports multiple views including Year, Month, Week, and Day.
• Event Management: Easily add, edit, and delete events.
• Customizable: Fully customizable with props to fit your application’s needs.
• Modern UI: Clean and modern interface with a grid layout for time slots.
• Built with React: Seamlessly integrates with your React applications.

Installation

To install the package, run:

npm install test-calendar-testing

or if you're using Yarn:

yarn add test-calendar-testing

Usage

Here’s a basic example of how to use the calendar component in your React application:

import Calendar from "./test-calendar-testing";
import "./App.css";

function App() {
  const events = [
    {
      id: 1,
      title: "Meeting-With-Client",
      description: "Submit the project.",
      date: "2024-08-25",
      startTime: "2024-08-25T10:30:00Z",
      endTime: "2024-08-25T11:30:00Z",
      colorOptions: {
        color: "#2C5A41",
        bgColor: "#BDFFDB",
        borderColor: "#8FDCB2",
      },
    },
    {
      id: 2,
      title: "Lunch",
      description: "Lunch with Arun.",
      date: "2024-08-23",
      startTime: "2024-08-23T02:30:00Z",
      endTime: "2024-08-23T03:00:00Z",
      iconUrl:
        "https://images.emojiterra.com/google/noto-emoji/unicode-15.1/color/1024px/1f514.png",
      colorOptions: {
        color: "#684D08",
        bgColor: "#FFEBB7",
        borderColor: "#E7C160",
      },
    },
]



  const modifyEvent = (event = null) => {
    console.log(event);
  };

  return (
    <>
      <Calendar
        events={events}
        defaultView={"week"}
        onEventClick={modifyEvent}
      />
    </>
  );
}

export default App;

Props

| Prop Name | Type | Default | Description | |----------------|----------------|----------------|-----------------------------------------------------------------------------| | events | array | [] | List of event objects to be displayed on the calendar. | | defaultView | string | 'month' | Sets the default view (options: 'year', 'month', 'week', 'day'). | | onEventClick | function | undefined | Callback function triggered when an event is clicked. | | onDateChange | function | undefined | Callback function triggered when the date is changed (e.g., month or year). | | theme | object | undefined | Custom theme settings for styling the calendar. |

Customization

You can customize the appearance and behavior of the calendar by passing props. For example:

 <Calendar
        events={events}
        defaultView={"week"}
        onEventClick={modifyEvent}
      />

CSS Customization

To further customize the look of the calendar, you can override the default styles by importing your own CSS:

/* src/custom-calendar-styles.css */
.calendar-header {
  background-color: #007bff;
  color: #fff;
}

.calendar-day-cell {
  border: 1px solid #dee2e6;
}

Then import it into your application:

import 'src/custom-calendar-styles.css';

Contributing

Contributions are welcome! If you’d like to contribute, please fork the repository and use a feature branch. Pull requests are warmly welcome.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

• Thanks to the React community for the inspiration and support.
• Special thanks to [name any libraries or resources you used].

Support

If you encounter any issues or have any questions, please open an issue in the repository or contact me directly at [[email protected]].