react-attendance-calendar 1.0.0 → 2.0.0

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 (4) hide show
  1. package/README.md +65 -56
  2. package/dist/index.js +3079 -352
  3. package/dist/index.js.map +1 -1
  4. package/package.json +3 -1
package/README.md CHANGED
@@ -1,18 +1,18 @@
1
- # Attendance Calendar
1
+ # React Attendance Calendar
2
2
 
3
- A highly customizable and developer-friendly React attendance calendar component with TypeScript support. This component provides a clean, modern interface for displaying attendance data with interactive features and full theme customization.
3
+ A highly customizable and developer-friendly React attendance calendar component with TypeScript support. This component provides a clean, modern interface for displaying attendance data with interactive features and complete styling control through Tailwind CSS classes.
4
4
 
5
5
  ## ✨ Features
6
6
 
7
7
  - 📅 **Responsive Design**: Automatically adjusts between 7 and 14 columns based on container width
8
- - 🎨 **Full Theme Customization**: Customize all colors, borders, and styling
8
+ - 🎨 **Complete Styling Control**: Use any Tailwind CSS classes for full customization
9
9
  - 🖱️ **Interactive Dates**: Click on dates to trigger custom actions
10
10
  - 📱 **Mobile Friendly**: Responsive design that works on all screen sizes
11
11
  - 🔧 **TypeScript Support**: Full TypeScript definitions included
12
12
  - ⚡ **Lightweight**: Minimal dependencies, only requires React
13
13
  - 🎯 **Accessible**: Includes proper ARIA labels and semantic HTML
14
- - 🎛️ **Developer Friendly**: Extensive props for customization
15
- - 🎭 **Pure Tailwind CSS**: No external CSS dependencies
14
+ - 🎛️ **Developer Friendly**: Granular className props for every element
15
+ - 🎭 **Pure Tailwind CSS**: No external CSS dependencies, uses `clsx` and `tailwind-merge`
16
16
 
17
17
  ## Installation
18
18
 
@@ -42,7 +42,7 @@ function App() {
42
42
  }
43
43
  ```
44
44
 
45
- ### With Attendance Data & Custom Theme
45
+ ### With Attendance Data & Custom Styling
46
46
 
47
47
  ```tsx
48
48
  import React, { useState } from "react";
@@ -50,7 +50,6 @@ import {
50
50
  AttendanceCalendar,
51
51
  MonthView,
52
52
  AttendanceData,
53
- CalendarTheme,
54
53
  } from "react-attendance-calendar";
55
54
 
56
55
  function App() {
@@ -69,17 +68,6 @@ function App() {
69
68
  absentDays: new Set([4, 11, 18, 25]),
70
69
  };
71
70
 
72
- // Custom theme
73
- const customTheme: CalendarTheme = {
74
- primaryColor: "#10b981", // Green for present
75
- absentColor: "#f59e0b", // Orange for absent
76
- textColor: "#1f2937",
77
- borderColor: "#d1d5db",
78
- mutedTextColor: "#9ca3af",
79
- hoverColor: "#f3f4f6",
80
- backgroundColor: "#ffffff",
81
- };
82
-
83
71
  const handleDateClick = (day: number, month: number, year: number) => {
84
72
  console.log(`Clicked on ${day}/${month + 1}/${year}`);
85
73
  // Your custom logic here
@@ -91,11 +79,16 @@ function App() {
91
79
  view={view}
92
80
  onChangeView={setView}
93
81
  attendanceData={attendanceData}
94
- theme={customTheme}
95
82
  onDateClick={handleDateClick}
96
83
  showNavigation={true}
97
84
  showWeekdayHeaders={true}
98
- className="border border-gray-200 rounded-lg p-4"
85
+ // Custom styling with className props
86
+ cellClassName="rounded-full"
87
+ presentCellClassName="bg-green-500 text-white shadow-lg"
88
+ absentCellClassName="bg-red-500 text-white border-2 border-red-300"
89
+ navigationButtonClassName="bg-blue-500 text-white hover:bg-blue-600"
90
+ monthTitleClassName="text-3xl text-purple-600"
91
+ containerClassName="border border-gray-200 rounded-lg p-4"
99
92
  />
100
93
  </div>
101
94
  );
@@ -106,16 +99,22 @@ function App() {
106
99
 
107
100
  ### AttendanceCalendar
108
101
 
109
- | Prop | Type | Required | Description |
110
- | -------------------- | ---------------------------------------------------- | -------- | ----------------------------------------------- |
111
- | `view` | `MonthView` | ✅ | Current month view with year and month index |
112
- | `onChangeView` | `(view: MonthView) => void` | ✅ | Callback when user navigates to different month |
113
- | `attendanceData` | `AttendanceData` | ❌ | Optional attendance data to display |
114
- | `theme` | `CalendarTheme` | ❌ | Custom theme colors and styling |
115
- | `onDateClick` | `(day: number, month: number, year: number) => void` | ❌ | Callback when a date is clicked |
116
- | `showNavigation` | `boolean` | ❌ | Show/hide month navigation (default: true) |
117
- | `showWeekdayHeaders` | `boolean` | ❌ | Show/hide weekday headers (default: true) |
118
- | `className` | `string` | ❌ | Additional CSS classes |
102
+ | Prop | Type | Required | Description |
103
+ | --------------------------- | ---------------------------------------------------- | -------- | ----------------------------------------------- |
104
+ | `view` | `MonthView` | ✅ | Current month view with year and month index |
105
+ | `onChangeView` | `(view: MonthView) => void` | ✅ | Callback when user navigates to different month |
106
+ | `attendanceData` | `AttendanceData` | ❌ | Optional attendance data to display |
107
+ | `onDateClick` | `(day: number, month: number, year: number) => void` | ❌ | Callback when a date is clicked |
108
+ | `showNavigation` | `boolean` | ❌ | Show/hide month navigation (default: true) |
109
+ | `showWeekdayHeaders` | `boolean` | ❌ | Show/hide weekday headers (default: true) |
110
+ | `className` | `string` | ❌ | Additional CSS classes for main container |
111
+ | `cellClassName` | `string` | ❌ | CSS classes for all calendar cells |
112
+ | `presentCellClassName` | `string` | ❌ | CSS classes for present day cells |
113
+ | `absentCellClassName` | `string` | ❌ | CSS classes for absent day cells |
114
+ | `navigationButtonClassName` | `string` | ❌ | CSS classes for prev/next buttons |
115
+ | `weekdayHeaderClassName` | `string` | ❌ | CSS classes for weekday headers |
116
+ | `monthTitleClassName` | `string` | ❌ | CSS classes for month title |
117
+ | `containerClassName` | `string` | ❌ | CSS classes for main container |
119
118
 
120
119
  ### Types
121
120
 
@@ -131,48 +130,58 @@ type AttendanceData = {
131
130
  presentDays: Set<number>; // Set of day numbers (1-31)
132
131
  absentDays: Set<number>; // Set of day numbers (1-31)
133
132
  };
134
-
135
- type CalendarTheme = {
136
- primaryColor?: string; // Color for present days (default: "#3b82f6")
137
- absentColor?: string; // Color for absent days (default: "#ef4444")
138
- textColor?: string; // Main text color (default: "#1f2937")
139
- borderColor?: string; // Border color (default: "#e5e7eb")
140
- mutedTextColor?: string; // Muted text color (default: "#6b7280")
141
- hoverColor?: string; // Hover background color (default: "#f3f4f6")
142
- backgroundColor?: string; // Background color (default: "#ffffff")
143
- };
144
133
  ```
145
134
 
146
135
  ## Styling
147
136
 
148
- The component uses Tailwind CSS classes. Make sure you have Tailwind CSS installed and configured in your project. The component uses these standard Tailwind classes:
137
+ The component uses Tailwind CSS classes with the `cn` utility function (combining `clsx` and `tailwind-merge`) for optimal class merging. Make sure you have Tailwind CSS installed and configured in your project.
138
+
139
+ ### Default Styling
149
140
 
150
- - Layout: `w-full`, `flex`, `grid`, `gap-3`, `gap-4`, `items-center`, `justify-center`
151
- - Sizing: `size-8`, `size-10`, `size-12`, `size-14`
152
- - Colors: `bg-emerald-500`, `bg-amber-500`, `text-slate-900`, `text-slate-600`
153
- - Borders: `border`, `border-slate-200`, `rounded-xl`, `rounded-2xl`
154
- - Spacing: `mb-4`, `mb-6`, `mb-8`, `p-6`, `p-8`
155
- - Typography: `text-xl`, `text-2xl`, `font-semibold`, `font-bold`
141
+ The component comes with modern, clean default styles:
156
142
 
157
- ### Custom Styling
143
+ - **Present days**: `bg-emerald-500 text-white`
144
+ - **Absent days**: `bg-amber-500 text-white`
145
+ - **Regular days**: `text-slate-700 border-2 border-slate-200`
146
+ - **Navigation buttons**: `border-2 border-slate-200 text-slate-700`
158
147
 
159
- You can customize the appearance using the `theme` prop or by adding custom CSS classes:
148
+ ### Custom Styling with className Props
149
+
150
+ You have complete control over styling using the granular className props:
160
151
 
161
152
  ```tsx
162
- // Example with custom styling
153
+ // Example with complete customization
163
154
  <AttendanceCalendar
164
155
  view={view}
165
156
  onChangeView={setView}
166
157
  attendanceData={attendanceData}
167
- theme={{
168
- primaryColor: "#3b82f6",
169
- absentColor: "#ef4444",
170
- textColor: "#1f2937",
171
- }}
172
- className="my-custom-calendar"
158
+ // Shape customization
159
+ cellClassName="rounded-full"
160
+ presentCellClassName="bg-green-500 text-white shadow-lg"
161
+ absentCellClassName="bg-red-500 text-white border-4 border-red-300"
162
+ // Navigation styling
163
+ navigationButtonClassName="bg-blue-500 text-white hover:bg-blue-600"
164
+ weekdayHeaderClassName="bg-gray-100 rounded-lg"
165
+ monthTitleClassName="text-3xl text-purple-600"
166
+ // Container styling
167
+ containerClassName="border border-gray-200 rounded-lg p-4"
173
168
  />
174
169
  ```
175
170
 
171
+ ### Available Styling Options
172
+
173
+ - **Shapes**: `rounded-full`, `rounded-lg`, `rounded-none`, `rounded-2xl`
174
+ - **Colors**: Any Tailwind color classes (`bg-blue-500`, `text-red-600`, etc.)
175
+ - **Effects**: `shadow-lg`, `hover:scale-105`, `transition-all`
176
+ - **Gradients**: `bg-gradient-to-r from-blue-500 to-purple-500`
177
+ - **Borders**: `border-2`, `border-4`, `border-dashed`
178
+
179
+ ### Pro Tips
180
+
181
+ - Use `cn()` utility for conditional classes: `cn("base-class", condition && "conditional-class")`
182
+ - Combine multiple effects: `"bg-blue-500 hover:bg-blue-600 transition-colors shadow-lg"`
183
+ - Override default colors completely with your own Tailwind classes
184
+
176
185
  ## License
177
186
 
178
187
  MIT