Welcome to the Shadcn/UI - Big Calendar Styles repository! This project is a Next.js application that showcases a React Big Calendar styled using Shadcn's CSS variables, allowing the calendar to dynamically adopt the selected theme.
Shadcn/UI - Big Calendar Styles is an open-source project aimed at demonstrating how to integrate Shadcn's CSS variables with a React Big Calendar to achieve a seamless and dynamic theme adaptation. The calendar will automatically adjust its styles based on the selected theme, providing a consistent and visually appealing user experience.
- Dynamic Theming: The calendar styles automatically adapt to the selected theme using Shadcn's CSS variables.
- Next.js Framework: Built with Next.js for server-side rendering and optimized performance.
- React Big Calendar Integration: Showcases the React Big Calendar with custom styles.
- Theme Switching: Includes a theme switcher component to easily change themes.
Follow these steps to set up the project locally:
-
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
-
Open your browser: Navigate to http://localhost:3000 to see the application in action.
To use this project, you can follow these steps:
-
Explore the calendar:
- View the dynamic theming in action by switching between themes.
- Interact with the calendar to add, edit, and remove events.
-
Modify the styles:
- Customize the calendar styles by modifying the CSS variables defined in the Shadcn theme files located at
src/components/shadcn-big-calendar/shadcn-big-calendar.css
.
- Customize the calendar styles by modifying the CSS variables defined in the Shadcn theme files located at
-
Integrate into your own project:
- Use the code and styles as a reference or starting point for integrating a dynamically themed calendar into your own Next.js application.
Contributions are welcome! If you have any suggestions, bug reports, or improvements, please feel free to create an issue or submit a pull request.
-
Fork the repository: Click the "Fork" button on the top right corner of this page to create a copy of this repository under your GitHub account.
-
Clone the forked repository:
git clone https://github.com/list-jonas/shadcn-ui-big-calendar.git cd shadcn-ui-big-calendar
-
Create a new branch:
git checkout -b your-branch-name
-
Make your changes: Implement your changes and commit them with descriptive messages.
-
Push your changes:
git push origin your-branch-name
-
Create a pull request: Go to the original repository and create a pull request with a 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 live preview of the site here.
Thank you for checking out Shadcn/UI - Big Calendar Styles! I hope this project serves as a useful reference for integrating dynamic theming with React Big Calendar. If you have any questions or feedback, feel free to reach out. Happy coding!