Welcome to the Shadcn/UI - Big Calendar repository! This project showcases a customized React Big Calendar styled using Shadcn's CSS variables, enabling dynamic theme adaptation. This is a purely CSS-based solution, ensuring smooth integration and consistent visual experiences across different themes.
Experience the live demo of the calendar in action:
Live Preview
Shadcn/UI - Big Calendar is an open-source project demonstrating how to style React Big Calendar using Shadcn's CSS variables. This project focuses solely on CSS customization for a seamless theme experience.
- Dynamic Theming: Styles automatically adjust to the selected theme using Shadcn's CSS variables.
- React Big Calendar Integration: Utilizes React Big Calendar with custom Shadcn styles for a unique look.
- Pure CSS Solution: No JavaScript theme manipulation; just plug in the CSS and watch the themes change.
To ensure the dynamic theming works correctly, make sure to include these key files in your project:
The essential CSS stylesheet that powers the Shadcn-themed calendar is located at:
Important: Make sure to include this stylesheet in your project to enable dynamic theming with Shadcn's variables.
The main calendar component that integrates React Big Calendar with the custom Shadcn styles:
Setting up the project is easy! Follow these steps:
-
Clone the repository:
git clone https://github.com/list-jonas/shadcn-ui-big-calendar.git cd shadcn-ui-big-calendar -
Install dependencies:
npm install # or yarn install -
Run the development server:
npm run dev # or yarn dev -
Access the app: Open your browser and go to http://localhost:3000 to see it in action.
After setting up the project, here’s how you can use and customize the calendar:
-
Explore the Calendar:
- Check out the dynamic theming in action.
- Interact with the calendar to view events in different theme modes.
-
Integrate Into Your Own Project:
- Use this project as a reference or starting point for adding a dynamically themed React Big Calendar to your Next.js app.
We welcome contributions from the community! If you find any bugs, have suggestions, or want to improve the project, feel free to submit an issue or a pull request.
- Fork the repository by clicking the "Fork" button at the top-right corner of this page.
- Clone your forked repository:
git clone https://github.com/YOUR_USERNAME/shadcn-ui-big-calendar.git cd shadcn-ui-big-calendar - Create a new branch:
git checkout -b your-branch-name
- Make your changes and commit them with descriptive messages.
- Push your changes:
git push origin your-branch-name
- Create a pull request with a detailed description of your changes.
This project is licensed under the MIT License. See the LICENSE file for more details.
Created by Jonas
For more projects and information, visit My Website.
Check out the star history for this project:
Thank you for checking out the Shadcn/UI - Big Calendar project! We hope this helps you create a beautifully themed event calendar using just CSS. If you have any questions or feedback, feel free to reach out. Happy coding!