bs-ad-calendar-react 1.0.1
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/LICENSE +21 -0
- package/README.md +265 -0
- package/dist/bs-ad-calendar.css +1 -0
- package/dist/bs-ad-calendar.js +1969 -0
- package/dist/bs-ad-calendar.umd.cjs +14 -0
- package/dist/vite.svg +1 -0
- package/package.json +69 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2024 Bibek Amatya
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,265 @@
|
|
|
1
|
+
# BS-AD Calendar
|
|
2
|
+
|
|
3
|
+
A modern, feature-rich React calendar component supporting both **Bikram Sambat (BS)** and **Gregorian (AD)** calendars with full TypeScript support.
|
|
4
|
+
|
|
5
|
+
[](https://www.npmjs.com/package/bs-ad-calendar)
|
|
6
|
+
[](https://opensource.org/licenses/MIT)
|
|
7
|
+
|
|
8
|
+
## Features
|
|
9
|
+
|
|
10
|
+
✨ **Dual Calendar Support** - Switch between BS (Nepali) and AD (Gregorian) calendars
|
|
11
|
+
🎨 **Customizable Themes** - Light/dark themes with custom color support
|
|
12
|
+
📅 **Date & Range Selection** - Single date or date range selection modes
|
|
13
|
+
🌏 **Localization** - Nepali months, days, and number support
|
|
14
|
+
⌨️ **Keyboard Navigation** - Full keyboard accessibility
|
|
15
|
+
📱 **Responsive Design** - Works on all screen sizes
|
|
16
|
+
🎯 **DatePicker Component** - Input field with popup calendar
|
|
17
|
+
🔧 **TypeScript** - Full type definitions included
|
|
18
|
+
♿ **Accessible** - ARIA labels and keyboard navigation
|
|
19
|
+
|
|
20
|
+
## Installation
|
|
21
|
+
|
|
22
|
+
```bash
|
|
23
|
+
npm install bs-ad-calendar
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
```bash
|
|
27
|
+
yarn add bs-ad-calendar
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
```bash
|
|
31
|
+
pnpm add bs-ad-calendar
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
## Quick Start
|
|
35
|
+
|
|
36
|
+
### Basic Calendar
|
|
37
|
+
|
|
38
|
+
```tsx
|
|
39
|
+
import { Calendar } from 'bs-ad-calendar'
|
|
40
|
+
|
|
41
|
+
function App() {
|
|
42
|
+
return (
|
|
43
|
+
<Calendar
|
|
44
|
+
calendarType="BS"
|
|
45
|
+
onDateSelect={(date) => console.log(date)}
|
|
46
|
+
/>
|
|
47
|
+
)
|
|
48
|
+
}
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
### DatePicker with Input
|
|
52
|
+
|
|
53
|
+
```tsx
|
|
54
|
+
import { DatePicker } from 'bs-ad-calendar'
|
|
55
|
+
|
|
56
|
+
function App() {
|
|
57
|
+
return (
|
|
58
|
+
<DatePicker
|
|
59
|
+
calendarType="AD"
|
|
60
|
+
placeholder="Select a date"
|
|
61
|
+
onDateSelect={(date) => console.log(date)}
|
|
62
|
+
/>
|
|
63
|
+
)
|
|
64
|
+
}
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
### Range Selection
|
|
68
|
+
|
|
69
|
+
```tsx
|
|
70
|
+
import { Calendar } from 'bs-ad-calendar'
|
|
71
|
+
|
|
72
|
+
function App() {
|
|
73
|
+
return (
|
|
74
|
+
<Calendar
|
|
75
|
+
calendarType="BS"
|
|
76
|
+
mode="range"
|
|
77
|
+
showRangePresets
|
|
78
|
+
onRangeSelect={(range) => console.log(range)}
|
|
79
|
+
/>
|
|
80
|
+
)
|
|
81
|
+
}
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
## API Reference
|
|
85
|
+
|
|
86
|
+
### Calendar Props
|
|
87
|
+
|
|
88
|
+
| Prop | Type | Default | Description |
|
|
89
|
+
|------|------|---------|-------------|
|
|
90
|
+
| `calendarType` | `'BS' \| 'AD'` | `'AD'` | Calendar type |
|
|
91
|
+
| `mode` | `'single' \| 'range'` | `'single'` | Selection mode |
|
|
92
|
+
| `onDateSelect` | `(date: DateOutput) => void` | - | Single date selection callback |
|
|
93
|
+
| `onRangeSelect` | `(range: DateRange) => void` | - | Range selection callback |
|
|
94
|
+
| `showToday` | `boolean` | `true` | Highlight today's date |
|
|
95
|
+
| `disabled` | `boolean` | `false` | Disable calendar interaction |
|
|
96
|
+
| `minDate` | `string` | - | Minimum selectable date (ISO format) |
|
|
97
|
+
| `maxDate` | `string` | - | Maximum selectable date (ISO format) |
|
|
98
|
+
| `theme` | `'light' \| 'dark' \| 'custom'` | `'light'` | Theme variant |
|
|
99
|
+
| `colors` | `ColorConfig` | - | Custom color configuration |
|
|
100
|
+
| `showNepaliMonths` | `boolean` | `false` | Show Nepali month names |
|
|
101
|
+
| `showNepaliDays` | `boolean` | `false` | Show Nepali day names |
|
|
102
|
+
| `showNepaliNumbers` | `boolean` | `false` | Show Nepali numerals |
|
|
103
|
+
| `showRangePresets` | `boolean` | `false` | Show range preset buttons |
|
|
104
|
+
| `rangePresetsPosition` | `'top' \| 'left'` | `'top'` | Position of range presets |
|
|
105
|
+
| `className` | `string` | - | Additional CSS class |
|
|
106
|
+
|
|
107
|
+
### DatePicker Props
|
|
108
|
+
|
|
109
|
+
Extends all Calendar props plus:
|
|
110
|
+
|
|
111
|
+
| Prop | Type | Default | Description |
|
|
112
|
+
|------|------|---------|-------------|
|
|
113
|
+
| `placeholder` | `string` | `'Select date'` | Input placeholder text |
|
|
114
|
+
| `inputClassName` | `string` | - | Input container CSS class |
|
|
115
|
+
| `popupClassName` | `string` | - | Popup calendar CSS class |
|
|
116
|
+
|
|
117
|
+
### Color Configuration
|
|
118
|
+
|
|
119
|
+
```tsx
|
|
120
|
+
colors={{
|
|
121
|
+
primary: '#3b82f6', // Primary accent color
|
|
122
|
+
selected: '#3b82f6', // Selected date background
|
|
123
|
+
today: '#dbeafe', // Today's date background
|
|
124
|
+
hover: '#eff6ff', // Hover state background
|
|
125
|
+
background: '#ffffff', // Calendar background
|
|
126
|
+
text: '#1f2937', // Text color
|
|
127
|
+
border: '#e5e7eb', // Border color
|
|
128
|
+
disabled: '#d1d5db' // Disabled date color
|
|
129
|
+
}}
|
|
130
|
+
```
|
|
131
|
+
|
|
132
|
+
### Date Output Format
|
|
133
|
+
|
|
134
|
+
```tsx
|
|
135
|
+
{
|
|
136
|
+
bs: "2081-09-15", // BS date (ISO format)
|
|
137
|
+
ad: "2024-12-31", // AD date (ISO format)
|
|
138
|
+
formatted: {
|
|
139
|
+
bs: "Poush 15, 2081", // Formatted BS date
|
|
140
|
+
ad: "December 31, 2024" // Formatted AD date
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
|
+
```
|
|
144
|
+
|
|
145
|
+
### Range Output Format
|
|
146
|
+
|
|
147
|
+
```tsx
|
|
148
|
+
{
|
|
149
|
+
start: { year: 2081, month: 8, day: 1 },
|
|
150
|
+
end: { year: 2081, month: 8, day: 30 }
|
|
151
|
+
}
|
|
152
|
+
```
|
|
153
|
+
|
|
154
|
+
## Examples
|
|
155
|
+
|
|
156
|
+
### Custom Colors
|
|
157
|
+
|
|
158
|
+
```tsx
|
|
159
|
+
<Calendar
|
|
160
|
+
calendarType="BS"
|
|
161
|
+
colors={{
|
|
162
|
+
primary: '#10b981',
|
|
163
|
+
selected: '#059669',
|
|
164
|
+
today: '#d1fae5',
|
|
165
|
+
hover: '#ecfdf5'
|
|
166
|
+
}}
|
|
167
|
+
onDateSelect={(date) => console.log(date)}
|
|
168
|
+
/>
|
|
169
|
+
```
|
|
170
|
+
|
|
171
|
+
### Nepali Localization
|
|
172
|
+
|
|
173
|
+
```tsx
|
|
174
|
+
<Calendar
|
|
175
|
+
calendarType="BS"
|
|
176
|
+
showNepaliMonths
|
|
177
|
+
showNepaliDays
|
|
178
|
+
showNepaliNumbers
|
|
179
|
+
onDateSelect={(date) => console.log(date)}
|
|
180
|
+
/>
|
|
181
|
+
```
|
|
182
|
+
|
|
183
|
+
### Date Constraints
|
|
184
|
+
|
|
185
|
+
```tsx
|
|
186
|
+
<Calendar
|
|
187
|
+
calendarType="AD"
|
|
188
|
+
minDate="2024-01-01"
|
|
189
|
+
maxDate="2024-12-31"
|
|
190
|
+
onDateSelect={(date) => console.log(date)}
|
|
191
|
+
/>
|
|
192
|
+
```
|
|
193
|
+
|
|
194
|
+
### Dark Theme
|
|
195
|
+
|
|
196
|
+
```tsx
|
|
197
|
+
<Calendar
|
|
198
|
+
calendarType="BS"
|
|
199
|
+
theme="dark"
|
|
200
|
+
onDateSelect={(date) => console.log(date)}
|
|
201
|
+
/>
|
|
202
|
+
```
|
|
203
|
+
|
|
204
|
+
### Custom Range Presets
|
|
205
|
+
|
|
206
|
+
```tsx
|
|
207
|
+
<Calendar
|
|
208
|
+
calendarType="BS"
|
|
209
|
+
mode="range"
|
|
210
|
+
showRangePresets
|
|
211
|
+
predefinedRanges={[
|
|
212
|
+
{
|
|
213
|
+
label: 'This Month',
|
|
214
|
+
key: 'this-month',
|
|
215
|
+
getValue: (type) => ({
|
|
216
|
+
start: { year: 2081, month: 8, day: 1 },
|
|
217
|
+
end: { year: 2081, month: 8, day: 30 }
|
|
218
|
+
})
|
|
219
|
+
}
|
|
220
|
+
]}
|
|
221
|
+
onRangeSelect={(range) => console.log(range)}
|
|
222
|
+
/>
|
|
223
|
+
```
|
|
224
|
+
|
|
225
|
+
## Keyboard Navigation
|
|
226
|
+
|
|
227
|
+
- **Arrow Left/Right**: Navigate months
|
|
228
|
+
- **Arrow Up/Down**: Navigate years
|
|
229
|
+
- **PageUp/PageDown**: Navigate months
|
|
230
|
+
- **Shift + PageUp/PageDown**: Navigate years
|
|
231
|
+
- **Tab**: Navigate between interactive elements
|
|
232
|
+
|
|
233
|
+
## Browser Support
|
|
234
|
+
|
|
235
|
+
- Chrome (latest)
|
|
236
|
+
- Firefox (latest)
|
|
237
|
+
- Safari (latest)
|
|
238
|
+
- Edge (latest)
|
|
239
|
+
|
|
240
|
+
## TypeScript
|
|
241
|
+
|
|
242
|
+
Full TypeScript support with exported types:
|
|
243
|
+
|
|
244
|
+
```tsx
|
|
245
|
+
import type {
|
|
246
|
+
DateInfo,
|
|
247
|
+
DateRange,
|
|
248
|
+
DateOutput,
|
|
249
|
+
CalendarProps
|
|
250
|
+
} from 'bs-ad-calendar'
|
|
251
|
+
```
|
|
252
|
+
|
|
253
|
+
## Contributing
|
|
254
|
+
|
|
255
|
+
Contributions are welcome! Please feel free to submit a Pull Request.
|
|
256
|
+
|
|
257
|
+
## License
|
|
258
|
+
|
|
259
|
+
MIT © [Bibek Amatya](https://github.com/bibekamatya)
|
|
260
|
+
|
|
261
|
+
## Links
|
|
262
|
+
|
|
263
|
+
- [GitHub Repository](https://github.com/bibekamatya/bs-ad-calendar)
|
|
264
|
+
- [NPM Package](https://www.npmjs.com/package/bs-ad-calendar)
|
|
265
|
+
- [Report Issues](https://github.com/bibekamatya/bs-ad-calendar/issues)
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
._calendar_1qlbw_1{background:var(--calendar-background, white);border:1px solid var(--calendar-border, #e5e7eb);border-radius:8px;box-shadow:0 4px 6px -1px #0000001a;padding:16px;font-family:system-ui,-apple-system,sans-serif;color:var(--calendar-text, #1f2937)}._calendar_1qlbw_1>div:has(._grid_1qlbw_11){display:flex;gap:16px}@media(max-width:600px){._calendar_1qlbw_1>div:has(._grid_1qlbw_11){flex-direction:column}}._header_1qlbw_22{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}._navButton_1qlbw_29{background:none;border:none;cursor:pointer;padding:8px;border-radius:4px;transition:background-color .2s;color:var(--calendar-text, #1f2937);font-size:18px;font-weight:700;min-width:32px;height:32px;display:flex;align-items:center;justify-content:center}._navButton_1qlbw_29:hover:not(:disabled){background-color:var(--calendar-hover, #f3f4f6)}._navButton_1qlbw_29:disabled{opacity:.5;cursor:not-allowed}._monthYear_1qlbw_55{font-weight:600;font-size:16px;color:var(--calendar-text, #1f2937);background:none;border:none;cursor:pointer;padding:8px 12px;border-radius:4px;transition:background-color .2s}._monthYear_1qlbw_55:hover:not(:disabled){background-color:var(--calendar-hover, #f3f4f6)}._monthYear_1qlbw_55:disabled{cursor:not-allowed}._pickerOverlay_1qlbw_75{position:fixed;inset:0;background:#0000004d;display:flex;align-items:center;justify-content:center;z-index:1000}._pickerContent_1qlbw_85{background:#fff;border-radius:12px;box-shadow:0 20px 25px -5px #0000001a;width:90%;max-width:400px;max-height:90vh;overflow:auto}._pickerHeader_1qlbw_95{display:flex;justify-content:space-between;align-items:center;padding:16px;border-bottom:1px solid #e5e7eb}._pickerHeader_1qlbw_95 h3{margin:0;font-size:16px;font-weight:600}._closeButton_1qlbw_109{background:none;border:none;font-size:24px;cursor:pointer;color:#6b7280;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:4px}._closeButton_1qlbw_109:hover{background:#f3f4f6}._pickerBody_1qlbw_128{padding:16px}._pickerSection_1qlbw_132{margin-bottom:20px}._pickerSection_1qlbw_132:last-child{margin-bottom:0}._pickerSection_1qlbw_132 label{display:block;font-size:14px;font-weight:500;margin-bottom:8px;color:#374151}._pickerSectionHeader_1qlbw_148{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}._pickerSectionHeader_1qlbw_148 label{margin-bottom:0}._yearNav_1qlbw_159{display:flex;align-items:center;gap:8px}._yearNav_1qlbw_159 button{background:none;border:none;cursor:pointer;padding:4px 8px;border-radius:4px;font-size:16px;color:var(--calendar-primary, #3b82f6)}._yearNav_1qlbw_159 button:hover:not(:disabled){background:var(--calendar-hover, #eff6ff)}._yearNav_1qlbw_159 button:disabled{opacity:.3;cursor:not-allowed}._yearNav_1qlbw_159 span{font-size:13px;font-weight:500;min-width:80px;text-align:center}._yearGrid_1qlbw_191{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}._yearGrid_1qlbw_191 button{padding:10px;border:1px solid #e5e7eb;background:#fff;border-radius:6px;cursor:pointer;font-size:13px;transition:all .2s}._yearGrid_1qlbw_191 button:hover{background:#f3f4f6}._yearGrid_1qlbw_191 button._selected_1qlbw_211{background:var(--calendar-selected, #3b82f6);color:#fff;border-color:var(--calendar-selected, #3b82f6)}._monthGrid_1qlbw_217{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}._monthGrid_1qlbw_217 button{padding:12px;border:1px solid #e5e7eb;background:#fff;border-radius:6px;cursor:pointer;font-size:13px;transition:all .2s}._monthGrid_1qlbw_217 button:hover{background:#f3f4f6}._monthGrid_1qlbw_217 button._selected_1qlbw_211{background:var(--calendar-selected, #3b82f6);color:#fff;border-color:var(--calendar-selected, #3b82f6)}._grid_1qlbw_11{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}._dayHeader_1qlbw_249{text-align:center;font-weight:500;font-size:12px;color:var(--calendar-disabled, #6b7280);padding:8px 4px}._day_1qlbw_249{aspect-ratio:1;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:4px;transition:all .2s;font-size:14px;color:var(--calendar-text, #1f2937);min-height:32px}._day_1qlbw_249:hover:not(._dayDisabled_1qlbw_270):not(._dayOtherMonth_1qlbw_270){background-color:var(--calendar-hover, #f3f4f6)}._daySelected_1qlbw_274{background-color:var(--calendar-selected, #3b82f6)!important;color:#fff!important}._dayToday_1qlbw_279{background-color:var(--calendar-today, #dbeafe);color:var(--calendar-primary, #1d4ed8);font-weight:600}._dayInRange_1qlbw_285{background-color:var(--calendar-hover, #eff6ff);color:var(--calendar-primary, #1d4ed8)}._dayDisabled_1qlbw_270{color:var(--calendar-disabled, #d1d5db);cursor:not-allowed}._dayOtherMonth_1qlbw_270{color:var(--calendar-disabled, #9ca3af);cursor:default}._calendar_1qlbw_1[data-theme=dark]{--calendar-primary: #60a5fa;--calendar-background: #1f2937;--calendar-text: #f9fafb;--calendar-border: #374151;--calendar-hover: #374151;--calendar-selected: #3b82f6;--calendar-today: #1e40af;--calendar-disabled: #6b7280}._datePicker_pdqgs_1{position:relative;display:inline-block;width:100%}._input_pdqgs_7{width:100%;padding:10px 40px 10px 12px;border:1px solid var(--datepicker-border, #d1d5db);border-radius:var(--datepicker-radius, 6px);font-size:var(--datepicker-font-size, 14px);cursor:pointer;background:var(--datepicker-background, white);color:var(--datepicker-text, #1f2937);transition:border-color .2s,box-shadow .2s;box-sizing:border-box}._input_pdqgs_7:hover{border-color:var(--datepicker-border-hover, #9ca3af)}._input_pdqgs_7:focus{outline:none;border-color:var(--datepicker-border-focus, #3b82f6);box-shadow:0 0 0 3px var(--datepicker-focus-ring, rgba(59, 130, 246, .1))}._input_pdqgs_7:disabled{background:#f3f4f6;cursor:not-allowed;opacity:.6}._iconButton_pdqgs_36{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;font-size:18px;display:flex;align-items:center;justify-content:center;color:var(--datepicker-icon, #6b7280);transition:color .2s}._iconButton_pdqgs_36:hover{color:var(--datepicker-icon-hover, #3b82f6)}._iconButton_pdqgs_36:disabled{cursor:not-allowed;opacity:.5}._popup_pdqgs_62{position:absolute;top:calc(100% + 8px);left:0;z-index:1000;box-shadow:0 10px 25px #00000026;border-radius:8px;background:#fff}@media(max-width:640px){._popup_pdqgs_62{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);max-width:90vw}}
|