meeting-scheduler-npm-package 1.1.1 → 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.
Files changed (3) hide show
  1. package/README.md +47 -11
  2. package/dist/MeetingScheduler.css +1 -1
  3. 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 reusable React / Next.js meeting scheduler component.
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 { MeetingScheduler } from "meeting-scheduler-npm-package";
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
- export default function Page() {
18
- return <MeetingScheduler />;
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;
package/dist/MeetingScheduler.css CHANGED
@@ -1 +1 @@
1
- .meeting-scheduler-wrapper{background:linear-gradient(90deg,#eff6ff,#eef2ff,#faf5ff);min-height:100vh;padding:0 8px 40px}@media (min-width:768px){.meeting-scheduler-wrapper{padding-left:32px;padding-right:32px}}.header-section{background:linear-gradient(90deg,#f56218,#f54900,#fbaa02);border-radius:16px;box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);color:#fff;margin-bottom:20px;padding:24px}.badge{background:hsla(0,0%,100%,.2);border-radius:9999px;display:inline-block;font-size:.875rem;margin-bottom:4px;padding:4px 16px;text-align:center;width:170px}.title{font-size:1.5rem;font-weight:600;margin-bottom:8px}@media (min-width:768px){.title{font-size:1.875rem}}@media (min-width:1280px){.title{font-size:2.25rem}}.meta{display:flex;flex-wrap:wrap;font-size:.875rem;gap:16px}.meta-item{align-items:center;display:flex;font-size:1.125rem;gap:8px}@media (min-width:768px){.meta-item{font-size:1.25rem}}.main-grid{display:grid;gap:24px}@media (min-width:1280px){.main-grid{grid-template-columns:845px 410px}}.calendar-section{background:#fff;border-radius:16px;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);display:grid;gap:24px;padding:24px}@media (min-width:768px){.calendar-section{grid-template-columns:1fr 1fr}}.section-title{color:#1e2939;font-size:1.5rem;font-weight:600;margin-bottom:8px}@media (min-width:768px){.section-title{font-size:1.875rem}}@media (min-width:1280px){.section-title{font-size:2.25rem}}.subtitle{color:#6a7282;font-size:.875rem;margin-bottom:20px}@media (min-width:768px){.subtitle{font-size:1rem}}.month-nav{align-items:center;display:flex;justify-content:space-between;margin-bottom:16px}.month-title{color:#1e2939;font-weight:600}.nav-button{border-radius:8px;padding:8px;transition:background-color .2s}.nav-button:hover:not(:disabled){background:#f3f4f6}.nav-button:disabled{color:#d1d5db;cursor:not-allowed}.weekdays{display:grid;gap:8px;grid-template-columns:repeat(7,1fr);margin-bottom:8px}.weekday{color:#4f39f6;font-size:.75rem;font-weight:600;padding:8px;text-align:center}.calendar-days{display:grid;gap:8px;grid-template-columns:repeat(7,1fr)}.day-button{background:transparent;border:none;border-radius:8px;cursor:pointer;padding:12px;text-align:center;transition:all .2s}.day-button:hover{background:#f3f4f6}.day-button.selected{background:linear-gradient(180deg,#f66117,#fbaa02);color:#fff;font-weight:700}.day-button.past{color:#d1d5db;cursor:not-allowed}.day-button:disabled{visibility:hidden}.time-panel{padding-left:0}@media (min-width:768px){.time-panel{padding-left:24px}}.selected-date-title{font-weight:600;margin-bottom:12px;margin-top:5.5rem}.time-list{display:flex;flex-direction:column;gap:8px;max-height:400px;overflow-y:auto;padding-right:8px}.time-button{background:#f9fafb;border:none;border-radius:8px;cursor:pointer;padding:12px;text-align:left;transition:all .2s;width:100%}.time-button.selected{background:#f66117;color:#fff;font-weight:600}.time-button:hover:not(.selected):not(:disabled){background:#f3f4f6}.time-button:disabled{background:#f3f4f6;color:#d1d5db;cursor:not-allowed}.no-slots{color:#9ca3af;padding:40px 0;text-align:center}.form-section{align-self:flex-start;background:#fff;border-radius:16px;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);padding:24px}.form-title{font-size:1.25rem;font-weight:600;margin-bottom:24px}.preview-box{background:linear-gradient(90deg,#eef2ff,#faf5ff);border:1px solid #bfdbfe;border-radius:8px;margin-bottom:22px;padding:16px}.preview-item{align-items:center;display:flex;gap:8px;margin-bottom:4px}.preview-date{color:#432dd7;font-weight:600}.preview-time{color:#8200db;font-weight:600}.form-group,.label{margin-bottom:8px}.label{align-items:center;display:flex;font-size:.875rem;font-weight:500;gap:8px}.input,.textarea{border:1px solid #d1d5db;border-radius:8px;font-size:1rem;outline:none;padding:8px 12px;transition:ring .2s;width:100%}.input:focus,.textarea:focus{border-color:#f66117;box-shadow:0 0 0 1px #f66117}.textarea{min-height:80px;padding:12px;resize:vertical}.submit-button{border:none;border-radius:8px;cursor:pointer;font-weight:600;padding:16px;transition:opacity .2s;width:100%}.submit-button.enabled{background:linear-gradient(90deg,#f56116,#fba702);color:#fff}.submit-button.enabled:hover{opacity:.9}.submit-button.disabled{background:#e5e7eb;color:#99a1af;cursor:not-allowed}.terms-text{color:#4b5563;font-size:.75rem;margin-top:8px;text-align:center}.terms-link{color:#4f39f6;font-size:.875rem;text-decoration:underline}.day-button.disabled{pointer-events:none;visibility:hidden}.day-button.past{color:#d1d5db!important;cursor:not-allowed!important}.day-button.past,.day-button.past:hover{background:transparent!important}
1
+ .meeting-scheduler-wrapper{background:linear-gradient(90deg,#eff6ff,#eef2ff,#faf5ff);margin-left:auto;margin-right:auto;max-width:1440px;min-height:100vh;padding:0 8px 40px}@media (min-width:768px){.meeting-scheduler-wrapper{padding-left:32px;padding-right:32px}}.header-section{background:linear-gradient(90deg,#f56218,#f54900,#fbaa02);border-radius:16px;box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);color:#fff;margin-bottom:20px;padding:24px}.badge{background:hsla(0,0%,100%,.2);border-radius:9999px;display:inline-block;font-size:.875rem;margin-bottom:4px;padding:4px 16px;text-align:center;width:170px}.title{font-size:1.5rem;font-weight:600;margin-bottom:8px}@media (min-width:768px){.title{font-size:1.875rem}}@media (min-width:1280px){.title{font-size:2.25rem}}.meta{display:flex;flex-wrap:wrap;font-size:.875rem;gap:16px}.meta-item{align-items:center;display:flex;font-size:1.125rem;gap:8px}@media (min-width:768px){.meta-item{font-size:1.25rem}}.main-grid{display:grid;gap:24px}@media (min-width:1280px){.main-grid{grid-template-columns:845px 410px}}.calendar-section{background:#fff;border-radius:16px;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);display:grid;gap:24px;padding:24px}@media (min-width:768px){.calendar-section{grid-template-columns:1fr 1fr}}.section-title{color:#1e2939;font-size:1.5rem;font-weight:600;margin-bottom:8px}@media (min-width:768px){.section-title{font-size:1.875rem}}@media (min-width:1280px){.section-title{font-size:2.25rem}}.subtitle{color:#6a7282;font-size:.875rem;margin-bottom:20px}@media (min-width:768px){.subtitle{font-size:1rem}}.month-nav{align-items:center;display:flex;justify-content:space-between;margin-bottom:16px}.month-title{color:#1e2939;font-weight:600}.nav-button{border-radius:8px;padding:8px;transition:background-color .2s}.nav-button:hover:not(:disabled){background:#f3f4f6}.nav-button:disabled{color:#d1d5db;cursor:not-allowed}.weekdays{display:grid;gap:8px;grid-template-columns:repeat(7,1fr);margin-bottom:8px}.weekday{color:#4f39f6;font-size:.75rem;font-weight:600;padding:8px;text-align:center}.calendar-days{display:grid;gap:8px;grid-template-columns:repeat(7,1fr)}.day-button{align-items:center;background:transparent;border:none;border-radius:8px;cursor:pointer;display:flex;font-weight:500;height:40px;justify-content:center;min-width:40px;padding:12px;text-align:center;transition:all .2s}.day-button:hover{background:#f3f4f6}.day-button.selected{background:linear-gradient(180deg,#f66117,#fbaa02);color:#fff;font-weight:700}.day-button.past{color:#d1d5db;cursor:not-allowed}.day-button.past,.day-button.past:hover{background:transparent}.day-button.disabled{pointer-events:none;visibility:hidden}.time-panel{padding-left:0}@media (min-width:768px){.time-panel{padding-left:24px}}.selected-date-title{font-weight:600;margin-bottom:12px;margin-top:5.5rem}.time-list{display:flex;flex-direction:column;gap:8px;max-height:400px;overflow-y:auto;padding-right:8px}.time-button{background:#f9fafb;border:none;border-radius:8px;cursor:pointer;padding:12px;text-align:left;transition:all .2s;width:100%}.time-button.selected{background:#f66117;color:#fff;font-weight:600}.time-button:hover:not(.selected):not(:disabled){background:#f3f4f6}.time-button:disabled{background:#f3f4f6;color:#d1d5db;cursor:not-allowed}.no-slots{color:#9ca3af;padding:40px 0;text-align:center}.form-section{align-self:flex-start;background:#fff;border-radius:16px;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);padding:24px}.form-title{font-size:1.25rem;font-weight:600;margin-bottom:24px}.preview-box{background:linear-gradient(90deg,#eef2ff,#faf5ff);border:1px solid #bfdbfe;border-radius:8px;margin-bottom:22px;padding:16px}.preview-item{align-items:center;display:flex;gap:8px;margin-bottom:4px}.preview-date{color:#432dd7;font-weight:600}.preview-time{color:#8200db;font-weight:600}.form-group,.label{margin-bottom:8px}.label{align-items:center;display:flex;font-size:.875rem;font-weight:500;gap:8px}.input,.textarea{border:1px solid #d1d5db;border-radius:8px;font-size:1rem;outline:none;padding:8px 12px;transition:ring .2s;width:100%}.input:focus,.textarea:focus{border-color:#f66117;box-shadow:0 0 0 1px #f66117}.textarea{min-height:80px;padding:12px;resize:vertical}.submit-button{border:none;border-radius:8px;cursor:pointer;font-weight:600;padding:16px;transition:opacity .2s;width:100%}.submit-button.enabled{background:linear-gradient(90deg,#f56116,#fba702);color:#fff}.submit-button.enabled:hover{opacity:.9}.submit-button.disabled{background:#e5e7eb;color:#99a1af;cursor:not-allowed}.terms-text{color:#4b5563;font-size:.75rem;margin-top:8px;text-align:center}.terms-link{color:#4f39f6;font-size:.875rem;text-decoration:underline}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "meeting-scheduler-npm-package",
3
- "version": "1.1.1",
3
+ "version": "1.1.3",
4
4
  "description": "Reusable meeting scheduler component with pure CSS (no Tailwind dependency)",
5
5
  "author": "Mubin",
6
6
  "license": "MIT",