react-custom-calendars
Version:
A calendar that can be customized to your liking 🧨
158 lines (124 loc) • 7.8 kB
Markdown
# 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
```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