react-custom-calendars

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

Installation

npm

npm i react-custom-calendars --save

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

const { currentDate, setCurrentDate, MonthCalendarData } = MonthCalendar("dd");

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	string	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

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

const { currentDate, setCurrentDate, WeekCalendarData } = WeekCalendar("dd");

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	string	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
WeekCalendarData	string[]	Data that can be displayed on a calendar based on currentDate

LICENSE

• MIT