calendar-carousel v1.0.6

The calendar-carousel is a reusable calendar component that gives emphasis on the selected date, time, and duration. Below is a detailed list of how to use it in your project:

Table of Contents:

1- Installation.

2- API Reference.

3- Usage Example.

Installation:

Running the following command to install the package:

npm i calendar-carousel

Now import it in the file you want using import Calendar from "calendar-carousel". Now you can call the container and get the default style and behavior of the calendar. To know how you can change the behavior using props refer to the API section.

API Reference:

The Calendar component provides a flexible and customizable calendar view with carousel functionality. Below is the API reference for the component's props.

Customize Design with Tokens:

The calendar-carousel supports custom design tokens allowing you to tailor the appearance to match your application's theme. Below is a table listing the tokens you can use to customize various aspects of the calendar's UI.

Light and Dark Mode:

Some antd components (mainly the collapse) used don't adhere to the darkAlgorithm properly for that purpose you can modify the ConfigProvider from antd and use the component tokens to customize them for dark/light themes:

<ConfigProvider
  theme={{
    components: {
      Collapse: {
        headerBg: darkTheme ? "black" : "",
      },
      DatePicker: {
        cellHoverBg: token.colorPrimary,
      },
    },
    algorithm: darkMode ? theme.darkAlgorithm : theme.defaultAlgorithm,
    token,
  }}
>
  {children}
</ConfigProvider>

E.g., here I am setting black color from my Collapse Panels in case of darkmode. For more details on how to further customize it refer to the components api's.

Usage Example:

import React from "react";
import Calendar from "calendar-carousel";

const MyComponent = () => {
  // example callback function for offDays
  const customOffDays = (date: dayjs.Dayjs) => {
    return date.day() === 2 || date.day() === 3;
  };

  const holidays = [dayjs("01-01-2023"), dayjs("01-02-2023")];

  // example callback function for holidays
  const checkIfHoliday = (date: dayjs.Dayjs) => {
    return holidays.some((holiday) => holiday.isSame(date, "day"));
  };

  return (
    <Calendar
      numCardsToShow={5}
      cardsToScroll={2}
      dateRange={[dayjs("01-01-2023"), dayjs("01-30-2023")]}
      offDays={customOffDays}
      holidays={checkIfHoliday}
      timeFormat="HH:mm a"
      durationStep={15}
      onDateChange={(date) =>
        console.log("Selected Date:", date.format("MMMM DD, YYYY"))
      }
      onTimeChange={(time) =>
        console.log("Selected Time:", time?.format("HH:mm"))
      }
      onDurationChange={(duration) => console.log("Duration:", duration)}
    />
  );
};

export default MyComponent;