react-fill-calendar 0.2.1 → 0.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +52 -49
- package/readme.md +41 -86
- package/dist/calendar.css +0 -314
- package/dist/index.css +0 -1
- package/dist/index.js +0 -456
- package/dist/index.umd.cjs +0 -6
package/package.json
CHANGED
|
@@ -1,49 +1,52 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "react-fill-calendar",
|
|
3
|
-
"version": "0.2.
|
|
4
|
-
"description": "Fill dates on a calendar displaying boxes for dates. Customize colors and borders. Perfect for habit tracking or event marking in React applications.",
|
|
5
|
-
"main": "dist/index.umd.cjs",
|
|
6
|
-
"module": "dist/index.js",
|
|
7
|
-
"types": "index.d.ts",
|
|
8
|
-
"type": "module",
|
|
9
|
-
"exports": {
|
|
10
|
-
".": {
|
|
11
|
-
"types": "./index.d.ts",
|
|
12
|
-
"import": "./dist/index.js",
|
|
13
|
-
"require": "./dist/index.umd.cjs"
|
|
14
|
-
}
|
|
15
|
-
},
|
|
16
|
-
"files": [
|
|
17
|
-
"dist",
|
|
18
|
-
"index.d.ts"
|
|
19
|
-
],
|
|
20
|
-
"scripts": {
|
|
21
|
-
"dev": "vite",
|
|
22
|
-
"build
|
|
23
|
-
"
|
|
24
|
-
"
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
"
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
"
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
"
|
|
45
|
-
"
|
|
46
|
-
"
|
|
47
|
-
"
|
|
48
|
-
|
|
49
|
-
|
|
1
|
+
{
|
|
2
|
+
"name": "react-fill-calendar",
|
|
3
|
+
"version": "0.2.2",
|
|
4
|
+
"description": "Fill dates on a calendar displaying boxes for dates. Customize colors and borders. Perfect for habit tracking or event marking in React applications.",
|
|
5
|
+
"main": "dist/index.umd.cjs",
|
|
6
|
+
"module": "dist/index.js",
|
|
7
|
+
"types": "index.d.ts",
|
|
8
|
+
"type": "module",
|
|
9
|
+
"exports": {
|
|
10
|
+
".": {
|
|
11
|
+
"types": "./index.d.ts",
|
|
12
|
+
"import": "./dist/index.js",
|
|
13
|
+
"require": "./dist/index.umd.cjs"
|
|
14
|
+
}
|
|
15
|
+
},
|
|
16
|
+
"files": [
|
|
17
|
+
"dist",
|
|
18
|
+
"index.d.ts"
|
|
19
|
+
],
|
|
20
|
+
"scripts": {
|
|
21
|
+
"dev": "vite",
|
|
22
|
+
"build": "vite build",
|
|
23
|
+
"preview": "vite preview",
|
|
24
|
+
"test": "echo \"Error: no test specified\" && exit 1"
|
|
25
|
+
},
|
|
26
|
+
"keywords": [
|
|
27
|
+
"react",
|
|
28
|
+
"calendar",
|
|
29
|
+
"components"
|
|
30
|
+
],
|
|
31
|
+
"author": "Robert Foley",
|
|
32
|
+
"license": "MIT",
|
|
33
|
+
"peerDependencies": {
|
|
34
|
+
"react": ">=17.0.0 <20.0.0",
|
|
35
|
+
"react-dom": ">=17.0.0 <20.0.0"
|
|
36
|
+
},
|
|
37
|
+
"repository": {
|
|
38
|
+
"type": "git",
|
|
39
|
+
"url": "https://github.com/apmanager001/react-fill-calendar"
|
|
40
|
+
},
|
|
41
|
+
"devDependencies": {
|
|
42
|
+
"@tailwindcss/postcss": "^4.1.18",
|
|
43
|
+
"@vitejs/plugin-react": "^5.1.2",
|
|
44
|
+
"autoprefixer": "^10.4.24",
|
|
45
|
+
"daisyui": "^5.5.16",
|
|
46
|
+
"postcss": "^8.5.6",
|
|
47
|
+
"react": ">=17.0.0 <20.0.0",
|
|
48
|
+
"react-dom": ">=17.0.0 <20.0.0",
|
|
49
|
+
"tailwindcss": "^4.1.18",
|
|
50
|
+
"vite": "^7.3.1"
|
|
51
|
+
}
|
|
52
|
+
}
|
package/readme.md
CHANGED
|
@@ -3,17 +3,17 @@
|
|
|
3
3
|
|
|
4
4
|
# React Filled Calendar
|
|
5
5
|
|
|
6
|
-
A lightweight, customizable React calendar component that automatically fills and highlights dates passed in as props. Designed for simplicity, reusability, and easy styling with
|
|
6
|
+
A lightweight, customizable React calendar component that automatically fills and highlights dates passed in as props. Designed for simplicity, reusability, and easy styling with Tailwind and DaisyUI.
|
|
7
7
|
|
|
8
8
|
---
|
|
9
9
|
|
|
10
10
|
## 🚀 Features
|
|
11
11
|
|
|
12
|
-
- Pass in an array of dates to automatically fill or highlight them
|
|
13
|
-
-
|
|
14
|
-
- Built with React
|
|
15
|
-
- Easily styled with
|
|
16
|
-
- Ideal for dashboards, planners, journals, and scheduling tools
|
|
12
|
+
- Pass in an array of dates to automatically fill or highlight them
|
|
13
|
+
- Fully responsive layout
|
|
14
|
+
- Built with React
|
|
15
|
+
- Easily styled with TailwindCSS + DaisyUI
|
|
16
|
+
- Ideal for dashboards, planners, journals, and scheduling tools
|
|
17
17
|
- Added hrefs to selected dates by passing href key shown in example
|
|
18
18
|
|
|
19
19
|
---
|
|
@@ -31,13 +31,14 @@ A lightweight, customizable React calendar component that automatically fills an
|
|
|
31
31
|
</div>
|
|
32
32
|
</div>
|
|
33
33
|
|
|
34
|
-
|
|
34
|
+
|
|
35
|
+
```
|
|
35
36
|
import Calendar from 'react-fill-calendar'
|
|
36
37
|
|
|
37
38
|
const Calendar = () => {
|
|
38
39
|
return (
|
|
39
40
|
<div>
|
|
40
|
-
<Calendar
|
|
41
|
+
<Calendar
|
|
41
42
|
fillingColor = "#50C878",
|
|
42
43
|
borderfillColor = "#27592D",
|
|
43
44
|
hoverborderColor = "#FFCCCB",
|
|
@@ -56,81 +57,35 @@ A lightweight, customizable React calendar component that automatically fills an
|
|
|
56
57
|
day: '2026-1-15',
|
|
57
58
|
},
|
|
58
59
|
],
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
import 'react-fill-calendar/dist/calendar.css';
|
|
92
|
-
import Calendar from 'react-fill-calendar';
|
|
93
|
-
|
|
94
|
-
export default function App() {
|
|
95
|
-
return <Calendar />;
|
|
96
|
-
}
|
|
97
|
-
```
|
|
98
|
-
|
|
99
|
-
Notes:
|
|
100
|
-
- The CSS is namespaced under the `.fc-` prefix and rooted at `.fc-calendar` to reduce collisions with utility frameworks like Tailwind.
|
|
101
|
-
- If you prefer to import source CSS directly, you can import `src/comp/calendar.css` and `src/comp/dayCell.css`, but publishing `dist/calendar.css` is the recommended, stable approach.
|
|
102
|
-
|
|
103
|
-
### Example
|
|
104
|
-
|
|
105
|
-
<div style="display: flex; gap: 20px; justify-content: center;">
|
|
106
|
-
<div style="display: flex; justify-content: space-around"> <img src="https://github.com/apmanager001/react-fill-calendar/blob/main/assets/calendar.png?raw=true" width="300" alt='image of component'/>
|
|
107
|
-
</div>
|
|
108
|
-
<div style="display: flex; justify-content: space-around"> <img src="https://github.com/apmanager001/react-fill-calendar/blob/main/assets/calendar2.png?raw=true" width="300" alt='image of component'/>
|
|
109
|
-
</div>
|
|
110
|
-
</div>
|
|
111
|
-
|
|
112
|
-
```
|
|
113
|
-
import Calendar from 'react-fill-calendar'
|
|
114
|
-
|
|
115
|
-
const Example = () => {
|
|
116
|
-
return (
|
|
117
|
-
<div>
|
|
118
|
-
<Calendar
|
|
119
|
-
fillingColor="#50C878"
|
|
120
|
-
borderfillColor="#27592D"
|
|
121
|
-
hoverborderColor="#FFCCCB"
|
|
122
|
-
cellBorderColor="#808080"
|
|
123
|
-
cellColor="#ADADAD"
|
|
124
|
-
legend={true}
|
|
125
|
-
mainBorder={true}
|
|
126
|
-
borderColor="#708090"
|
|
127
|
-
textColor="#708090"
|
|
128
|
-
selectedDates={[{ day: '2026-01-13', href: '/habit/1234565' }, { day: '2026-01-15' }]}
|
|
129
|
-
title="Calendar"
|
|
130
|
-
/>
|
|
131
|
-
</div>
|
|
132
|
-
)
|
|
133
|
-
}
|
|
134
|
-
|
|
135
|
-
export default Example
|
|
136
|
-
```
|
|
60
|
+
title = "Calendar"
|
|
61
|
+
/>
|
|
62
|
+
</div>
|
|
63
|
+
)
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
export default Calendar
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
|
|
70
|
+
|
|
71
|
+
|
|
72
|
+
|
|
73
|
+
|
|
74
|
+
## Props
|
|
75
|
+
|
|
76
|
+
| Prop | Type | Required | Default | Options | Description |
|
|
77
|
+
|-------------------|------------|----------|-------------|------------------------|-------------|
|
|
78
|
+
| `fillingColor` | `string` | No | `"#50C878"` | — | Background color used to fill selected or marked dates. |
|
|
79
|
+
| `borderfillColor` | `string` | No | `"#27592D"` | — | Border color applied to filled date cells. |
|
|
80
|
+
| `title` | `string` | No | `"Calendar"` | — | Title displayed above the calendar. |
|
|
81
|
+
| `hoverborderColor` | `string` | No | `"#FFCCCB"` | — | Border color applied when hovering over a date cell. |
|
|
82
|
+
| `cellColor` | `string` | No | `"#ADADAD"` | — | Background color for unfilled date cells. |
|
|
83
|
+
| `cellBorderColor` | `string` | No | `"#808080"` | — | Border color for unfilled date cells. |
|
|
84
|
+
| `mainBorder` | `boolean` | No | `true` | — | Removes border and shadow for the calendar. |
|
|
85
|
+
| `borderColor` | `string` | No | `"#708090"` | — | Changes color of the calendar border. |
|
|
86
|
+
| `text color` | `string` | No | `"#708090"` | — | Changes color of text in legend. |
|
|
87
|
+
| `selectedDates` | `array` | No | `[]` | — | Array of dates passed to fill in the cooresponding cell. Currently it requires an object for each day with "day" as the key as shown in example. The format of the day should be yyyy-mm-dd as a string |
|
|
88
|
+
| `cellShape` | `string` | No | `"square"` | `"square"`, `"circle"` | Shape of each calendar cell. |
|
|
89
|
+
| `column` | `number` | No | `15` | — | Number of cells in each row |
|
|
90
|
+
| `legendColumn` | `boolean` | No | `false` | — | Changes orientation of legend from row to column |
|
|
91
|
+
| `legend` | `boolean` | No | `true` | — | Toggles the display of the legend explaining filled vs. unfilled dates. |
|
package/dist/calendar.css
DELETED
|
@@ -1,314 +0,0 @@
|
|
|
1
|
-
/* Calendar layout (replaces Tailwind utilities) */
|
|
2
|
-
.fc-calendar {
|
|
3
|
-
display: inline-flex;
|
|
4
|
-
flex-direction: column;
|
|
5
|
-
gap: 8px;
|
|
6
|
-
padding: 12px;
|
|
7
|
-
border-radius: 12px;
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
.fc-main-border {
|
|
11
|
-
border: 1px solid;
|
|
12
|
-
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
.fc-legend {
|
|
16
|
-
display: flex;
|
|
17
|
-
justify-content: space-between;
|
|
18
|
-
align-items: center;
|
|
19
|
-
font-size: 0.875rem;
|
|
20
|
-
gap: 4px;
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
.fc-legend-col {
|
|
24
|
-
display: flex;
|
|
25
|
-
flex-direction: column;
|
|
26
|
-
align-items: flex-start;
|
|
27
|
-
gap: 4px;
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
.fc-legend-indicator {
|
|
31
|
-
display: flex;
|
|
32
|
-
align-items: center;
|
|
33
|
-
gap: 4px;
|
|
34
|
-
font-weight: 600;
|
|
35
|
-
}
|
|
36
|
-
.fc-color-box {
|
|
37
|
-
position: relative;
|
|
38
|
-
width: 16px;
|
|
39
|
-
height: 16px;
|
|
40
|
-
box-sizing: border-box;
|
|
41
|
-
}
|
|
42
|
-
.fc-rainbow {
|
|
43
|
-
position: absolute;
|
|
44
|
-
inset: 0;
|
|
45
|
-
border-radius: 50%;
|
|
46
|
-
z-index: 0;
|
|
47
|
-
}
|
|
48
|
-
.fc-color-inner {
|
|
49
|
-
position: absolute;
|
|
50
|
-
inset: 2px;
|
|
51
|
-
display: flex;
|
|
52
|
-
align-items: center;
|
|
53
|
-
justify-content: center;
|
|
54
|
-
box-sizing: border-box;
|
|
55
|
-
z-index: 1;
|
|
56
|
-
}
|
|
57
|
-
.fc-base-button {
|
|
58
|
-
width: 16px;
|
|
59
|
-
height: 16px;
|
|
60
|
-
border: 2px solid transparent;
|
|
61
|
-
box-sizing: border-box;
|
|
62
|
-
border-radius: 50%;
|
|
63
|
-
background-clip: padding-box;
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
.fc-rounded-square {
|
|
67
|
-
border-radius: 6px;
|
|
68
|
-
}
|
|
69
|
-
.fc-rounded-circle {
|
|
70
|
-
border-radius: 9999px;
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
.fc-legend-completed {
|
|
74
|
-
display: flex;
|
|
75
|
-
align-items: center;
|
|
76
|
-
gap: 4px;
|
|
77
|
-
font-weight: 600;
|
|
78
|
-
}
|
|
79
|
-
.fc-legend-completed .fc-base-button {
|
|
80
|
-
width: 16px;
|
|
81
|
-
height: 16px;
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
.fc-rows {
|
|
85
|
-
display: flex;
|
|
86
|
-
flex-direction: column;
|
|
87
|
-
gap: 4px;
|
|
88
|
-
}
|
|
89
|
-
.fc-row {
|
|
90
|
-
display: flex;
|
|
91
|
-
gap: 4px;
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
/* keep rainbow animation available for legend */
|
|
95
|
-
@keyframes rainbow-spin {
|
|
96
|
-
from {
|
|
97
|
-
transform: rotate(0deg);
|
|
98
|
-
}
|
|
99
|
-
to {
|
|
100
|
-
transform: rotate(360deg);
|
|
101
|
-
}
|
|
102
|
-
}
|
|
103
|
-
.rainbow-spin {
|
|
104
|
-
animation: rainbow-spin 4s linear infinite;
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
/* Tooltip styles (replace DaisyUI tooltip) */
|
|
108
|
-
.fc-tooltip {
|
|
109
|
-
position: relative;
|
|
110
|
-
display: inline-flex;
|
|
111
|
-
align-items: center;
|
|
112
|
-
justify-content: center;
|
|
113
|
-
}
|
|
114
|
-
.fc-tooltip-text {
|
|
115
|
-
position: absolute;
|
|
116
|
-
z-index: 50;
|
|
117
|
-
white-space: nowrap;
|
|
118
|
-
background: rgba(32, 32, 32, 0.95);
|
|
119
|
-
color: #fff;
|
|
120
|
-
padding: 6px 8px;
|
|
121
|
-
border-radius: 6px;
|
|
122
|
-
font-size: 0.75rem;
|
|
123
|
-
line-height: 1;
|
|
124
|
-
transform-origin: center;
|
|
125
|
-
opacity: 0;
|
|
126
|
-
visibility: hidden;
|
|
127
|
-
transition:
|
|
128
|
-
opacity 120ms ease,
|
|
129
|
-
transform 120ms ease,
|
|
130
|
-
visibility 120ms;
|
|
131
|
-
pointer-events: none;
|
|
132
|
-
}
|
|
133
|
-
|
|
134
|
-
.fc-tooltip:hover .fc-tooltip-text {
|
|
135
|
-
opacity: 1;
|
|
136
|
-
visibility: visible;
|
|
137
|
-
pointer-events: auto;
|
|
138
|
-
}
|
|
139
|
-
|
|
140
|
-
/* top (default) */
|
|
141
|
-
.fc-tooltip-top .fc-tooltip-text {
|
|
142
|
-
bottom: 100%;
|
|
143
|
-
left: 50%;
|
|
144
|
-
transform: translate(-50%, -6px) scale(0.95);
|
|
145
|
-
}
|
|
146
|
-
.fc-tooltip-top:hover .fc-tooltip-text {
|
|
147
|
-
transform: translate(-50%, -8px) scale(1);
|
|
148
|
-
}
|
|
149
|
-
|
|
150
|
-
/* bottom */
|
|
151
|
-
.fc-tooltip-bottom .fc-tooltip-text {
|
|
152
|
-
top: 100%;
|
|
153
|
-
left: 50%;
|
|
154
|
-
transform: translate(-50%, 6px) scale(0.95);
|
|
155
|
-
}
|
|
156
|
-
.fc-tooltip-bottom:hover .fc-tooltip-text {
|
|
157
|
-
transform: translate(-50%, 8px) scale(1);
|
|
158
|
-
}
|
|
159
|
-
|
|
160
|
-
/* left */
|
|
161
|
-
.fc-tooltip-left .fc-tooltip-text {
|
|
162
|
-
right: 100%;
|
|
163
|
-
top: 50%;
|
|
164
|
-
transform: translate(-6px, -50%) scale(0.95);
|
|
165
|
-
}
|
|
166
|
-
.fc-tooltip-left:hover .fc-tooltip-text {
|
|
167
|
-
transform: translate(-8px, -50%) scale(1);
|
|
168
|
-
}
|
|
169
|
-
|
|
170
|
-
/* right */
|
|
171
|
-
.fc-tooltip-right .fc-tooltip-text {
|
|
172
|
-
left: 100%;
|
|
173
|
-
top: 50%;
|
|
174
|
-
transform: translate(6px, -50%) scale(0.95);
|
|
175
|
-
}
|
|
176
|
-
.fc-tooltip-right:hover .fc-tooltip-text {
|
|
177
|
-
transform: translate(8px, -50%) scale(1);
|
|
178
|
-
}
|
|
179
|
-
|
|
180
|
-
/* small arrow using pseudo-element */
|
|
181
|
-
.fc-tooltip-text::after {
|
|
182
|
-
content: "";
|
|
183
|
-
position: absolute;
|
|
184
|
-
width: 8px;
|
|
185
|
-
height: 8px;
|
|
186
|
-
background: rgba(32, 32, 32, 0.95);
|
|
187
|
-
transform: rotate(45deg);
|
|
188
|
-
}
|
|
189
|
-
.fc-tooltip-top .fc-tooltip-text::after {
|
|
190
|
-
left: 50%;
|
|
191
|
-
bottom: -4px;
|
|
192
|
-
transform: translateX(-50%) rotate(45deg);
|
|
193
|
-
}
|
|
194
|
-
.fc-tooltip-bottom .fc-tooltip-text::after {
|
|
195
|
-
left: 50%;
|
|
196
|
-
top: -4px;
|
|
197
|
-
transform: translateX(-50%) rotate(45deg);
|
|
198
|
-
}
|
|
199
|
-
.fc-tooltip-left .fc-tooltip-text::after {
|
|
200
|
-
right: -4px;
|
|
201
|
-
top: 50%;
|
|
202
|
-
transform: translateY(-50%) rotate(45deg);
|
|
203
|
-
}
|
|
204
|
-
.fc-tooltip-right .fc-tooltip-text::after {
|
|
205
|
-
left: -4px;
|
|
206
|
-
top: 50%;
|
|
207
|
-
transform: translateY(-50%) rotate(45deg);
|
|
208
|
-
}
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
/* Day cell styles to replace Tailwind utilities */
|
|
212
|
-
.fc-day-button {
|
|
213
|
-
display: flex;
|
|
214
|
-
align-items: center;
|
|
215
|
-
justify-content: center;
|
|
216
|
-
width: 16px;
|
|
217
|
-
height: 16px;
|
|
218
|
-
border: 2px solid var(--border-color, transparent);
|
|
219
|
-
transition:
|
|
220
|
-
transform 0.15s ease,
|
|
221
|
-
border-color 0.15s ease;
|
|
222
|
-
background: transparent;
|
|
223
|
-
}
|
|
224
|
-
|
|
225
|
-
.fc-day-button:hover {
|
|
226
|
-
transform: scale(1.5);
|
|
227
|
-
}
|
|
228
|
-
.fc-cursor-pointer {
|
|
229
|
-
cursor: pointer;
|
|
230
|
-
}
|
|
231
|
-
.fc-rounded-square {
|
|
232
|
-
border-radius: 6px;
|
|
233
|
-
}
|
|
234
|
-
.fc-rounded-circle {
|
|
235
|
-
border-radius: 9999px;
|
|
236
|
-
}
|
|
237
|
-
.fc-full {
|
|
238
|
-
width: 100%;
|
|
239
|
-
height: 100%;
|
|
240
|
-
}
|
|
241
|
-
|
|
242
|
-
.fc-today-wrap {
|
|
243
|
-
position: relative;
|
|
244
|
-
width: 16px;
|
|
245
|
-
height: 16px;
|
|
246
|
-
box-sizing: border-box;
|
|
247
|
-
}
|
|
248
|
-
|
|
249
|
-
.fc-today-inner {
|
|
250
|
-
position: absolute;
|
|
251
|
-
/* inset: 2px; */
|
|
252
|
-
display: flex;
|
|
253
|
-
align-items: center;
|
|
254
|
-
height: 16px;
|
|
255
|
-
width: 16px;
|
|
256
|
-
justify-content: center;
|
|
257
|
-
box-sizing: border-box;
|
|
258
|
-
z-index: 1;
|
|
259
|
-
}
|
|
260
|
-
|
|
261
|
-
.today-cell-btn {
|
|
262
|
-
border-color: transparent;
|
|
263
|
-
}
|
|
264
|
-
.today-cell-btn:hover {
|
|
265
|
-
border-color: var(--border-fill-color);
|
|
266
|
-
}
|
|
267
|
-
.hover-border-var:hover {
|
|
268
|
-
border-color: var(--hover-border-color);
|
|
269
|
-
}
|
|
270
|
-
.hover-border-var {
|
|
271
|
-
border-color: var(--border-color, transparent);
|
|
272
|
-
}
|
|
273
|
-
|
|
274
|
-
@keyframes rainbow-spin {
|
|
275
|
-
from {
|
|
276
|
-
transform: rotate(0deg);
|
|
277
|
-
}
|
|
278
|
-
to {
|
|
279
|
-
transform: rotate(360deg);
|
|
280
|
-
}
|
|
281
|
-
}
|
|
282
|
-
.rainbow-spin {
|
|
283
|
-
animation: rainbow-spin 4s linear infinite;
|
|
284
|
-
}
|
|
285
|
-
|
|
286
|
-
/* ensure rainbow sits behind and inner button/border is transparent */
|
|
287
|
-
.fc-today-wrap .fc-rainbow {
|
|
288
|
-
z-index: 0;
|
|
289
|
-
border-radius: 50%;
|
|
290
|
-
}
|
|
291
|
-
.fc-today-wrap .fc-today-inner {
|
|
292
|
-
z-index: 1;
|
|
293
|
-
}
|
|
294
|
-
.fc-today-inner .fc-day-button {
|
|
295
|
-
width: 100%;
|
|
296
|
-
height: 100%;
|
|
297
|
-
border: 2px solid transparent;
|
|
298
|
-
border-radius: 50%;
|
|
299
|
-
box-sizing: border-box;
|
|
300
|
-
background-clip: padding-box;
|
|
301
|
-
}
|
|
302
|
-
|
|
303
|
-
/* small helper to allow full-size content */
|
|
304
|
-
.fc-full {
|
|
305
|
-
width: 100%;
|
|
306
|
-
height: 100%;
|
|
307
|
-
}
|
|
308
|
-
|
|
309
|
-
/* box-sizing reset for predictable sizing inside cells */
|
|
310
|
-
.fc-day-button,
|
|
311
|
-
.fc-today-inner,
|
|
312
|
-
.fc-color-inner {
|
|
313
|
-
box-sizing: border-box;
|
|
314
|
-
}
|
package/dist/index.css
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
.fc-day-button{display:flex;align-items:center;justify-content:center;width:16px;height:16px;border:2px solid var(--border-color, transparent);transition:transform .15s ease,border-color .15s ease;background:transparent}.fc-day-button:hover{transform:scale(1.5)}.fc-cursor-pointer{cursor:pointer}.fc-today-wrap{position:relative;width:16px;height:16px;box-sizing:border-box}.fc-today-inner{position:absolute;display:flex;align-items:center;height:16px;width:16px;justify-content:center;box-sizing:border-box;z-index:1}.today-cell-btn{border-color:transparent}.today-cell-btn:hover{border-color:var(--border-fill-color)}.hover-border-var:hover{border-color:var(--hover-border-color)}.hover-border-var{border-color:var(--border-color, transparent)}.fc-today-wrap .fc-rainbow{z-index:0;border-radius:50%}.fc-today-wrap .fc-today-inner{z-index:1}.fc-today-inner .fc-day-button{width:100%;height:100%;border:2px solid transparent;border-radius:50%;box-sizing:border-box;background-clip:padding-box}.fc-full{width:100%;height:100%}.fc-day-button,.fc-today-inner,.fc-color-inner{box-sizing:border-box}.fc-calendar{display:inline-flex;flex-direction:column;gap:8px;padding:12px;border-radius:12px}.fc-main-border{border:1px solid;box-shadow:0 1px 2px #0000000d}.fc-legend{display:flex;justify-content:space-between;align-items:center;font-size:.875rem;gap:4px}.fc-legend-col{display:flex;flex-direction:column;align-items:flex-start;gap:4px}.fc-legend-indicator{display:flex;align-items:center;gap:4px;font-weight:600}.fc-color-box{position:relative;width:16px;height:16px;box-sizing:border-box}.fc-rainbow{position:absolute;inset:0;border-radius:50%;z-index:0}.fc-color-inner{position:absolute;inset:2px;display:flex;align-items:center;justify-content:center;box-sizing:border-box;z-index:1}.fc-base-button{width:16px;height:16px;border:2px solid transparent;box-sizing:border-box;border-radius:50%;background-clip:padding-box}.fc-rounded-square{border-radius:6px}.fc-rounded-circle{border-radius:9999px}.fc-legend-completed{display:flex;align-items:center;gap:4px;font-weight:600}.fc-legend-completed .fc-base-button{width:16px;height:16px}.fc-rows{display:flex;flex-direction:column;gap:4px}.fc-row{display:flex;gap:4px}@keyframes rainbow-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.rainbow-spin{animation:rainbow-spin 4s linear infinite}.fc-tooltip{position:relative;display:inline-flex;align-items:center;justify-content:center}.fc-tooltip-text{position:absolute;z-index:50;white-space:nowrap;background:#202020f2;color:#fff;padding:6px 8px;border-radius:6px;font-size:.75rem;line-height:1;transform-origin:center;opacity:0;visibility:hidden;transition:opacity .12s ease,transform .12s ease,visibility .12s;pointer-events:none}.fc-tooltip:hover .fc-tooltip-text{opacity:1;visibility:visible;pointer-events:auto}.fc-tooltip-top .fc-tooltip-text{bottom:100%;left:50%;transform:translate(-50%,-6px) scale(.95)}.fc-tooltip-top:hover .fc-tooltip-text{transform:translate(-50%,-8px) scale(1)}.fc-tooltip-bottom .fc-tooltip-text{top:100%;left:50%;transform:translate(-50%,6px) scale(.95)}.fc-tooltip-bottom:hover .fc-tooltip-text{transform:translate(-50%,8px) scale(1)}.fc-tooltip-left .fc-tooltip-text{right:100%;top:50%;transform:translate(-6px,-50%) scale(.95)}.fc-tooltip-left:hover .fc-tooltip-text{transform:translate(-8px,-50%) scale(1)}.fc-tooltip-right .fc-tooltip-text{left:100%;top:50%;transform:translate(6px,-50%) scale(.95)}.fc-tooltip-right:hover .fc-tooltip-text{transform:translate(8px,-50%) scale(1)}.fc-tooltip-text:after{content:"";position:absolute;width:8px;height:8px;background:#202020f2;transform:rotate(45deg)}.fc-tooltip-top .fc-tooltip-text:after{left:50%;bottom:-4px;transform:translate(-50%) rotate(45deg)}.fc-tooltip-bottom .fc-tooltip-text:after{left:50%;top:-4px;transform:translate(-50%) rotate(45deg)}.fc-tooltip-left .fc-tooltip-text:after{right:-4px;top:50%;transform:translateY(-50%) rotate(45deg)}.fc-tooltip-right .fc-tooltip-text:after{left:-4px;top:50%;transform:translateY(-50%) rotate(45deg)}
|
package/dist/index.js
DELETED
|
@@ -1,456 +0,0 @@
|
|
|
1
|
-
import re, { useMemo as B } from "react";
|
|
2
|
-
var M = { exports: {} }, D = {};
|
|
3
|
-
var H;
|
|
4
|
-
function te() {
|
|
5
|
-
if (H) return D;
|
|
6
|
-
H = 1;
|
|
7
|
-
var l = /* @__PURE__ */ Symbol.for("react.transitional.element"), g = /* @__PURE__ */ Symbol.for("react.fragment");
|
|
8
|
-
function p(E, f, u) {
|
|
9
|
-
var d = null;
|
|
10
|
-
if (u !== void 0 && (d = "" + u), f.key !== void 0 && (d = "" + f.key), "key" in f) {
|
|
11
|
-
u = {};
|
|
12
|
-
for (var R in f)
|
|
13
|
-
R !== "key" && (u[R] = f[R]);
|
|
14
|
-
} else u = f;
|
|
15
|
-
return f = u.ref, {
|
|
16
|
-
$$typeof: l,
|
|
17
|
-
type: E,
|
|
18
|
-
key: d,
|
|
19
|
-
ref: f !== void 0 ? f : null,
|
|
20
|
-
props: u
|
|
21
|
-
};
|
|
22
|
-
}
|
|
23
|
-
return D.Fragment = g, D.jsx = p, D.jsxs = p, D;
|
|
24
|
-
}
|
|
25
|
-
var Y = {};
|
|
26
|
-
var Z;
|
|
27
|
-
function ne() {
|
|
28
|
-
return Z || (Z = 1, process.env.NODE_ENV !== "production" && (function() {
|
|
29
|
-
function l(e) {
|
|
30
|
-
if (e == null) return null;
|
|
31
|
-
if (typeof e == "function")
|
|
32
|
-
return e.$$typeof === T ? null : e.displayName || e.name || null;
|
|
33
|
-
if (typeof e == "string") return e;
|
|
34
|
-
switch (e) {
|
|
35
|
-
case A:
|
|
36
|
-
return "Fragment";
|
|
37
|
-
case P:
|
|
38
|
-
return "Profiler";
|
|
39
|
-
case v:
|
|
40
|
-
return "StrictMode";
|
|
41
|
-
case y:
|
|
42
|
-
return "Suspense";
|
|
43
|
-
case _:
|
|
44
|
-
return "SuspenseList";
|
|
45
|
-
case m:
|
|
46
|
-
return "Activity";
|
|
47
|
-
}
|
|
48
|
-
if (typeof e == "object")
|
|
49
|
-
switch (typeof e.tag == "number" && console.error(
|
|
50
|
-
"Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
|
|
51
|
-
), e.$$typeof) {
|
|
52
|
-
case O:
|
|
53
|
-
return "Portal";
|
|
54
|
-
case I:
|
|
55
|
-
return e.displayName || "Context";
|
|
56
|
-
case C:
|
|
57
|
-
return (e._context.displayName || "Context") + ".Consumer";
|
|
58
|
-
case i:
|
|
59
|
-
var r = e.render;
|
|
60
|
-
return e = e.displayName, e || (e = r.displayName || r.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
|
|
61
|
-
case n:
|
|
62
|
-
return r = e.displayName || null, r !== null ? r : l(e.type) || "Memo";
|
|
63
|
-
case c:
|
|
64
|
-
r = e._payload, e = e._init;
|
|
65
|
-
try {
|
|
66
|
-
return l(e(r));
|
|
67
|
-
} catch {
|
|
68
|
-
}
|
|
69
|
-
}
|
|
70
|
-
return null;
|
|
71
|
-
}
|
|
72
|
-
function g(e) {
|
|
73
|
-
return "" + e;
|
|
74
|
-
}
|
|
75
|
-
function p(e) {
|
|
76
|
-
try {
|
|
77
|
-
g(e);
|
|
78
|
-
var r = !1;
|
|
79
|
-
} catch {
|
|
80
|
-
r = !0;
|
|
81
|
-
}
|
|
82
|
-
if (r) {
|
|
83
|
-
r = console;
|
|
84
|
-
var o = r.error, a = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
|
|
85
|
-
return o.call(
|
|
86
|
-
r,
|
|
87
|
-
"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
|
|
88
|
-
a
|
|
89
|
-
), g(e);
|
|
90
|
-
}
|
|
91
|
-
}
|
|
92
|
-
function E(e) {
|
|
93
|
-
if (e === A) return "<>";
|
|
94
|
-
if (typeof e == "object" && e !== null && e.$$typeof === c)
|
|
95
|
-
return "<...>";
|
|
96
|
-
try {
|
|
97
|
-
var r = l(e);
|
|
98
|
-
return r ? "<" + r + ">" : "<...>";
|
|
99
|
-
} catch {
|
|
100
|
-
return "<...>";
|
|
101
|
-
}
|
|
102
|
-
}
|
|
103
|
-
function f() {
|
|
104
|
-
var e = b.A;
|
|
105
|
-
return e === null ? null : e.getOwner();
|
|
106
|
-
}
|
|
107
|
-
function u() {
|
|
108
|
-
return Error("react-stack-top-frame");
|
|
109
|
-
}
|
|
110
|
-
function d(e) {
|
|
111
|
-
if (F.call(e, "key")) {
|
|
112
|
-
var r = Object.getOwnPropertyDescriptor(e, "key").get;
|
|
113
|
-
if (r && r.isReactWarning) return !1;
|
|
114
|
-
}
|
|
115
|
-
return e.key !== void 0;
|
|
116
|
-
}
|
|
117
|
-
function R(e, r) {
|
|
118
|
-
function o() {
|
|
119
|
-
z || (z = !0, console.error(
|
|
120
|
-
"%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
|
|
121
|
-
r
|
|
122
|
-
));
|
|
123
|
-
}
|
|
124
|
-
o.isReactWarning = !0, Object.defineProperty(e, "key", {
|
|
125
|
-
get: o,
|
|
126
|
-
configurable: !0
|
|
127
|
-
});
|
|
128
|
-
}
|
|
129
|
-
function S() {
|
|
130
|
-
var e = l(this.type);
|
|
131
|
-
return J[e] || (J[e] = !0, console.error(
|
|
132
|
-
"Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
|
|
133
|
-
)), e = this.props.ref, e !== void 0 ? e : null;
|
|
134
|
-
}
|
|
135
|
-
function k(e, r, o, a, L, U) {
|
|
136
|
-
var s = o.ref;
|
|
137
|
-
return e = {
|
|
138
|
-
$$typeof: j,
|
|
139
|
-
type: e,
|
|
140
|
-
key: r,
|
|
141
|
-
props: o,
|
|
142
|
-
_owner: a
|
|
143
|
-
}, (s !== void 0 ? s : null) !== null ? Object.defineProperty(e, "ref", {
|
|
144
|
-
enumerable: !1,
|
|
145
|
-
get: S
|
|
146
|
-
}) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
|
|
147
|
-
configurable: !1,
|
|
148
|
-
enumerable: !1,
|
|
149
|
-
writable: !0,
|
|
150
|
-
value: 0
|
|
151
|
-
}), Object.defineProperty(e, "_debugInfo", {
|
|
152
|
-
configurable: !1,
|
|
153
|
-
enumerable: !1,
|
|
154
|
-
writable: !0,
|
|
155
|
-
value: null
|
|
156
|
-
}), Object.defineProperty(e, "_debugStack", {
|
|
157
|
-
configurable: !1,
|
|
158
|
-
enumerable: !1,
|
|
159
|
-
writable: !0,
|
|
160
|
-
value: L
|
|
161
|
-
}), Object.defineProperty(e, "_debugTask", {
|
|
162
|
-
configurable: !1,
|
|
163
|
-
enumerable: !1,
|
|
164
|
-
writable: !0,
|
|
165
|
-
value: U
|
|
166
|
-
}), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
|
|
167
|
-
}
|
|
168
|
-
function w(e, r, o, a, L, U) {
|
|
169
|
-
var s = r.children;
|
|
170
|
-
if (s !== void 0)
|
|
171
|
-
if (a)
|
|
172
|
-
if (K(s)) {
|
|
173
|
-
for (a = 0; a < s.length; a++)
|
|
174
|
-
h(s[a]);
|
|
175
|
-
Object.freeze && Object.freeze(s);
|
|
176
|
-
} else
|
|
177
|
-
console.error(
|
|
178
|
-
"React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
|
|
179
|
-
);
|
|
180
|
-
else h(s);
|
|
181
|
-
if (F.call(r, "key")) {
|
|
182
|
-
s = l(e);
|
|
183
|
-
var $ = Object.keys(r).filter(function(ee) {
|
|
184
|
-
return ee !== "key";
|
|
185
|
-
});
|
|
186
|
-
a = 0 < $.length ? "{key: someKey, " + $.join(": ..., ") + ": ...}" : "{key: someKey}", X[s + a] || ($ = 0 < $.length ? "{" + $.join(": ..., ") + ": ...}" : "{}", console.error(
|
|
187
|
-
`A props object containing a "key" prop is being spread into JSX:
|
|
188
|
-
let props = %s;
|
|
189
|
-
<%s {...props} />
|
|
190
|
-
React keys must be passed directly to JSX without using spread:
|
|
191
|
-
let props = %s;
|
|
192
|
-
<%s key={someKey} {...props} />`,
|
|
193
|
-
a,
|
|
194
|
-
s,
|
|
195
|
-
$,
|
|
196
|
-
s
|
|
197
|
-
), X[s + a] = !0);
|
|
198
|
-
}
|
|
199
|
-
if (s = null, o !== void 0 && (p(o), s = "" + o), d(r) && (p(r.key), s = "" + r.key), "key" in r) {
|
|
200
|
-
o = {};
|
|
201
|
-
for (var W in r)
|
|
202
|
-
W !== "key" && (o[W] = r[W]);
|
|
203
|
-
} else o = r;
|
|
204
|
-
return s && R(
|
|
205
|
-
o,
|
|
206
|
-
typeof e == "function" ? e.displayName || e.name || "Unknown" : e
|
|
207
|
-
), k(
|
|
208
|
-
e,
|
|
209
|
-
s,
|
|
210
|
-
o,
|
|
211
|
-
f(),
|
|
212
|
-
L,
|
|
213
|
-
U
|
|
214
|
-
);
|
|
215
|
-
}
|
|
216
|
-
function h(e) {
|
|
217
|
-
N(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === c && (e._payload.status === "fulfilled" ? N(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
|
|
218
|
-
}
|
|
219
|
-
function N(e) {
|
|
220
|
-
return typeof e == "object" && e !== null && e.$$typeof === j;
|
|
221
|
-
}
|
|
222
|
-
var x = re, j = /* @__PURE__ */ Symbol.for("react.transitional.element"), O = /* @__PURE__ */ Symbol.for("react.portal"), A = /* @__PURE__ */ Symbol.for("react.fragment"), v = /* @__PURE__ */ Symbol.for("react.strict_mode"), P = /* @__PURE__ */ Symbol.for("react.profiler"), C = /* @__PURE__ */ Symbol.for("react.consumer"), I = /* @__PURE__ */ Symbol.for("react.context"), i = /* @__PURE__ */ Symbol.for("react.forward_ref"), y = /* @__PURE__ */ Symbol.for("react.suspense"), _ = /* @__PURE__ */ Symbol.for("react.suspense_list"), n = /* @__PURE__ */ Symbol.for("react.memo"), c = /* @__PURE__ */ Symbol.for("react.lazy"), m = /* @__PURE__ */ Symbol.for("react.activity"), T = /* @__PURE__ */ Symbol.for("react.client.reference"), b = x.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, F = Object.prototype.hasOwnProperty, K = Array.isArray, q = console.createTask ? console.createTask : function() {
|
|
223
|
-
return null;
|
|
224
|
-
};
|
|
225
|
-
x = {
|
|
226
|
-
react_stack_bottom_frame: function(e) {
|
|
227
|
-
return e();
|
|
228
|
-
}
|
|
229
|
-
};
|
|
230
|
-
var z, J = {}, V = x.react_stack_bottom_frame.bind(
|
|
231
|
-
x,
|
|
232
|
-
u
|
|
233
|
-
)(), G = q(E(u)), X = {};
|
|
234
|
-
Y.Fragment = A, Y.jsx = function(e, r, o) {
|
|
235
|
-
var a = 1e4 > b.recentlyCreatedOwnerStacks++;
|
|
236
|
-
return w(
|
|
237
|
-
e,
|
|
238
|
-
r,
|
|
239
|
-
o,
|
|
240
|
-
!1,
|
|
241
|
-
a ? Error("react-stack-top-frame") : V,
|
|
242
|
-
a ? q(E(e)) : G
|
|
243
|
-
);
|
|
244
|
-
}, Y.jsxs = function(e, r, o) {
|
|
245
|
-
var a = 1e4 > b.recentlyCreatedOwnerStacks++;
|
|
246
|
-
return w(
|
|
247
|
-
e,
|
|
248
|
-
r,
|
|
249
|
-
o,
|
|
250
|
-
!0,
|
|
251
|
-
a ? Error("react-stack-top-frame") : V,
|
|
252
|
-
a ? q(E(e)) : G
|
|
253
|
-
);
|
|
254
|
-
};
|
|
255
|
-
})()), Y;
|
|
256
|
-
}
|
|
257
|
-
var Q;
|
|
258
|
-
function oe() {
|
|
259
|
-
return Q || (Q = 1, process.env.NODE_ENV === "production" ? M.exports = te() : M.exports = ne()), M.exports;
|
|
260
|
-
}
|
|
261
|
-
var t = oe();
|
|
262
|
-
const ae = ({
|
|
263
|
-
fillingColor: l,
|
|
264
|
-
borderfillColor: g,
|
|
265
|
-
hoverborderColor: p,
|
|
266
|
-
cellBorderColor: E,
|
|
267
|
-
cellColor: f,
|
|
268
|
-
day: u,
|
|
269
|
-
isSelected: d = !1,
|
|
270
|
-
cellShape: R,
|
|
271
|
-
href: S
|
|
272
|
-
}) => {
|
|
273
|
-
const k = (/* @__PURE__ */ new Date()).toLocaleDateString("en-US", {
|
|
274
|
-
month: "long",
|
|
275
|
-
day: "numeric",
|
|
276
|
-
year: "numeric"
|
|
277
|
-
}), w = R === "square" ? "fc-rounded-square" : "fc-rounded-circle", h = u === k, N = `fc-day-button ${w} ${!h && !d && p ? "hover-border-var" : ""}`, x = !!(S && d), j = (v = "", P) => /* @__PURE__ */ t.jsx(
|
|
278
|
-
"button",
|
|
279
|
-
{
|
|
280
|
-
type: "button",
|
|
281
|
-
className: `${N} ${v} ${x ? "fc-cursor-pointer" : ""}`,
|
|
282
|
-
style: P
|
|
283
|
-
}
|
|
284
|
-
), O = (v) => x ? /* @__PURE__ */ t.jsx("a", { href: S, className: "contents", children: v }) : v;
|
|
285
|
-
if (h) {
|
|
286
|
-
const v = /* @__PURE__ */ t.jsxs("div", { className: "fc-today-wrap", children: [
|
|
287
|
-
/* @__PURE__ */ t.jsx(
|
|
288
|
-
"div",
|
|
289
|
-
{
|
|
290
|
-
className: "rainbow-spin fc-rainbow",
|
|
291
|
-
style: {
|
|
292
|
-
background: "conic-gradient(from 0deg, #ff0000 0deg, #ff4000 20deg, #ff8000 40deg, #ffbf00 60deg, #ffff00 80deg, #bfff00 100deg, #80ff00 120deg, #40ff00 140deg, #00ff00 160deg, #00ff40 180deg, #00ff80 200deg, #00ffbf 220deg, #00ffff 240deg, #00bfff 260deg, #0080ff 280deg, #0040ff 300deg, #0000ff 320deg, #4000ff 340deg, #8000ff 360deg)",
|
|
293
|
-
padding: "2px",
|
|
294
|
-
boxShadow: "0 0 8px rgba(255,0,255,0.35), 0 0 14px rgba(0,255,255,0.25)",
|
|
295
|
-
borderRadius: "50%"
|
|
296
|
-
}
|
|
297
|
-
}
|
|
298
|
-
),
|
|
299
|
-
/* @__PURE__ */ t.jsx("div", { className: "fc-color-inner", children: /* @__PURE__ */ t.jsx("div", { className: `fc-today-inner ${w}`, children: j("today-cell-btn fc-full", {
|
|
300
|
-
"--border-fill-color": d ? g : E,
|
|
301
|
-
backgroundColor: d ? l : f
|
|
302
|
-
}) }) })
|
|
303
|
-
] });
|
|
304
|
-
return O(v);
|
|
305
|
-
}
|
|
306
|
-
return O(j("w-4 h-4", d && !h ? {
|
|
307
|
-
backgroundColor: l,
|
|
308
|
-
borderColor: g,
|
|
309
|
-
"--hover-border-color": p
|
|
310
|
-
} : h ? void 0 : {
|
|
311
|
-
backgroundColor: f,
|
|
312
|
-
"--border-color": E,
|
|
313
|
-
"--hover-border-color": p
|
|
314
|
-
}));
|
|
315
|
-
}, se = ({
|
|
316
|
-
fillingColor: l = "#50C878",
|
|
317
|
-
borderfillColor: g = "#27592D",
|
|
318
|
-
hoverborderColor: p = "#FFCCCB",
|
|
319
|
-
cellBorderColor: E = "#808080",
|
|
320
|
-
cellColor: f = "#ADADAD",
|
|
321
|
-
legend: u = !0,
|
|
322
|
-
mainBorder: d = !0,
|
|
323
|
-
borderColor: R = "#708090",
|
|
324
|
-
textColor: S = "#708090",
|
|
325
|
-
selectedDates: k = [],
|
|
326
|
-
title: w = "Calendar",
|
|
327
|
-
cellShape: h = "circle",
|
|
328
|
-
column: N = 15,
|
|
329
|
-
legendColumn: x = !1
|
|
330
|
-
}) => {
|
|
331
|
-
const j = /* @__PURE__ */ new Date(), { selectedSet: O, hrefMap: A } = B(() => {
|
|
332
|
-
const i = (n) => {
|
|
333
|
-
if (!n) return "";
|
|
334
|
-
if (typeof n == "string") {
|
|
335
|
-
const c = n.split("-");
|
|
336
|
-
if (c.length === 3) {
|
|
337
|
-
const m = c[0], T = String(Number(c[1])).padStart(2, "0"), b = String(Number(c[2])).padStart(2, "0");
|
|
338
|
-
return `${m}-${T}-${b}`;
|
|
339
|
-
}
|
|
340
|
-
return n;
|
|
341
|
-
}
|
|
342
|
-
return typeof n == "object" && n.day ? i(n.day) : "";
|
|
343
|
-
}, y = /* @__PURE__ */ new Set(), _ = /* @__PURE__ */ new Map();
|
|
344
|
-
for (const n of k || []) {
|
|
345
|
-
const c = n && typeof n == "object" && n.day ? i(n.day) : i(n);
|
|
346
|
-
c && (y.add(c), n && typeof n == "object" && n.href && _.set(c, n.href));
|
|
347
|
-
}
|
|
348
|
-
return { selectedSet: y, hrefMap: _ };
|
|
349
|
-
}, [k]), v = B(() => {
|
|
350
|
-
const i = j.getFullYear(), y = j.getMonth(), _ = new Date(i, y - 1, 1), n = new Date(i, y + 2, 0), c = [], m = new Date(_);
|
|
351
|
-
for (; m <= n; ) {
|
|
352
|
-
const T = `${m.getFullYear()}-${String(m.getMonth() + 1).padStart(2, "0")}-${String(
|
|
353
|
-
m.getDate()
|
|
354
|
-
).padStart(2, "0")}`, b = O.has(T), F = A.get(T);
|
|
355
|
-
c.push({
|
|
356
|
-
key: T,
|
|
357
|
-
isSelected: b,
|
|
358
|
-
href: F,
|
|
359
|
-
// keep a Date copy in case you want to use it later
|
|
360
|
-
dateObj: new Date(m)
|
|
361
|
-
}), m.setDate(m.getDate() + 1);
|
|
362
|
-
}
|
|
363
|
-
return c;
|
|
364
|
-
}, [k, j]), P = [], C = N;
|
|
365
|
-
for (let i = 0; i < v.length; i += C)
|
|
366
|
-
P.push(v.slice(i, i + C));
|
|
367
|
-
const I = h === "square" ? "fc-rounded-square" : "fc-rounded-circle";
|
|
368
|
-
return /* @__PURE__ */ t.jsxs(
|
|
369
|
-
"div",
|
|
370
|
-
{
|
|
371
|
-
className: `fc-calendar ${d ? "fc-main-border" : ""}`,
|
|
372
|
-
style: {
|
|
373
|
-
borderColor: d ? R : void 0,
|
|
374
|
-
color: S
|
|
375
|
-
},
|
|
376
|
-
children: [
|
|
377
|
-
u && /* @__PURE__ */ t.jsxs("div", { className: `fc-legend ${x ? "fc-legend-col" : ""}`, children: [
|
|
378
|
-
/* @__PURE__ */ t.jsx("strong", { children: w }),
|
|
379
|
-
/* @__PURE__ */ t.jsxs("div", { className: "fc-legend", children: [
|
|
380
|
-
/* @__PURE__ */ t.jsxs("div", { className: "fc-legend-indicator", children: [
|
|
381
|
-
/* @__PURE__ */ t.jsxs("div", { className: "fc-color-box", children: [
|
|
382
|
-
/* @__PURE__ */ t.jsx(
|
|
383
|
-
"div",
|
|
384
|
-
{
|
|
385
|
-
className: "rainbow-spin fc-rainbow",
|
|
386
|
-
style: {
|
|
387
|
-
background: "conic-gradient(from 0deg, #ff0000 0deg, #ff4000 20deg, #ff8000 40deg, #ffbf00 60deg, #ffff00 80deg, #bfff00 100deg, #80ff00 120deg, #40ff00 140deg, #00ff00 160deg, #00ff40 180deg, #00ff80 200deg, #00ffbf 220deg, #00ffff 240deg, #00bfff 260deg, #0080ff 280deg, #0040ff 300deg, #0000ff 320deg, #4000ff 340deg, #8000ff 360deg)",
|
|
388
|
-
padding: "2px",
|
|
389
|
-
boxShadow: "0 0 8px rgba(255,0,255,0.35), 0 0 14px rgba(0,255,255,0.25)",
|
|
390
|
-
borderRadius: "50%"
|
|
391
|
-
}
|
|
392
|
-
}
|
|
393
|
-
),
|
|
394
|
-
/* @__PURE__ */ t.jsx("div", { className: "fc-color-inner", children: /* @__PURE__ */ t.jsx(
|
|
395
|
-
"button",
|
|
396
|
-
{
|
|
397
|
-
type: "button",
|
|
398
|
-
className: "fc-base-button",
|
|
399
|
-
style: {
|
|
400
|
-
"--border-fill-color": g,
|
|
401
|
-
backgroundColor: f
|
|
402
|
-
}
|
|
403
|
-
}
|
|
404
|
-
) })
|
|
405
|
-
] }),
|
|
406
|
-
/* @__PURE__ */ t.jsx("span", { children: "Today" })
|
|
407
|
-
] }),
|
|
408
|
-
/* @__PURE__ */ t.jsxs("div", { className: "fc-legend-completed", children: [
|
|
409
|
-
/* @__PURE__ */ t.jsx(
|
|
410
|
-
"button",
|
|
411
|
-
{
|
|
412
|
-
type: "button",
|
|
413
|
-
className: `fc-base-button ${I}`,
|
|
414
|
-
style: {
|
|
415
|
-
backgroundColor: l,
|
|
416
|
-
borderColor: g
|
|
417
|
-
}
|
|
418
|
-
}
|
|
419
|
-
),
|
|
420
|
-
/* @__PURE__ */ t.jsx("span", { children: "Completed" })
|
|
421
|
-
] })
|
|
422
|
-
] })
|
|
423
|
-
] }),
|
|
424
|
-
/* @__PURE__ */ t.jsx("div", { className: "fc-rows", children: P.map((i, y) => /* @__PURE__ */ t.jsx("div", { className: "fc-row", children: i.map((_, n) => {
|
|
425
|
-
const c = _.dateObj.toLocaleDateString("en-US", {
|
|
426
|
-
month: "long",
|
|
427
|
-
day: "numeric",
|
|
428
|
-
year: "numeric"
|
|
429
|
-
}), m = n < 3, T = n >= C - 3;
|
|
430
|
-
let b = "fc-tooltip-top";
|
|
431
|
-
return m ? b = "fc-tooltip-right" : T ? b = "fc-tooltip-left" : y === 0 && (b = "fc-tooltip-bottom"), /* @__PURE__ */ t.jsxs("div", { className: `fc-tooltip ${b}`, children: [
|
|
432
|
-
/* @__PURE__ */ t.jsx(
|
|
433
|
-
ae,
|
|
434
|
-
{
|
|
435
|
-
fillingColor: l,
|
|
436
|
-
borderfillColor: g,
|
|
437
|
-
hoverborderColor: p,
|
|
438
|
-
cellBorderColor: E,
|
|
439
|
-
cellColor: f,
|
|
440
|
-
isSelected: _.isSelected,
|
|
441
|
-
day: c,
|
|
442
|
-
href: _.href,
|
|
443
|
-
cellShape: h
|
|
444
|
-
}
|
|
445
|
-
),
|
|
446
|
-
/* @__PURE__ */ t.jsx("div", { className: "fc-tooltip-text", role: "tooltip", children: c })
|
|
447
|
-
] }, _.key);
|
|
448
|
-
}) }, y)) })
|
|
449
|
-
]
|
|
450
|
-
}
|
|
451
|
-
);
|
|
452
|
-
}, fe = (l) => /* @__PURE__ */ t.jsx(se, { ...l });
|
|
453
|
-
export {
|
|
454
|
-
se as Calendar,
|
|
455
|
-
fe as default
|
|
456
|
-
};
|
package/dist/index.umd.cjs
DELETED
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
(function(k,S){typeof exports=="object"&&typeof module<"u"?S(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],S):(k=typeof globalThis<"u"?globalThis:k||self,S(k.FillCalendar={},k.React))})(this,(function(k,S){"use strict";var L={exports:{}},Y={};var V;function re(){if(V)return Y;V=1;var l=Symbol.for("react.transitional.element"),g=Symbol.for("react.fragment");function p(h,f,u){var d=null;if(u!==void 0&&(d=""+u),f.key!==void 0&&(d=""+f.key),"key"in f){u={};for(var R in f)R!=="key"&&(u[R]=f[R])}else u=f;return f=u.ref,{$$typeof:l,type:h,key:d,ref:f!==void 0?f:null,props:u}}return Y.Fragment=g,Y.jsx=p,Y.jsxs=p,Y}var F={};var G;function te(){return G||(G=1,process.env.NODE_ENV!=="production"&&(function(){function l(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===T?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case C:return"Fragment";case D:return"Profiler";case v:return"StrictMode";case E:return"Suspense";case _:return"SuspenseList";case m:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case P:return"Portal";case W:return e.displayName||"Context";case M:return(e._context.displayName||"Context")+".Consumer";case i:var r=e.render;return e=e.displayName,e||(e=r.displayName||r.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case n:return r=e.displayName||null,r!==null?r:l(e.type)||"Memo";case c:r=e._payload,e=e._init;try{return l(e(r))}catch{}}return null}function g(e){return""+e}function p(e){try{g(e);var r=!1}catch{r=!0}if(r){r=console;var o=r.error,a=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return o.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",a),g(e)}}function h(e){if(e===C)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===c)return"<...>";try{var r=l(e);return r?"<"+r+">":"<...>"}catch{return"<...>"}}function f(){var e=b.A;return e===null?null:e.getOwner()}function u(){return Error("react-stack-top-frame")}function d(e){if(I.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function R(e,r){function o(){H||(H=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",r))}o.isReactWarning=!0,Object.defineProperty(e,"key",{get:o,configurable:!0})}function O(){var e=l(this.type);return Z[e]||(Z[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function w(e,r,o,a,U,z){var s=o.ref;return e={$$typeof:j,type:e,key:r,props:o,_owner:a},(s!==void 0?s:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:O}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:U}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:z}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function N(e,r,o,a,U,z){var s=r.children;if(s!==void 0)if(a)if(se(s)){for(a=0;a<s.length;a++)y(s[a]);Object.freeze&&Object.freeze(s)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else y(s);if(I.call(r,"key")){s=l(e);var $=Object.keys(r).filter(function(ce){return ce!=="key"});a=0<$.length?"{key: someKey, "+$.join(": ..., ")+": ...}":"{key: someKey}",ee[s+a]||($=0<$.length?"{"+$.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
|
|
2
|
-
let props = %s;
|
|
3
|
-
<%s {...props} />
|
|
4
|
-
React keys must be passed directly to JSX without using spread:
|
|
5
|
-
let props = %s;
|
|
6
|
-
<%s key={someKey} {...props} />`,a,s,$,s),ee[s+a]=!0)}if(s=null,o!==void 0&&(p(o),s=""+o),d(r)&&(p(r.key),s=""+r.key),"key"in r){o={};for(var J in r)J!=="key"&&(o[J]=r[J])}else o=r;return s&&R(o,typeof e=="function"?e.displayName||e.name||"Unknown":e),w(e,s,o,f(),U,z)}function y(e){A(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===c&&(e._payload.status==="fulfilled"?A(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function A(e){return typeof e=="object"&&e!==null&&e.$$typeof===j}var x=S,j=Symbol.for("react.transitional.element"),P=Symbol.for("react.portal"),C=Symbol.for("react.fragment"),v=Symbol.for("react.strict_mode"),D=Symbol.for("react.profiler"),M=Symbol.for("react.consumer"),W=Symbol.for("react.context"),i=Symbol.for("react.forward_ref"),E=Symbol.for("react.suspense"),_=Symbol.for("react.suspense_list"),n=Symbol.for("react.memo"),c=Symbol.for("react.lazy"),m=Symbol.for("react.activity"),T=Symbol.for("react.client.reference"),b=x.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,I=Object.prototype.hasOwnProperty,se=Array.isArray,q=console.createTask?console.createTask:function(){return null};x={react_stack_bottom_frame:function(e){return e()}};var H,Z={},Q=x.react_stack_bottom_frame.bind(x,u)(),K=q(h(u)),ee={};F.Fragment=C,F.jsx=function(e,r,o){var a=1e4>b.recentlyCreatedOwnerStacks++;return N(e,r,o,!1,a?Error("react-stack-top-frame"):Q,a?q(h(e)):K)},F.jsxs=function(e,r,o){var a=1e4>b.recentlyCreatedOwnerStacks++;return N(e,r,o,!0,a?Error("react-stack-top-frame"):Q,a?q(h(e)):K)}})()),F}var X;function ne(){return X||(X=1,process.env.NODE_ENV==="production"?L.exports=re():L.exports=te()),L.exports}var t=ne();const oe=({fillingColor:l,borderfillColor:g,hoverborderColor:p,cellBorderColor:h,cellColor:f,day:u,isSelected:d=!1,cellShape:R,href:O})=>{const w=new Date().toLocaleDateString("en-US",{month:"long",day:"numeric",year:"numeric"}),N=R==="square"?"fc-rounded-square":"fc-rounded-circle",y=u===w,A=`fc-day-button ${N} ${!y&&!d&&p?"hover-border-var":""}`,x=!!(O&&d),j=(v="",D)=>t.jsx("button",{type:"button",className:`${A} ${v} ${x?"fc-cursor-pointer":""}`,style:D}),P=v=>x?t.jsx("a",{href:O,className:"contents",children:v}):v;if(y){const v=t.jsxs("div",{className:"fc-today-wrap",children:[t.jsx("div",{className:"rainbow-spin fc-rainbow",style:{background:"conic-gradient(from 0deg, #ff0000 0deg, #ff4000 20deg, #ff8000 40deg, #ffbf00 60deg, #ffff00 80deg, #bfff00 100deg, #80ff00 120deg, #40ff00 140deg, #00ff00 160deg, #00ff40 180deg, #00ff80 200deg, #00ffbf 220deg, #00ffff 240deg, #00bfff 260deg, #0080ff 280deg, #0040ff 300deg, #0000ff 320deg, #4000ff 340deg, #8000ff 360deg)",padding:"2px",boxShadow:"0 0 8px rgba(255,0,255,0.35), 0 0 14px rgba(0,255,255,0.25)",borderRadius:"50%"}}),t.jsx("div",{className:"fc-color-inner",children:t.jsx("div",{className:`fc-today-inner ${N}`,children:j("today-cell-btn fc-full",{"--border-fill-color":d?g:h,backgroundColor:d?l:f})})})]});return P(v)}return P(j("w-4 h-4",d&&!y?{backgroundColor:l,borderColor:g,"--hover-border-color":p}:y?void 0:{backgroundColor:f,"--border-color":h,"--hover-border-color":p}))},B=({fillingColor:l="#50C878",borderfillColor:g="#27592D",hoverborderColor:p="#FFCCCB",cellBorderColor:h="#808080",cellColor:f="#ADADAD",legend:u=!0,mainBorder:d=!0,borderColor:R="#708090",textColor:O="#708090",selectedDates:w=[],title:N="Calendar",cellShape:y="circle",column:A=15,legendColumn:x=!1})=>{const j=new Date,{selectedSet:P,hrefMap:C}=S.useMemo(()=>{const i=n=>{if(!n)return"";if(typeof n=="string"){const c=n.split("-");if(c.length===3){const m=c[0],T=String(Number(c[1])).padStart(2,"0"),b=String(Number(c[2])).padStart(2,"0");return`${m}-${T}-${b}`}return n}return typeof n=="object"&&n.day?i(n.day):""},E=new Set,_=new Map;for(const n of w||[]){const c=n&&typeof n=="object"&&n.day?i(n.day):i(n);c&&(E.add(c),n&&typeof n=="object"&&n.href&&_.set(c,n.href))}return{selectedSet:E,hrefMap:_}},[w]),v=S.useMemo(()=>{const i=j.getFullYear(),E=j.getMonth(),_=new Date(i,E-1,1),n=new Date(i,E+2,0),c=[],m=new Date(_);for(;m<=n;){const T=`${m.getFullYear()}-${String(m.getMonth()+1).padStart(2,"0")}-${String(m.getDate()).padStart(2,"0")}`,b=P.has(T),I=C.get(T);c.push({key:T,isSelected:b,href:I,dateObj:new Date(m)}),m.setDate(m.getDate()+1)}return c},[w,j]),D=[],M=A;for(let i=0;i<v.length;i+=M)D.push(v.slice(i,i+M));const W=y==="square"?"fc-rounded-square":"fc-rounded-circle";return t.jsxs("div",{className:`fc-calendar ${d?"fc-main-border":""}`,style:{borderColor:d?R:void 0,color:O},children:[u&&t.jsxs("div",{className:`fc-legend ${x?"fc-legend-col":""}`,children:[t.jsx("strong",{children:N}),t.jsxs("div",{className:"fc-legend",children:[t.jsxs("div",{className:"fc-legend-indicator",children:[t.jsxs("div",{className:"fc-color-box",children:[t.jsx("div",{className:"rainbow-spin fc-rainbow",style:{background:"conic-gradient(from 0deg, #ff0000 0deg, #ff4000 20deg, #ff8000 40deg, #ffbf00 60deg, #ffff00 80deg, #bfff00 100deg, #80ff00 120deg, #40ff00 140deg, #00ff00 160deg, #00ff40 180deg, #00ff80 200deg, #00ffbf 220deg, #00ffff 240deg, #00bfff 260deg, #0080ff 280deg, #0040ff 300deg, #0000ff 320deg, #4000ff 340deg, #8000ff 360deg)",padding:"2px",boxShadow:"0 0 8px rgba(255,0,255,0.35), 0 0 14px rgba(0,255,255,0.25)",borderRadius:"50%"}}),t.jsx("div",{className:"fc-color-inner",children:t.jsx("button",{type:"button",className:"fc-base-button",style:{"--border-fill-color":g,backgroundColor:f}})})]}),t.jsx("span",{children:"Today"})]}),t.jsxs("div",{className:"fc-legend-completed",children:[t.jsx("button",{type:"button",className:`fc-base-button ${W}`,style:{backgroundColor:l,borderColor:g}}),t.jsx("span",{children:"Completed"})]})]})]}),t.jsx("div",{className:"fc-rows",children:D.map((i,E)=>t.jsx("div",{className:"fc-row",children:i.map((_,n)=>{const c=_.dateObj.toLocaleDateString("en-US",{month:"long",day:"numeric",year:"numeric"}),m=n<3,T=n>=M-3;let b="fc-tooltip-top";return m?b="fc-tooltip-right":T?b="fc-tooltip-left":E===0&&(b="fc-tooltip-bottom"),t.jsxs("div",{className:`fc-tooltip ${b}`,children:[t.jsx(oe,{fillingColor:l,borderfillColor:g,hoverborderColor:p,cellBorderColor:h,cellColor:f,isSelected:_.isSelected,day:c,href:_.href,cellShape:y}),t.jsx("div",{className:"fc-tooltip-text",role:"tooltip",children:c})]},_.key)})},E))})]})},ae=l=>t.jsx(B,{...l});k.Calendar=B,k.default=ae,Object.defineProperties(k,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));
|