React Calendar Scheduler

React Calendar Scheduler is a flexible and customizable calendar component for scheduling events in React applications.

Features

• Supports week and month views for calendar scheduling.
• Drag and drop functionality for event placement and resizing.
• Customizable event rendering and styling.
• Easily add, update, and delete events.
• Responsive design for mobile and desktop devices.

Installation

You can install the React Calendar Scheduler package using npm or yarn.

Using npm:

npm install react-calendar-scheduler

Using yarn:

yarn add react-calendar-scheduler

Once installed, you can import the component in your React application and start using it.

Usage

Import the ReactCalendarScheduler component and use it in your React application:

import { ReactCalendarScheduler } from 'react-calendar-scheduler';

function App() {
  // Define your event data
  const events = [
    // Event objects
  ];

  return (
    <div>
      <h1>React Calendar Scheduler</h1>
      <ReactCalendarScheduler
        events={events}
        // Other props
      />
    </div>
  );
}

export default App;

Props

| Name | Description | Default Value | | --------------------------------- | ----------------------------------------------------------------------------------------------- | --------------- | | selectedDate | The initial selected date for the calendar. Defaults to the current date. | Current date | | calendarType | The type of calendar to display. Can be 'week' or 'month'. | 'week' | | monthCalanderTitleFormate | The format for the month calendar title. Defaults to 'dddd'. | 'dddd' | | monthCalanderTitle | The format for the day column title in the month calendar. Defaults to 'ddd'. | 'ddd' | | monthCalanderDayHeight | The height of each day column in the month calendar. Defaults to 120. | 120 | | minimumEventThickness | The minimum thickness for event rendering. Defaults to 30. | 30 | | weekHourBoxHeight | The height of each hour box in the week calendar. Defaults to 50. | 50 | | weekCalanderNextBtnDayIncrement | The number of days to increment on the next button click in the week calendar. Defaults to 7. | 7 | | startingWeekday | The starting weekday for the week calendar. 0 for Sunday, 1 for Monday, and so on. | 1 | | weekCalanderDayStartFromHour | The starting hour for each day in the week calendar. Defaults to 7. | 7 | | weekCalanderVisibleHour | The number of visible hours in each day of the week calendar. Defaults to 12. | 12 | | weekCalanderTitleFormate | The format for the day column title in the week calendar. Defaults to 'ddd, MMM dd'. | 'ddd, MMM dd' | | weekCalanderTimeFormate | The format for the time display in the week calendar. Defaults to 12. | 12 | | monthCalanderMinCellHeight | The minimum height of each cell in the month calendar. Defaults to 50. | 50 | | disabaleEventPopup | Disables the event popup if set to true. Defaults to false. | false | | disabaleAddEventPopup | Disables the add event popup if set to true. Defaults to false. | false | | handleUpdateEvent | Callback function for updating an event. | | | handleAddNewEvent | Callback function for adding a new event. | |

Props selectedDate (optional): The initial selected date for the calendar. Defaults to the current date. calendarType (optional): The type of calendar to display. Can be 'week' or 'month'. Defaults to 'week'. // Other props and their descriptions

Contributing

Contributions, bug reports, and feature requests are welcome. Feel free to open an issue or submit a pull request on the GitHub repository.

License

This project is licensed under the MIT License.