-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Separate calendar into multiple components, fix view bugs, and improv…
…e stability and consistency.
- Loading branch information
Showing
30 changed files
with
13,954 additions
and
939 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,33 @@ | ||
# Kabob Calendar Example | ||
|
||
This is a basic example of how to use the Kabob Calendar component in a React application. | ||
|
||
## Getting Started | ||
|
||
1. First, install the dependencies: | ||
```bash | ||
npm install | ||
``` | ||
|
||
2. Start the development server: | ||
```bash | ||
npm start | ||
``` | ||
|
||
3. Open [http://localhost:3000](http://localhost:3000) to view the example in your browser. | ||
|
||
## Features Demonstrated | ||
|
||
- Basic calendar setup with events | ||
- People management | ||
- Event creation, updating, and deletion | ||
- Custom event colors | ||
- Responsive layout | ||
|
||
## Component Usage | ||
|
||
The example shows how to: | ||
- Set up the CalendarProvider | ||
- Configure the Calendar component with events and people | ||
- Handle calendar events (create, update, delete) | ||
- Style the calendar with Tailwind CSS |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,48 @@ | ||
{ | ||
"name": "kabob-cal-example", | ||
"version": "0.1.0", | ||
"private": true, | ||
"dependencies": { | ||
"@types/node": "^18.0.0", | ||
"@types/react": "^18.2.0", | ||
"@types/react-dom": "^18.2.0", | ||
"react": "^18.2.0", | ||
"react-dom": "^18.2.0", | ||
"react-scripts": "5.0.1", | ||
"typescript": "^4.9.5", | ||
"kabob-cal": "file:../..", | ||
"date-fns": "^4.1.0", | ||
"tailwindcss": "^3.3.0", | ||
"autoprefixer": "^10.4.0", | ||
"postcss": "^8.4.0", | ||
"lucide-react": "^0.300.0", | ||
"ajv": "^8.12.0", | ||
"ajv-keywords": "^5.1.0", | ||
"class-variance-authority": "^0.7.0", | ||
"clsx": "^2.0.0", | ||
"tailwind-merge": "^2.0.0" | ||
}, | ||
"scripts": { | ||
"start": "react-scripts start", | ||
"build": "react-scripts build", | ||
"test": "react-scripts test", | ||
"eject": "react-scripts eject" | ||
}, | ||
"eslintConfig": { | ||
"extends": [ | ||
"react-app" | ||
] | ||
}, | ||
"browserslist": { | ||
"production": [ | ||
">0.2%", | ||
"not dead", | ||
"not op_mini all" | ||
], | ||
"development": [ | ||
"last 1 chrome version", | ||
"last 1 firefox version", | ||
"last 1 safari version" | ||
] | ||
} | ||
} |
Oops, something went wrong.