react-attendance-calendar 2.3.2 → 2.3.4

package/README.md

@@ -1,15 +1,19 @@
 # React Attendance Calendar
 
-A modern, customizable attendance calendar component for React with TypeScript support.
+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.
 
 ## ✨ Features
 
-- 📅 Responsive design (7-14 columns based on width)
-- 🎨 Fully customizable with Tailwind CSS classes
-- 🖱️ Interactive date clicks with callbacks
-- 📱 Mobile-friendly
-- 🔧 TypeScript support
-- 🎭 Beautiful default styling included
+- 📅 **Responsive design** - Automatically switches between 7-14 columns based on container width
+- 🎨 **Fully customizable** - Complete control with Tailwind CSS classes
+- 🖱️ **Interactive** - Date click callbacks with hover effects
+- 📱 **Mobile-friendly** - Responsive grid layout with touch-friendly interactions
+- 🔧 **TypeScript support** - Full type safety and IntelliSense
+- 🎭 **Beautiful defaults** - Modern design with emerald/amber color scheme
+- 📊 **Multi-month support** - Provide attendance data for multiple months at once
+- 🔄 **Flexible data format** - Support both single month and array of months
+- ⚡ **Auto-initialization** - Defaults to current month if no view provided
+- 🎯 **Smart navigation** - Seamless month/year transitions
 
 ## 📦 Installation
 
@@ -46,7 +50,20 @@ function App() {
 }
 ```
 
-### With Attendance Data
+### Minimal Example (Auto-initialize to current month)
+
+```tsx
+import { AttendanceCalendar } from "react-attendance-calendar";
+import "react-attendance-calendar/styles.css";
+
+function App() {
+  const [view, setView] = useState();
+
+  return <AttendanceCalendar onChangeView={setView} />;
+}
+```
+
+### With Single Month Attendance Data
 
 ```tsx
 import { AttendanceCalendar } from "react-attendance-calendar";
@@ -67,6 +84,43 @@ const attendanceData = {
 />;
 ```
 
+### With Multiple Months Attendance Data
+
+```tsx
+import { AttendanceCalendar } from "react-attendance-calendar";
+import "react-attendance-calendar/styles.css";
+
+// Provide data for multiple months at once
+const attendanceData = [
+  // January 2024
+  {
+    year: 2024,
+    monthIndex: 0,
+    presentDays: new Set([
+      1, 2, 3, 5, 8, 9, 10, 12, 15, 16, 17, 19, 22, 23, 24, 26, 29, 30, 31,
+    ]),
+    absentDays: new Set([4, 11, 18, 25]),
+  },
+  // February 2025
+  {
+    year: 2025,
+    monthIndex: 1,
+    presentDays: new Set([
+      1, 2, 5, 6, 7, 8, 9, 12, 13, 14, 15, 16, 19, 20, 21, 22, 23, 26, 27, 28,
+      29,
+    ]),
+    absentDays: new Set([3, 10, 17, 24]),
+  },
+];
+
+<AttendanceCalendar
+  view={view}
+  onChangeView={setView}
+  attendanceData={attendanceData}
+  onDateClick={(day, month, year) => console.log(day, month, year)}
+/>;
+```
+
 ### Custom Styling
 
 ```tsx
@@ -96,15 +150,28 @@ function App() {
     monthIndex: 0, // January
   });
 
-  // Sample attendance data
-  const attendanceData: AttendanceData = {
-    year: 2024,
-    monthIndex: 0,
-    presentDays: new Set([
-      1, 2, 3, 5, 8, 9, 10, 12, 15, 16, 17, 19, 22, 23, 24, 26, 29, 30, 31,
-    ]),
-    absentDays: new Set([4, 11, 18, 25]),
-  };
+  // Sample attendance data for multiple months
+  const attendanceData: AttendanceData = [
+    // January 2024
+    {
+      year: 2024,
+      monthIndex: 0,
+      presentDays: new Set([
+        1, 2, 3, 5, 8, 9, 10, 12, 15, 16, 17, 19, 22, 23, 24, 26, 29, 30, 31,
+      ]),
+      absentDays: new Set([4, 11, 18, 25]),
+    },
+    // February 2025
+    {
+      year: 2025,
+      monthIndex: 1,
+      presentDays: new Set([
+        1, 2, 5, 6, 7, 8, 9, 12, 13, 14, 15, 16, 19, 20, 21, 22, 23, 26, 27, 28,
+        29,
+      ]),
+      absentDays: new Set([3, 10, 17, 24]),
+    },
+  ];
 
   const handleDateClick = (day: number, month: number, year: number) => {
     console.log(`Clicked on ${day}/${month + 1}/${year}`);
@@ -137,22 +204,22 @@ export default App;
 
 ## 📚 Props
 
-| Prop                        | Type                         | Required | Description                            |
-| --------------------------- | ---------------------------- | -------- | -------------------------------------- |
-| `view`                      | `MonthView`                  | ✅       | Current month and year                 |
-| `onChangeView`              | `(view: MonthView) => void`  | ✅       | Month navigation callback              |
-| `attendanceData`            | `AttendanceData`             | ❌       | Present/absent days data               |
-| `onDateClick`               | `(day, month, year) => void` | ❌       | Date click callback                    |
-| `showNavigation`            | `boolean`                    | ❌       | Show nav arrows (default: `true`)      |
-| `showWeekdayHeaders`        | `boolean`                    | ❌       | Show weekday headers (default: `true`) |
-| `className`                 | `string`                     | ❌       | Additional classes for root element    |
-| `cellClassName`             | `string`                     | ❌       | Custom classes for all cells           |
-| `presentCellClassName`      | `string`                     | ❌       | Custom classes for present days        |
-| `absentCellClassName`       | `string`                     | ❌       | Custom classes for absent days         |
-| `navigationButtonClassName` | `string`                     | ❌       | Custom classes for nav buttons         |
-| `monthTitleClassName`       | `string`                     | ❌       | Custom classes for month title         |
-| `weekdayHeaderClassName`    | `string`                     | ❌       | Custom classes for weekday headers     |
-| `containerClassName`        | `string`                     | ❌       | Custom classes for main container      |
+| Prop                        | Type                         | Required | Description                                        |
+| --------------------------- | ---------------------------- | -------- | -------------------------------------------------- |
+| `view`                      | `MonthView`                  | ❌       | Current month and year (defaults to current month) |
+| `onChangeView`              | `(view: MonthView) => void`  | ✅       | Month navigation callback                          |
+| `attendanceData`            | `AttendanceData`             | ❌       | Present/absent days data (single month or array)   |
+| `onDateClick`               | `(day, month, year) => void` | ❌       | Date click callback                                |
+| `showNavigation`            | `boolean`                    | ❌       | Show nav arrows (default: `true`)                  |
+| `showWeekdayHeaders`        | `boolean`                    | ❌       | Show weekday headers (default: `true`)             |
+| `className`                 | `string`                     | ❌       | Additional classes for root element                |
+| `cellClassName`             | `string`                     | ❌       | Custom classes for all cells                       |
+| `presentCellClassName`      | `string`                     | ❌       | Custom classes for present days                    |
+| `absentCellClassName`       | `string`                     | ❌       | Custom classes for absent days                     |
+| `navigationButtonClassName` | `string`                     | ❌       | Custom classes for nav buttons                     |
+| `monthTitleClassName`       | `string`                     | ❌       | Custom classes for month title                     |
+| `weekdayHeaderClassName`    | `string`                     | ❌       | Custom classes for weekday headers                 |
+| `containerClassName`        | `string`                     | ❌       | Custom classes for main container                  |
 
 ### TypeScript
 
@@ -162,22 +229,86 @@ type MonthView = {
   monthIndex: number; // 0-11 (0 = January)
 };
 
-type AttendanceData = {
+type MonthAttendanceData = {
   year: number;
   monthIndex: number;
   presentDays: Set<number>; // Day numbers 1-31
   absentDays: Set<number>; // Day numbers 1-31
 };
+
+// Support both single month and multiple months
+type AttendanceData = MonthAttendanceData | MonthAttendanceData[];
 ```
 
 ## 🎨 Styling
 
-The component uses Tailwind CSS classes. Default theme includes:
+The component uses Tailwind CSS classes with a modern design system:
+
+### Default Theme
+
+- **Present days**: Emerald green (`emerald-500`) with white text
+- **Absent days**: Amber orange (`amber-500`) with white text
+- **Regular days**: Slate gray (`slate-700`) with light border
+- **Navigation**: Rounded buttons with hover effects
+- **Typography**: Clean, readable fonts with proper hierarchy
+
+### Responsive Behavior
+
+- **Desktop**: 7 columns with larger cells (`size-12 sm:size-14`)
+- **Wide screens**: 14 columns with smaller cells (`size-8 sm:size-12`)
+- **Mobile**: Optimized touch targets and spacing
+
+### Customization
+
+Override any styling using the `className` props. All Tailwind classes are supported:
+
+- Colors, spacing, borders, shadows
+- Hover effects, transitions, animations
+- Responsive breakpoints and utilities
+
+## 🔄 Multi-Month Data Format
+
+The `attendanceData` prop supports two formats:
+
+### Single Month (Legacy Format)
+
+```typescript
+const attendanceData: AttendanceData = {
+  year: 2024,
+  monthIndex: 0,
+  presentDays: new Set([1, 2, 3, 5, 8]),
+  absentDays: new Set([4, 6, 7]),
+};
+```
+
+### Multiple Months (New Format)
+
+```typescript
+const attendanceData: AttendanceData = [
+  {
+    year: 2024,
+    monthIndex: 0, // January
+    presentDays: new Set([1, 2, 3, 5, 8]),
+    absentDays: new Set([4, 6, 7]),
+  },
+  {
+    year: 2024,
+    monthIndex: 1, // February
+    presentDays: new Set([1, 2, 5, 6, 7]),
+    absentDays: new Set([3, 4, 8]),
+  },
+  // ... add more months as needed
+];
+```
 
-- Present days: Green (`emerald-500`)
-- Absent days: Orange (`amber-500`)
+**Benefits of Multi-Month Format:**
 
-Customize with any Tailwind classes via the `className` props.
+- ✅ **Batch loading** - Load attendance data for multiple months at once
+- ✅ **Better performance** - No need to fetch data when navigating between months
+- ✅ **Seamless navigation** - Smooth transitions between months with data
+- ✅ **Backward compatible** - Works with existing single month format
+- ✅ **Memory efficient** - Store data in memory for instant access
+- ✅ **Offline ready** - Pre-load data for offline calendar browsing
 
 ## 📝 License
 

package/dist/AttendanceCalendar.d.ts

@@ -4,14 +4,15 @@ export type MonthView = {
     year: number;
     monthIndex: number;
 };
-export type AttendanceData = {
+export type MonthAttendanceData = {
     year: number;
     monthIndex: number;
     presentDays: Set<number>;
     absentDays: Set<number>;
 };
+export type AttendanceData = MonthAttendanceData | MonthAttendanceData[];
 export type CalendarProps = {
-    view: MonthView;
+    view?: MonthView;
     onChangeView: (next: MonthView) => void;
     attendanceData?: AttendanceData;
     onDateClick?: (day: number, month: number, year: number) => void;

package/dist/AttendanceCalendar.d.ts.map

@@ -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"}
+{"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"}