big-calendar 0.2.0 → 0.2.1

package/README.md

@@ -1,185 +1,70 @@
-# Big Calendar
+# big-calendar
 
-A highly customizable React calendar component library with multiple views, drag-and-drop, API integration, and extensive customization options.
+React + Tailwind implementation of [Big Calendar](https://github.com/lramos33/big-calendar), with extended host-app control over views, events, and behavior via props and API.
 
-> **Note**: This package is originally from [lramos33/big-calendar](https://github.com/lramos33/big-calendar) on GitHub.
+---
 
-## Features
+## Thank you & credit
 
-- 📅 **Multiple Views**: Day, Week, Month, Year, and Agenda views
-- 🎨 **Highly Customizable**: Full control over styling, API integration, and behavior
-- 🔄 **Drag & Drop**: Reschedule events by dragging
-- 🎯 **API Integration**: Connect to your backend or third-party calendars
-- 🎨 **Styling Control**: CSS variables, className props, and theme customization
-- 👤 **Single-User Mode**: Simplified UI for single-user applications
-- 📱 **Responsive**: Works on all screen sizes
-- 🌙 **Dark Mode**: Built-in dark mode support
+**A big thank you to the original author** [**lramos33**](https://github.com/lramos33) for the [Big Calendar](https://github.com/lramos33/big-calendar) project this package is based on. This fork adds React + Tailwind, host-controlled behavior, and API integration while building on that work.
 
-## Installation
+---
+
+## Install
 
 ```bash
 npm install big-calendar
 ```
 
-## Quick Start
-
-```jsx
-import { CalendarProvider, ClientContainer } from 'big-calendar';
-import 'big-calendar/styles'; // Import styles
-
-function App() {
-  return (
-    <CalendarProvider useMocks={true}>
-      <ClientContainer view="month" />
-    </CalendarProvider>
-  );
-}
-```
-
-## Basic Usage
+**Requirements:** React 18+, Tailwind CSS in your app.
 
-### With Mock Data
+Add the package to Tailwind content in `tailwind.config.js`:
 
-```jsx
-import { CalendarProvider, ClientContainer } from 'big-calendar';
-import 'big-calendar/styles';
-
-function MyCalendar() {
-  return (
-    <CalendarProvider useMocks={true}>
-      <ClientContainer view="month" />
-    </CalendarProvider>
-  );
-}
+```js
+content: [
+  "./src/**/*.{js,jsx,ts,tsx}",
+  "./node_modules/big-calendar/dist/**/*.{js,jsx}",
+],
 ```
 
-### With API Integration
+## Usage
 
 ```jsx
-import { CalendarProvider, ClientContainer } from 'big-calendar';
+import { CalendarProvider, CalendarRoot, ClientContainer } from 'big-calendar';
 import 'big-calendar/styles';
 
-const calendarAPI = {
-  getEvents: async () => {
-    const response = await fetch('/api/events');
-    return response.json();
-  },
-  getUsers: async () => {
-    const response = await fetch('/api/users');
-    return response.json();
-  },
-  createEvent: async (eventData) => {
-    const response = await fetch('/api/events', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify(eventData),
-    });
-    return response.json();
-  },
-  updateEvent: async (eventData) => {
-    const response = await fetch(`/api/events/${eventData.id}`, {
-      method: 'PUT',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify(eventData),
-    });
-    return response.json();
-  },
-  deleteEvent: async (eventId) => {
-    await fetch(`/api/events/${eventId}`, { method: 'DELETE' });
-  },
-};
-
-function MyCalendar() {
-  return (
-    <CalendarProvider api={calendarAPI}>
-      <ClientContainer view="month" />
-    </CalendarProvider>
-  );
-}
-```
-
-## Customization
-
-### Side Panel for Event Details
-
-```jsx
-<CalendarProvider
-  eventClickHandler={{
-    mode: "sidePanel",
-    sidePanelPosition: "right",
-    sidePanelWidth: 400,
-  }}
->
-  <ClientContainer view="month" />
+// With mock data
+<CalendarProvider useMocks={true}>
+  <CalendarRoot>
+    <ClientContainer view="month" />
+  </CalendarRoot>
 </CalendarProvider>
-```
 
-### Single-User Mode
-
-```jsx
-<CalendarProvider
-  singleUser={true}
-  currentUser={{
-    id: "user-123",
-    name: "John Doe",
-    picturePath: "/avatar.jpg",
-  }}
->
-  <ClientContainer view="month" />
+// With your API
+const api = {
+  getEvents: async () => (await fetch('/api/events')).json(),
+  getUsers: async () => (await fetch('/api/users')).json(),
+  createEvent: async (data) => /* ... */,
+  updateEvent: async (data) => /* ... */,
+  deleteEvent: async (id) => /* ... */,
+};
+<CalendarProvider api={api}>
+  <CalendarRoot>
+    <ClientContainer view="month" />
+  </CalendarRoot>
 </CalendarProvider>
 ```
 
-### Custom Styling
-
-```css
-/* Override CSS variables */
-:root {
-  --calendar-container-border-radius: 1rem;
-  --calendar-event-border-radius: 0.5rem;
-  --calendar-event-blue-bg: 217 91% 95%;
-}
-```
-
-```jsx
-<ClientContainer
-  view="month"
-  className="bigcal-my-custom-calendar"
-  headerclassName="bigcal-custom-header"
-/>
-```
-
-## Documentation
+**Views:** `view="month" | "week" | "day" | "agenda" | "year"`
 
-For complete documentation and customization options, see [CUSTOMIZATION.md](./CUSTOMIZATION.md).
-
-## Requirements
-
-- React 18+
-- Tailwind CSS (for styling)
-
-## Tailwind CSS Setup
+## Customization
 
-You'll need to configure Tailwind CSS in your project. Add to your `tailwind.config.js`:
+- **Single-user:** `singleUser={true}` and `currentUser={{ id, name, picturePath }}`
+- **Event click:** `eventClickHandler={{ mode: "sidePanel", sidePanelPosition: "right", sidePanelWidth: 400 }}`
+- **Styling:** CSS variables (e.g. `--calendar-container-border-radius`) or `className` / `headerClassName` on `ClientContainer`
 
-```js
-module.exports = {
-  content: [
-    "./src/**/*.{js,jsx,ts,tsx}",
-    "./node_modules/big-calendar/dist/**/*.{js,jsx}", // Include big-calendar
-  ],
-  theme: {
-    extend: {
-      // Your theme extensions
-    },
-  },
-  plugins: [],
-}
-```
+Full options: [CUSTOMIZATION.md](./CUSTOMIZATION.md).
 
 ## License
 
 MIT
-
-## Contributing
-
-Contributions are welcome! Please feel free to submit a Pull Request.

package/package.json

@@ -1,26 +1,29 @@
 {
   "name": "big-calendar",
-  "version": "0.2.0",
-  "description": "A highly customizable React calendar component library with multiple views, drag-and-drop, and full API integration support. Originally from https://github.com/lramos33/big-calendar",
+  "version": "0.2.1",
+  "description": "React + Tailwind implementation of Big Calendar. Fork extending the original with host-app control: control views, events, and behavior via props and API from your app.",
   "keywords": [
     "react",
+    "tailwind",
     "calendar",
     "calendar-component",
     "react-calendar",
     "event-calendar",
     "scheduler",
     "date-picker",
-    "calendar-view"
+    "calendar-view",
+    "big-calendar",
+    "fork"
   ],
-  "author": "",
+  "author": "Noam Suissa (https://github.com/noamsuissa)",
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/lramos33/big-calendar.git"
+    "url": "https://github.com/noamsuissa/big-calendar.git"
   },
-  "homepage": "https://github.com/lramos33/big-calendar",
+  "homepage": "https://github.com/noamsuissa/big-calendar#readme",
   "bugs": {
-    "url": "https://github.com/lramos33/big-calendar/issues"
+    "url": "https://github.com/noamsuissa/big-calendar/issues"
   },
   "main": "./dist/big-calendar.cjs",
   "module": "./dist/big-calendar.mjs",