react-attendance-calendar 2.3.2 → 2.3.4

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.
Files changed (6) hide show
  1. package/README.md +169 -38
  2. package/dist/AttendanceCalendar.d.ts +3 -2
  3. package/dist/AttendanceCalendar.d.ts.map +1 -1
  4. package/dist/index.js +473 -468
  5. package/dist/index.js.map +1 -1
  6. package/package.json +1 -1
package/README.md CHANGED
@@ -1,15 +1,19 @@
1
1
  # React Attendance Calendar
2
2
 
3
- A modern, customizable attendance calendar component for React with TypeScript support.
3
+ A modern, responsive, and highly customizable attendance calendar component for React with full TypeScript support. Perfect for tracking employee attendance, student presence, or any date-based status system.
4
4
 
5
5
  ## ✨ Features
6
6
 
7
- - 📅 Responsive design (7-14 columns based on width)
8
- - 🎨 Fully customizable with Tailwind CSS classes
9
- - 🖱️ Interactive date clicks with callbacks
10
- - 📱 Mobile-friendly
11
- - 🔧 TypeScript support
12
- - 🎭 Beautiful default styling included
7
+ - 📅 **Responsive design** - Automatically switches between 7-14 columns based on container width
8
+ - 🎨 **Fully customizable** - Complete control with Tailwind CSS classes
9
+ - 🖱️ **Interactive** - Date click callbacks with hover effects
10
+ - 📱 **Mobile-friendly** - Responsive grid layout with touch-friendly interactions
11
+ - 🔧 **TypeScript support** - Full type safety and IntelliSense
12
+ - 🎭 **Beautiful defaults** - Modern design with emerald/amber color scheme
13
+ - 📊 **Multi-month support** - Provide attendance data for multiple months at once
14
+ - 🔄 **Flexible data format** - Support both single month and array of months
15
+ - ⚡ **Auto-initialization** - Defaults to current month if no view provided
16
+ - 🎯 **Smart navigation** - Seamless month/year transitions
13
17
 
14
18
  ## 📦 Installation
15
19
 
@@ -46,7 +50,20 @@ function App() {
46
50
  }
47
51
  ```
48
52
 
49
- ### With Attendance Data
53
+ ### Minimal Example (Auto-initialize to current month)
54
+
55
+ ```tsx
56
+ import { AttendanceCalendar } from "react-attendance-calendar";
57
+ import "react-attendance-calendar/styles.css";
58
+
59
+ function App() {
60
+ const [view, setView] = useState();
61
+
62
+ return <AttendanceCalendar onChangeView={setView} />;
63
+ }
64
+ ```
65
+
66
+ ### With Single Month Attendance Data
50
67
 
51
68
  ```tsx
52
69
  import { AttendanceCalendar } from "react-attendance-calendar";
@@ -67,6 +84,43 @@ const attendanceData = {
67
84
  />;
68
85
  ```
69
86
 
87
+ ### With Multiple Months Attendance Data
88
+
89
+ ```tsx
90
+ import { AttendanceCalendar } from "react-attendance-calendar";
91
+ import "react-attendance-calendar/styles.css";
92
+
93
+ // Provide data for multiple months at once
94
+ const attendanceData = [
95
+ // January 2024
96
+ {
97
+ year: 2024,
98
+ monthIndex: 0,
99
+ presentDays: new Set([
100
+ 1, 2, 3, 5, 8, 9, 10, 12, 15, 16, 17, 19, 22, 23, 24, 26, 29, 30, 31,
101
+ ]),
102
+ absentDays: new Set([4, 11, 18, 25]),
103
+ },
104
+ // February 2025
105
+ {
106
+ year: 2025,
107
+ monthIndex: 1,
108
+ presentDays: new Set([
109
+ 1, 2, 5, 6, 7, 8, 9, 12, 13, 14, 15, 16, 19, 20, 21, 22, 23, 26, 27, 28,
110
+ 29,
111
+ ]),
112
+ absentDays: new Set([3, 10, 17, 24]),
113
+ },
114
+ ];
115
+
116
+ <AttendanceCalendar
117
+ view={view}
118
+ onChangeView={setView}
119
+ attendanceData={attendanceData}
120
+ onDateClick={(day, month, year) => console.log(day, month, year)}
121
+ />;
122
+ ```
123
+
70
124
  ### Custom Styling
71
125
 
72
126
  ```tsx
@@ -96,15 +150,28 @@ function App() {
96
150
  monthIndex: 0, // January
97
151
  });
98
152
 
99
- // Sample attendance data
100
- const attendanceData: AttendanceData = {
101
- year: 2024,
102
- monthIndex: 0,
103
- presentDays: new Set([
104
- 1, 2, 3, 5, 8, 9, 10, 12, 15, 16, 17, 19, 22, 23, 24, 26, 29, 30, 31,
105
- ]),
106
- absentDays: new Set([4, 11, 18, 25]),
107
- };
153
+ // Sample attendance data for multiple months
154
+ const attendanceData: AttendanceData = [
155
+ // January 2024
156
+ {
157
+ year: 2024,
158
+ monthIndex: 0,
159
+ presentDays: new Set([
160
+ 1, 2, 3, 5, 8, 9, 10, 12, 15, 16, 17, 19, 22, 23, 24, 26, 29, 30, 31,
161
+ ]),
162
+ absentDays: new Set([4, 11, 18, 25]),
163
+ },
164
+ // February 2025
165
+ {
166
+ year: 2025,
167
+ monthIndex: 1,
168
+ presentDays: new Set([
169
+ 1, 2, 5, 6, 7, 8, 9, 12, 13, 14, 15, 16, 19, 20, 21, 22, 23, 26, 27, 28,
170
+ 29,
171
+ ]),
172
+ absentDays: new Set([3, 10, 17, 24]),
173
+ },
174
+ ];
108
175
 
109
176
  const handleDateClick = (day: number, month: number, year: number) => {
110
177
  console.log(`Clicked on ${day}/${month + 1}/${year}`);
@@ -137,22 +204,22 @@ export default App;
137
204
 
138
205
  ## 📚 Props
139
206
 
140
- | Prop | Type | Required | Description |
141
- | --------------------------- | ---------------------------- | -------- | -------------------------------------- |
142
- | `view` | `MonthView` | ✅ | Current month and year |
143
- | `onChangeView` | `(view: MonthView) => void` | ✅ | Month navigation callback |
144
- | `attendanceData` | `AttendanceData` | ❌ | Present/absent days data |
145
- | `onDateClick` | `(day, month, year) => void` | ❌ | Date click callback |
146
- | `showNavigation` | `boolean` | ❌ | Show nav arrows (default: `true`) |
147
- | `showWeekdayHeaders` | `boolean` | ❌ | Show weekday headers (default: `true`) |
148
- | `className` | `string` | ❌ | Additional classes for root element |
149
- | `cellClassName` | `string` | ❌ | Custom classes for all cells |
150
- | `presentCellClassName` | `string` | ❌ | Custom classes for present days |
151
- | `absentCellClassName` | `string` | ❌ | Custom classes for absent days |
152
- | `navigationButtonClassName` | `string` | ❌ | Custom classes for nav buttons |
153
- | `monthTitleClassName` | `string` | ❌ | Custom classes for month title |
154
- | `weekdayHeaderClassName` | `string` | ❌ | Custom classes for weekday headers |
155
- | `containerClassName` | `string` | ❌ | Custom classes for main container |
207
+ | Prop | Type | Required | Description |
208
+ | --------------------------- | ---------------------------- | -------- | -------------------------------------------------- |
209
+ | `view` | `MonthView` | ❌ | Current month and year (defaults to current month) |
210
+ | `onChangeView` | `(view: MonthView) => void` | ✅ | Month navigation callback |
211
+ | `attendanceData` | `AttendanceData` | ❌ | Present/absent days data (single month or array) |
212
+ | `onDateClick` | `(day, month, year) => void` | ❌ | Date click callback |
213
+ | `showNavigation` | `boolean` | ❌ | Show nav arrows (default: `true`) |
214
+ | `showWeekdayHeaders` | `boolean` | ❌ | Show weekday headers (default: `true`) |
215
+ | `className` | `string` | ❌ | Additional classes for root element |
216
+ | `cellClassName` | `string` | ❌ | Custom classes for all cells |
217
+ | `presentCellClassName` | `string` | ❌ | Custom classes for present days |
218
+ | `absentCellClassName` | `string` | ❌ | Custom classes for absent days |
219
+ | `navigationButtonClassName` | `string` | ❌ | Custom classes for nav buttons |
220
+ | `monthTitleClassName` | `string` | ❌ | Custom classes for month title |
221
+ | `weekdayHeaderClassName` | `string` | ❌ | Custom classes for weekday headers |
222
+ | `containerClassName` | `string` | ❌ | Custom classes for main container |
156
223
 
157
224
  ### TypeScript
158
225
 
@@ -162,22 +229,86 @@ type MonthView = {
162
229
  monthIndex: number; // 0-11 (0 = January)
163
230
  };
164
231
 
165
- type AttendanceData = {
232
+ type MonthAttendanceData = {
166
233
  year: number;
167
234
  monthIndex: number;
168
235
  presentDays: Set<number>; // Day numbers 1-31
169
236
  absentDays: Set<number>; // Day numbers 1-31
170
237
  };
238
+
239
+ // Support both single month and multiple months
240
+ type AttendanceData = MonthAttendanceData | MonthAttendanceData[];
171
241
  ```
172
242
 
173
243
  ## 🎨 Styling
174
244
 
175
- The component uses Tailwind CSS classes. Default theme includes:
245
+ The component uses Tailwind CSS classes with a modern design system:
246
+
247
+ ### Default Theme
248
+
249
+ - **Present days**: Emerald green (`emerald-500`) with white text
250
+ - **Absent days**: Amber orange (`amber-500`) with white text
251
+ - **Regular days**: Slate gray (`slate-700`) with light border
252
+ - **Navigation**: Rounded buttons with hover effects
253
+ - **Typography**: Clean, readable fonts with proper hierarchy
254
+
255
+ ### Responsive Behavior
256
+
257
+ - **Desktop**: 7 columns with larger cells (`size-12 sm:size-14`)
258
+ - **Wide screens**: 14 columns with smaller cells (`size-8 sm:size-12`)
259
+ - **Mobile**: Optimized touch targets and spacing
260
+
261
+ ### Customization
262
+
263
+ Override any styling using the `className` props. All Tailwind classes are supported:
264
+
265
+ - Colors, spacing, borders, shadows
266
+ - Hover effects, transitions, animations
267
+ - Responsive breakpoints and utilities
268
+
269
+ ## 🔄 Multi-Month Data Format
270
+
271
+ The `attendanceData` prop supports two formats:
272
+
273
+ ### Single Month (Legacy Format)
274
+
275
+ ```typescript
276
+ const attendanceData: AttendanceData = {
277
+ year: 2024,
278
+ monthIndex: 0,
279
+ presentDays: new Set([1, 2, 3, 5, 8]),
280
+ absentDays: new Set([4, 6, 7]),
281
+ };
282
+ ```
283
+
284
+ ### Multiple Months (New Format)
285
+
286
+ ```typescript
287
+ const attendanceData: AttendanceData = [
288
+ {
289
+ year: 2024,
290
+ monthIndex: 0, // January
291
+ presentDays: new Set([1, 2, 3, 5, 8]),
292
+ absentDays: new Set([4, 6, 7]),
293
+ },
294
+ {
295
+ year: 2024,
296
+ monthIndex: 1, // February
297
+ presentDays: new Set([1, 2, 5, 6, 7]),
298
+ absentDays: new Set([3, 4, 8]),
299
+ },
300
+ // ... add more months as needed
301
+ ];
302
+ ```
176
303
 
177
- - Present days: Green (`emerald-500`)
178
- - Absent days: Orange (`amber-500`)
304
+ **Benefits of Multi-Month Format:**
179
305
 
180
- Customize with any Tailwind classes via the `className` props.
306
+ - ✅ **Batch loading** - Load attendance data for multiple months at once
307
+ - ✅ **Better performance** - No need to fetch data when navigating between months
308
+ - ✅ **Seamless navigation** - Smooth transitions between months with data
309
+ - ✅ **Backward compatible** - Works with existing single month format
310
+ - ✅ **Memory efficient** - Store data in memory for instant access
311
+ - ✅ **Offline ready** - Pre-load data for offline calendar browsing
181
312
 
182
313
  ## 📝 License
183
314
 
package/dist/AttendanceCalendar.d.ts CHANGED
@@ -4,14 +4,15 @@ export type MonthView = {
4
4
  year: number;
5
5
  monthIndex: number;
6
6
  };
7
- export type AttendanceData = {
7
+ export type MonthAttendanceData = {
8
8
  year: number;
9
9
  monthIndex: number;
10
10
  presentDays: Set<number>;
11
11
  absentDays: Set<number>;
12
12
  };
13
+ export type AttendanceData = MonthAttendanceData | MonthAttendanceData[];
13
14
  export type CalendarProps = {
14
- view: MonthView;
15
+ view?: MonthView;
15
16
  onChangeView: (next: MonthView) => void;
16
17
  attendanceData?: AttendanceData;
17
18
  onDateClick?: (day: number, month: number, year: number) => void;
package/dist/AttendanceCalendar.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"AttendanceCalendar.d.ts","sourceRoot":"","sources":["../src/AttendanceCalendar.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAQ,KAAK,UAAU,EAAE,MAAM,MAAM,CAAC;AAI7C,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,UAEzC;AAED,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IACzB,UAAU,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,IAAI,EAAE,SAAS,CAAC;IAChB,YAAY,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACxC,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjE,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AAuCF,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EACzC,IAAI,EACJ,YAAY,EACZ,cAAc,EACd,WAAW,EACX,cAAqB,EACrB,kBAAyB,EACzB,SAAc,EAEd,aAAkB,EAClB,oBAAyB,EACzB,mBAAwB,EACxB,yBAA8B,EAC9B,sBAA2B,EAC3B,mBAAwB,EACxB,kBAAuB,GACxB,EAAE,aAAa,2CAkNf"}
1
+ {"version":3,"file":"AttendanceCalendar.d.ts","sourceRoot":"","sources":["../src/AttendanceCalendar.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAQ,KAAK,UAAU,EAAE,MAAM,MAAM,CAAC;AAI7C,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,UAEzC;AAED,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IACzB,UAAU,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,mBAAmB,GAAG,mBAAmB,EAAE,CAAC;AAEzE,MAAM,MAAM,aAAa,GAAG;IAC1B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,YAAY,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACxC,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjE,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AAuCF,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EACzC,IAA4E,EAC5E,YAAY,EACZ,cAAc,EACd,WAAW,EACX,cAAqB,EACrB,kBAAyB,EACzB,SAAc,EAEd,aAAkB,EAClB,oBAAyB,EACzB,mBAAwB,EACxB,yBAA8B,EAC9B,sBAA2B,EAC3B,mBAAwB,EACxB,kBAAuB,GACxB,EAAE,aAAa,2CAgOf"}