Skip to content

Commit 042ca78

Browse files
jason89521jason89521
committed
feat: use tailwind for development
1 parent 5773b34 commit 042ca78

14 files changed

Lines changed: 1702 additions & 4603 deletions

File tree

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
# React Use Calendar Component
2+
3+
This project is aimed to provide an easy-to-use API interface for those people who want to build their own calendar component with custom style.
4+
5+
## Todo
6+
7+
- [x] Generate 42 date cell information
8+
- [x] Change displayed year/month when selected date is change
9+
- [ ] Support selecting with range
10+
- [ ] Select multiple dates
11+
- [ ] Support disabled date
12+
- [ ] Support displaying two calendar

‎packages/react-use-calendar-component/package.json‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,11 +22,14 @@
2222
"main": "./dist/react-use-calendar-component.umd.cjs",
2323
"module": "./dist/react-use-calendar-component.js",
2424
"devDependencies": {
25-
"react": "^18.2.0",
26-
"react-dom": "^18.2.0",
2725
"@types/react": "^18.0.20",
2826
"@types/react-dom": "^18.0.6",
2927
"@vitejs/plugin-react": "^2.1.0",
28+
"autoprefixer": "^10.4.11",
29+
"postcss": "^8.4.16",
30+
"react": "^18.2.0",
31+
"react-dom": "^18.2.0",
32+
"tailwindcss": "^3.1.8",
3033
"typescript": "^4.8.3",
3134
"vite": "^3.1.3"
3235
},

‎packages/react-use-calendar-component/postcss.config.cjs‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
module.exports = {
2+
plugins: {
3+
tailwindcss: {},
4+
autoprefixer: {},
5+
},
6+
}

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

Lines changed: 41 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,86 +1,71 @@
1-
import { useCalendarComponent } from '../lib';
2-
import { getWeekDayList } from '../lib/utils/locale';
1+
import { useEffect } from 'react';
2+
3+
import useCalendarComponent from '../lib';
4+
import { getWeekDayList, getMonthList } from '../lib/utils/locale';
5+
import LeftArrow from './components/LeftArrow';
6+
import RightArrow from './components/RightArrow';
37

48
const weekDayList = getWeekDayList();
9+
const monthList = getMonthList();
510

611
function App() {
712
const {
813
displayedYear,
914
displayedMonth,
10-
addMonth,
11-
addYear,
15+
selectedDate,
16+
changeDisplayedMonth,
17+
changeDisplayedYear,
1218
getDateCellInfos,
13-
setSelectedDate,
1419
} = useCalendarComponent();
1520

21+
useEffect(() => {
22+
const { year, month, dayOfMonth } = selectedDate;
23+
console.log(new Date(year, month, dayOfMonth).toLocaleString());
24+
}, [selectedDate]);
25+
1626
const dateCells = getDateCellInfos().map(
17-
({ key, year, month, monthStatus, dayOfMonth, isToday, isSelected }) => {
18-
let className = 'c-day-container';
19-
if (monthStatus !== 'current') className = `${className} disabled`;
20-
if (isToday) className = `${className} highlight`;
21-
if (isSelected) className = `${className} highlight-green`;
27+
({ key, monthStatus, dayOfMonth, isToday, isSelected, selectThisDate }) => {
28+
let className = 'rounded-full';
29+
if (monthStatus !== 'current') className = `${className} text-slate-300`;
30+
if (isSelected) className = `${className} bg-green-200`;
31+
if (isToday && !isSelected) className = `${className} bg-amber-200`;
2232

2333
return (
24-
<div
34+
<button
2535
key={key}
2636
className={className}
2737
onClick={() => {
28-
setSelectedDate(
29-
{
30-
year,
31-
month,
32-
dayOfMonth,
33-
},
34-
{ shouldChangePanel: true }
35-
);
38+
selectThisDate({ changeDisplayedValues: true });
3639
}}>
37-
<div className='cdc-day'>
40+
<div className='flex items-center justify-center'>
3841
<span>{dayOfMonth}</span>
3942
</div>
40-
</div>
43+
</button>
4144
);
4245
}
4346
);
4447

4548
return (
46-
<div className='mdp-container'>
47-
<div className='mdpc-head'>
48-
<div className='mdpch-button'>
49-
<div className='mdpchb-inner' onClick={() => addYear(-1)}>
50-
<span className='mdpchbi-left-arrows'></span>
51-
</div>
52-
</div>
53-
<div className='mdpch-button'>
54-
<div className='mdpchb-inner' onClick={() => addMonth(-1)}>
55-
<span className='mdpchbi-left-arrow'></span>
56-
</div>
57-
</div>
58-
<div className='mdpch-container'>
59-
<div className='mdpchc-year'>{displayedYear}</div>
60-
<div className='mdpchc-month'>{displayedMonth + 1}</div>
61-
</div>
62-
<div className='mdpch-button'>
63-
<div className='mdpchb-inner' onClick={() => addMonth(1)}>
64-
<span className='mdpchbi-right-arrow'></span>
65-
</div>
66-
</div>
67-
<div className='mdpch-button' onClick={() => addYear(1)}>
68-
<div className='mdpchb-inner'>
69-
<span className='mdpchbi-right-arrows'></span>
70-
</div>
49+
<div className='bg-white shadow-2xl rounded-3xl p-8 w-[500px]'>
50+
<div className='flex justify-between items-center'>
51+
<LeftArrow arrowAmount={2} onClick={() => changeDisplayedYear(-1)} />
52+
<LeftArrow onClick={() => changeDisplayedMonth(-1)} />
53+
<div className='flex flex-col justify-center items-center'>
54+
<span className='text-lg'>{displayedYear}</span>
55+
<span className='text-sm'>{monthList[displayedMonth]}</span>
7156
</div>
57+
<RightArrow onClick={() => changeDisplayedMonth(1)} />
58+
<RightArrow arrowAmount={2} onClick={() => changeDisplayedYear(1)} />
7259
</div>
73-
<div className='mdpc-body'>
74-
<div className='c-container'>
75-
<div className='cc-head'>
76-
{weekDayList.map((d, i) => (
77-
<div key={i} className='cch-name'>
78-
{d}
79-
</div>
80-
))}
81-
</div>
82-
<div className='cc-body'>{dateCells}</div>
60+
<div className='mt-5'>
61+
<div className='grid grid-cols-7 mb-4'>
62+
{weekDayList.map((d, i) => (
63+
<div key={i} className='flex items-center justify-center'>
64+
{d}
65+
</div>
66+
))}
8367
</div>
68+
<div className='grid grid-cols-7 gap-y-4'>{dateCells}</div>
8469
</div>
8570
</div>
8671
);

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

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
export default function LeftArrow({
2+
arrowAmount = 1,
3+
onClick,
4+
}: {
5+
arrowAmount?: number;
6+
onClick: () => void;
7+
}) {
8+
return (
9+
<button
10+
onClick={onClick}
11+
className='w-10 h-10 flex justify-center items-center'>
12+
{[...Array(arrowAmount)].map((_, index) => (
13+
<div
14+
key={index}
15+
className='w-2 h-2 border-t-2 border-l-2 border-black -rotate-45'
16+
/>
17+
))}
18+
</button>
19+
);
20+
}

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

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
export default function RightArrow({
2+
arrowAmount = 1,
3+
onClick,
4+
}: {
5+
arrowAmount?: number;
6+
onClick: () => void;
7+
}) {
8+
return (
9+
<button
10+
onClick={onClick}
11+
className='w-10 h-10 flex justify-center items-center'>
12+
{[...Array(arrowAmount)].map((_, index) => (
13+
<div
14+
key={index}
15+
className='w-2 h-2 border-t-2 border-r-2 border-black rotate-45'
16+
/>
17+
))}
18+
</button>
19+
);
20+
}

0 commit comments

Comments
 (0)