# 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'`.

![alt text](README_EX_1.png)
![alt text](README_EX_3.png)

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

```typescript
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](#weekcalendar).
- example

```typescript
// 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](https://date-fns.org/docs/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

```typescript
// 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](https://date-fns.org/docs/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