React-custom-calendars NPM

react-custom-calendars

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

alt text

Installation

npm

npm i react-custom-calendars

yarn

yarn add react-custom-calendars

Example

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

function App() {
  const { monthCalendarData } = MonthCalendar("dd");

  return (
    <ul>
      {monthCalendarData.map((weeks) => (
        <li
          style={{
            listStyle: "none",
            display: "flex",
            gap: "10px",
          }}
        >
          {weeks.map((date) => (
            <p 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("dd");

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

Argument

name	required	type	Description	Example
format	O	`string`	Format of returned date	`yyyy-MM-dd`, `dd`, ...
currentDate	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	`Date`	Standard for date data to be returned
setCurrentDate	`function`	A function that changes the currentDate, which is the reference point of the monthly date to be returned
monthCalendarData	`string[][]`	Data that can be displayed on a calendar based on currentDate
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.
example

// WeekCalendar example
const {
  currentDate,
  weekDates,
  monthlyWeekGrid,
  moveToPeriod,
  moveToNext,
  moveToPrev,
} = WeekCalendar("dd");

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

Argument

name	required	type	Description	Example
format	O	`string`	Format of returned date	`yyyy-MM-dd`, `dd`, ...
currentDate	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	`Date`	Standard for date data to be returned
setCurrentDate	`function`	A function that changes the currentDate, which is the reference point of the weekly date to be returned
weekDates	`string[]`	Simple array of dates for current week (Sunday to Saturday)
monthlyWeekGrid	`string[][]`	Grid format data that includes dates from adjacent months
moveToPeriod	`string[]`	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	`string[]`	Moves the calendar to the next week currentDate
moveToPrev	`string[]`	Moves the calendar to the previous week currentDate