meeting-scheduler-npm-package 1.1.2 → 1.1.3
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/README.md +47 -11
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,19 +1,55 @@
|
|
|
1
|
-
# Meeting Scheduler
|
|
1
|
+
# Meeting Scheduler React Component
|
|
2
2
|
|
|
3
|
-
A
|
|
3
|
+
A beautiful, responsive, and user-friendly **30-minute meeting booking calendar** component.
|
|
4
|
+
No Tailwind CSS dependency — built with pure custom CSS.
|
|
5
|
+
Works seamlessly in any React project (Next.js, Vite, Create React App, etc.).
|
|
6
|
+
|
|
7
|
+
## Features
|
|
8
|
+
|
|
9
|
+
- Auto-detects user's timezone
|
|
10
|
+
- Disables past dates and slots that are too soon (less than 1 hour away)
|
|
11
|
+
- Fetches real-time available slots from your API
|
|
12
|
+
- Form validation + loading states
|
|
13
|
+
- Customizable API base URL, user ID, and availability ID
|
|
14
|
+
- Success/error callbacks for booking events
|
|
15
|
+
- Fully responsive design (mobile + desktop)
|
|
16
|
+
|
|
17
|
+
## Installation
|
|
18
|
+
|
|
19
|
+
```bash
|
|
20
|
+
npm install meeting-scheduler-npm-package
|
|
21
|
+
# or
|
|
22
|
+
yarn add meeting-scheduler-npm-package
|
|
23
|
+
# or
|
|
24
|
+
pnpm add meeting-scheduler-npm-package
|
|
4
25
|
|
|
5
|
-
## Requirements
|
|
6
|
-
- Next.js 13+
|
|
7
|
-
- React 18+
|
|
8
|
-
- Tailwind CSS
|
|
9
|
-
- SweetAlert2
|
|
10
26
|
|
|
11
|
-
## Usage
|
|
12
27
|
|
|
13
28
|
```tsx
|
|
14
|
-
import
|
|
29
|
+
import React from 'react';
|
|
30
|
+
import { MeetingScheduler } from 'meeting-scheduler-npm-package';
|
|
15
31
|
import 'meeting-scheduler-npm-package/MeetingScheduler.css';
|
|
16
32
|
|
|
17
|
-
|
|
18
|
-
return
|
|
33
|
+
function BookingPage() {
|
|
34
|
+
return (
|
|
35
|
+
<div style={{ padding: '2rem', maxWidth: '1400px', margin: '0 auto' }}>
|
|
36
|
+
<MeetingScheduler
|
|
37
|
+
apiBaseUrl="https://your-api-domain.com"
|
|
38
|
+
// optional props
|
|
39
|
+
defaultAvailabilityId={5}
|
|
40
|
+
defaultUserId={1}
|
|
41
|
+
initialMonth={new Date(2026, 0, 1)} // January 2026
|
|
42
|
+
onBookingSuccess={(payload) => {
|
|
43
|
+
console.log("Booking successful!", payload);
|
|
44
|
+
alert("Meeting booked successfully!");
|
|
45
|
+
}}
|
|
46
|
+
onBookingError={(error) => {
|
|
47
|
+
console.error("Booking failed", error);
|
|
48
|
+
alert("Something went wrong.");
|
|
49
|
+
}}
|
|
50
|
+
/>
|
|
51
|
+
</div>
|
|
52
|
+
);
|
|
19
53
|
}
|
|
54
|
+
|
|
55
|
+
export default BookingPage;
|