react-custom-calendars

It provides calendar data that you can customize and use as you wish. (in React)

• If you want to use it in a Next.js app router project, use 'use client'.

Installation

npm

npm i react-custom-calendars

yarn

yarn add react-custom-calendars

Important Notes

• All dates are handled in UTC to ensure consistent calendar display worldwide
• Date formatting is handled by date-fns library, supporting various format patterns
• initialDate should be provided as a Date object

Example

import { MonthCalendar } from "react-custom-calendars";

function App() {
  const { monthCalendarData } = MonthCalendar({
    type: "dd", // date-fns format string
    initialDate: new Date(1996, 3, 29), // optional
  });

  return (
    <ul>
      {monthCalendarData.map((weeks, weekIndex) => (
        <li
          key={weekIndex}
          style={{
            listStyle: "none",
            display: "flex",
            gap: "10px",
          }}
        >
          {weeks.map((date, dateIndex) => (
            <p key={dateIndex} style={{ width: "20px" }}>
              {date}
            </p>
          ))}
        </li>
      ))}
    </ul>
  );
}

export default App;

MonthCalendar

• You can return date data in monthly calendar format.
• In a week, the last date of the previous month or the start date of the next month is returned as 0.
  • If you want to use the included data, you can use WeekCalendar.
• example

// MonthCalendar example
const { currentDate, monthCalendarData, moveToPeriod, moveToNext, moveToPrev } =
  MonthCalendar({
    type: "dd", // date-fns format string
    initialDate: new Date(1996, 3, 29), // optional
  });

// Move to next month
moveToNext();
// Move to previous month
moveToPrev();
// Move 2 months forward
moveToPeriod(2);

Argument

| name | required | type | Description | Example | | ----------- | :------: | :------: | -------------------------------------------------------------------------------------- | ----------------------- | | type | O | string | Format of returned date Detail format | yyyy-MM-dd, dd, ... | | initialDate | X | Date | Standard for date data to be returned (if there is no value, today's date is returned) | new Date(2024, 8, 15) |

Return

| name | type | Description | | ----------------- | :----------: | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | currentDate | string | Standard for date data to be returned | | setCurrentDate | function | A function that changes the currentDate using a Date object as parameter | | monthCalendarData | string[][] | Data that can be displayed on a calendar based on currentDate, all dates formatted according to the type parameter | | moveToPeriod | function | Moves the calendar by specified number of months. Positive numbers move forward, negative numbers move backward (e.g., moveToPeriod(1) moves to next month, moveToPeriod(-2) moves back two months) | | moveToNext | function | Moves the calendar to the next month currentDate | | moveToPrev | function | Moves the calendar to the previous month currentDate |

WeekCalendar

• You can use this when you want to include the last dates of the previous month within a week, or the start dates of the next month.
  • For this, use monthlyWeekGrid
  • If you just want a week, use weekDates.
• example

// WeekCalendar example
const {
  currentDate,
  weekDates,
  monthlyWeekGrid,
  moveToPeriod,
  moveToNext,
  moveToPrev,
} = WeekCalendar({
  type: "dd", // date-fns format string
  initialDate: new Date(1960, 1, 1), // optional
});

// Move to next week
moveToNext();
// Move to previous week
moveToPrev();
// Move 2 weeks forward
moveToPeriod(2);

Argument

| name | required | type | Description | Example | | ----------- | :------: | :------: | -------------------------------------------------------------------------------------- | ----------------------- | | type | O | string | Format of returned date Detail format | yyyy-MM-dd, dd, ... | | initialDate | X | Date | Standard for date data to be returned (if there is no value, today's date is returned) | new Date(2024, 8, 15) |

Return

| name | type | Description | | --------------- | :----------: | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | currentDate | string | Standard for date data to be returned | | setCurrentDate | function | A function that changes the currentDate using a Date object as parameter | | weekDates | string[] | Simple array of dates for current week (Sunday to Saturday) formatted according to the type parameter | | monthlyWeekGrid | string[][] | Grid format data that includes dates from adjacent months, all dates formatted according to the type parameter | | moveToPeriod | function | Moves the calendar by specified number of weeks. Positive numbers move forward, negative numbers move backward (e.g., moveToPeriod(1) moves to next week, moveToPeriod(-2) moves back two weeks) | | moveToNext | function | Moves the calendar to the next week currentDate | | moveToPrev | function | Moves the calendar to the previous week currentDate |

LICENSE

• MIT