Skip to content

Commit 4255939

Browse files
jason89521jason89521
authored
Merge pull request #22 from jason89521/calendar/develop
2 parents 64cb51b + 6567fee commit 4255939

21 files changed

Lines changed: 596 additions & 2598 deletions

‎doc-site/docs/react-use-calendar-component/index.mdx‎

Lines changed: 4 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,10 @@ title: Use Calendar
66

77
This package is aimed to provide an easy-to-use API interface for those people who want to build their own calendar component with custom style.
88

9+
## Caveat
10+
11+
This package is still under development, the API interface may change frequently.
12+
913
## Install
1014

1115
```sh
@@ -52,80 +56,3 @@ const Calendar = () => {
5256
);
5357
};
5458
```
55-
56-
## API Reference
57-
58-
```ts
59-
const {
60-
selectedDates,
61-
displayedYear,
62-
displayedMonth,
63-
changeDisplayedYear,
64-
changeDisplayedMonth,
65-
getDateCellInfos,
66-
} = useCalendarComponent({ initialDisplayedDate, selectType, value, onChange });
67-
```
68-
69-
### Args
70-
71-
#### `initialDisplayedDate`
72-
73-
This value will be used to generate the date cells at beginning. Its default value is `new Date()`.
74-
75-
#### `selectType`
76-
77-
The selection type of the calendar, currently support `'single' | 'multiple'`. Its default value is `'single'`.
78-
79-
> This option must be set if you don't want to use `single` type.
80-
81-
#### `value`
82-
83-
Set it up to get the full control of the calendar. For `'single'` selection type, the type of this value should be `Date`. For `'multiple'` selection type, the type of this value should be `Date[]`.
84-
85-
#### `onChange`
86-
87-
```ts
88-
type OnChange: (value: Date|Date[]) => void
89-
```
90-
91-
For `single` selection type, the `value` is a `Date` instance. For `multiple` selection type, the `value` is an array of `Date` instances.
92-
93-
### Returns
94-
95-
#### `selectedDates`
96-
97-
An array contains the `Date` instances of all selected date.
98-
99-
#### `displayedYear`
100-
101-
The year of the calendar which should be rendered.
102-
103-
#### `displayedMonth`
104-
105-
The month of the calendar which should be rendered.
106-
107-
#### `changeDisplayedYear`
108-
109-
Call this function to add a value to `displayedYear`.
110-
111-
#### `changeDisplayedMonth`
112-
113-
Call this function to add a value to `displayedMonth`.
114-
115-
#### `getDateCellInfos`
116-
117-
```ts
118-
interface DateCellInfo {
119-
key: string;
120-
year: number;
121-
month: number;
122-
dayOfMonth: number;
123-
dayOfWeek: number;
124-
isToday: boolean;
125-
isSelected: boolean;
126-
monthStatus: 'current' | 'next' | 'previous';
127-
selectThisDate: (options?: SelectDateOptions) => void;
128-
}
129-
```
130-
131-
This function returns an array of `DateCellInfo`. It can be used to render your calendar.

‎doc-site/docs/react-use-calendar-component/options.mdx‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
---
2+
title: Options
3+
---
4+
5+
```ts
6+
export type SelectType = 'single' | 'multiple';
7+
8+
export type Value<S extends SelectType> = S extends 'single'
9+
? Date
10+
: S extends 'multiple'
11+
? Date[]
12+
: never;
13+
14+
export type ExcludedDates = {
15+
min?: Date;
16+
max?: Date;
17+
arbitrary?: Date[];
18+
};
19+
20+
export type UseCalendarOptions<S extends SelectType = 'single'> = {
21+
initialDisplayedDate?: Date;
22+
selectType?: S;
23+
value?: Value<S>;
24+
onChange?: (value: Value<S>) => void;
25+
excludedDates?: ExcludedDates;
26+
};
27+
28+
// useCalendarComponent(your_options)
29+
```
30+
31+
## `initialDisplayedDate`
32+
33+
This value is used for displaying the current year and month. Default value is `new Date()`.
34+
35+
## `selectTyps`
36+
37+
The selecting type of the calendar component. These option will change the accepted `value` and the argument of `onChange`. Default value is `'single'`.
38+
39+
## `value`
40+
41+
For single mode, this option should be an instance of `Date`. For multiple mode, this options should be an array of `Date` instance. It can be useful when you want your calendar component be a controlled component.
42+
43+
## `onChange`
44+
45+
This function will be called when a date is selected by the `selectedThisDate` function which is generated for every date cell.
46+
47+
## `excludedDates`
48+
49+
If the date cell satisify the condition specified by this options, then the `isExcluded` flag will be set to `true`.
50+
51+
### `min`
52+
53+
Every date smaller than this value will be excluded.
54+
55+
### `max`
56+
57+
Every date larger than or equal to this value will be excluded.
58+
59+
### `arbitrary`
60+
61+
The date specified in this array will be excluded.

‎doc-site/docs/react-use-calendar-component/return.mdx‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
---
2+
title: Return value
3+
---
4+
5+
```ts
6+
export interface DateInfo {
7+
year: number;
8+
month: number;
9+
monthDay: number;
10+
weekDay: number;
11+
isToday: boolean;
12+
monthStatus: 'current' | 'next' | 'previous';
13+
}
14+
15+
export interface DateCellInfo extends DateInfo {
16+
key: string;
17+
isSelected: boolean;
18+
isExcluded: boolean;
19+
selectThisDate: (options?: SelectDateOptions) => void;
20+
}
21+
22+
export type ChangeDisplayedValue = (
23+
value: number,
24+
options?: { override?: boolean }
25+
) => void;
26+
27+
interface Return {
28+
displayedYear: number;
29+
displayedMonth: number;
30+
changeDisplayedYear: ChangeDisplayedValue;
31+
changeDisplayedMonth: ChangeDisplayedValue;
32+
getDateCellInfos: (year?: number, month?: number) => DateCellInfo[];
33+
}
34+
```
35+
36+
## `displayedYear`
37+
38+
The current year which should be displayed.
39+
40+
## `displayedMonth`
41+
42+
The current month which should be displayed.
43+
44+
## `changeDisplayedYear`
45+
46+
Add `displayedYear` by a value. For example, if `displayedYear` is `2022`, then `changeDisplayedYear(1)` will change `displayedYear` to `2023`.
47+
48+
If `options.override` is set to `true`, then `displayedYear` will be set to `1`.
49+
50+
## `changeDisplayedMonth`
51+
52+
Like `changeDisplayYear`, but change `displayedMonth` instead.
53+
54+
## `getDateCellInfos`
55+
56+
Use this function to get the calendar of the specified `year` and `month`. The default value of `year` and `month` is `displayedYear` and `displayedMonth`.

‎doc-site/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,8 @@
2222
"prism-react-renderer": "^1.3.5",
2323
"react": "^17.0.2",
2424
"react-dom": "^17.0.2",
25-
"react-typist-component": "workspace:*"
25+
"react-typist-component": "workspace:*",
26+
"react-use-calendar-component": "workspace:*"
2627
},
2728
"devDependencies": {
2829
"@docusaurus/module-type-aliases": "2.1.0",

‎package.json‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -39,10 +39,6 @@
3939
},
4040
"pnpm": {
4141
"overrides": {
42-
"@types/react": "^18.0.20",
43-
"@types/react-dom": "^18.0.6",
44-
"react": "^18.2.0",
45-
"react-dom": "^18.2.0",
4642
"vite": "^3.1.3",
4743
"@vitejs/plugin-react": "^2.1.0",
4844
"typescript": "^4.8.3"

‎packages/react-use-calendar-component/README.md‎

Lines changed: 0 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -15,93 +15,3 @@ This package is still under development, the API interface may change frequently
1515
- [ ] Support disabled date
1616
- [ ] Support displaying two calendar
1717
- [ ] Support week, month, year selection
18-
19-
## Examples
20-
21-
- [Single Mode](./src/app/components/Examples/Single.tsx)
22-
- [Multiple Mode](./src/app/components/Examples/Multiple.tsx)
23-
24-
## Install
25-
26-
```sh
27-
npm install react-use-calendar-component
28-
```
29-
30-
## API Reference
31-
32-
```ts
33-
import useCalendarComponent from 'react-use-calendar-component';
34-
35-
const {
36-
selectedDates,
37-
displayedYear,
38-
displayedMonth,
39-
changeDisplayedYear,
40-
changeDisplayedMonth,
41-
getDateCellInfos,
42-
} = useCalendarComponent({ initialDisplayedDate, selectType, value, onChange });
43-
```
44-
45-
### Args
46-
47-
#### `initialDisplayedDate`
48-
49-
This value will be used to generate the date cells at beginning. Its default value is `new Date()`.
50-
51-
#### `selectType`
52-
53-
The selection type of the calendar, currently support `'single' | 'multiple'`. Its default value is `'single'`.
54-
55-
> This option must be set if you don't want to use `single` type.
56-
57-
#### `value`
58-
59-
Set it up to get the full control of the calendar. For `'single'` selection type, the type of this value should be `Date`. For `'multiple'` selection type, the type of this value should be `Date[]`.
60-
61-
#### `onChange`
62-
63-
```ts
64-
type OnChange: (value: Date|Date[]) => void
65-
```
66-
67-
For `single` selection type, the `value` is a `Date` instance. For `multiple` selection type, the `value` is an array of `Date` instances.
68-
69-
### Returns
70-
71-
#### `selectedDates`
72-
73-
An array contains the `Date` instances of all selected date.
74-
75-
#### `displayedYear`
76-
77-
The year of the calendar which should be rendered.
78-
79-
#### `displayedMonth`
80-
81-
The month of the calendar which should be rendered.
82-
83-
#### `changeDisplayedYear`
84-
85-
Call this function to add a value to `displayedYear`.
86-
87-
#### `changeDisplayedMonth`
88-
89-
Call this function to add a value to `displayedMonth`.
90-
91-
#### `getDateCellInfos`
92-
93-
```ts
94-
interface DateCellInfo {
95-
key: string;
96-
year: number;
97-
month: number;
98-
dayOfMonth: number;
99-
dayOfWeek: number;
100-
isToday: boolean;
101-
isSelected: boolean;
102-
monthStatus: 'current' | 'next' | 'previous';
103-
selectThisDate: (options?: SelectDateOptions) => void;
104-
}
105-
```
106-
107-
This function returns an array of `DateCellInfo`. It can be used to render your calendar.

‎packages/react-use-calendar-component/src/app/components/CalendarCell.tsx‎

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,24 +3,35 @@ import type { DateCellInfo } from '../../lib/types';
33
export default function CalendarCell({
44
monthStatus,
55
isSelected,
6+
isExcluded,
67
isToday,
7-
dayOfMonth,
8+
monthDay,
89
selectThisDate,
910
}: DateCellInfo) {
1011
const title = isToday ? 'today' : undefined;
1112
let className = 'rounded-full';
12-
if (monthStatus !== 'current') className = `${className} text-slate-300`;
13-
if (isSelected) className = `${className} bg-green-200 selected`;
14-
if (isToday && !isSelected) className = `${className} bg-amber-200`;
15-
if (!isToday && !isSelected) className = `${className} hover:bg-stone-100`;
13+
if (monthStatus !== 'current' || isExcluded)
14+
className = `${className} text-slate-300`;
15+
16+
// set background color
17+
const decorator = (() => {
18+
if (isSelected) return 'bg-green-200';
19+
if (isToday) return 'bg-amber-200';
20+
if (isExcluded) return 'bg-gray-100 cursor-not-allowed';
21+
return '';
22+
})();
23+
className = `${className} ${decorator}`;
24+
if (!isToday && !isSelected && !isExcluded)
25+
className = `${className} hover:bg-stone-100`;
1626

1727
return (
1828
<button
29+
disabled={isExcluded}
1930
className={`${className} ${monthStatus}`}
2031
onClick={() => selectThisDate()}
2132
type='button'
2233
title={title}>
23-
{dayOfMonth}
34+
{monthDay}
2435
</button>
2536
);
2637
}

‎packages/react-use-calendar-component/src/app/components/Examples/Multiple.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,11 @@ export function Multiple() {
1111
value,
1212
onChange: setValue,
1313
});
14-
const { selectedDates } = calendarControl;
1514

1615
return (
1716
<div>
1817
<Calendar calendarControl={calendarControl} />
19-
<StateInfo value={value} selectedDates={selectedDates} />
18+
<StateInfo value={value} />
2019
</div>
2120
);
2221
}

‎packages/react-use-calendar-component/src/app/components/Examples/Single.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,11 @@ import StateInfo from '../StateInfo';
77
export function Single() {
88
const [value, setValue] = useState(new Date());
99
const calendarControl = useCalendarComponent({ value, onChange: setValue });
10-
const { selectedDates } = calendarControl;
1110

1211
return (
1312
<div>
1413
<Calendar calendarControl={calendarControl} />
15-
<StateInfo value={[value]} selectedDates={selectedDates} />
14+
<StateInfo value={[value]} />
1615
</div>
1716
);
1817
}

0 commit comments

Comments
 (0)