Skip to content

A Next.js project that showcases a dynamically themed React Big Calendar using Shadcn's CSS variables. The calendar adapts to the selected theme, providing a seamless and visually appealing user experience. Perfect for learning or integrating dynamic theming into your own Next.js applications.

License

Notifications You must be signed in to change notification settings

list-jonas/shadcn-ui-big-calendar

Repository files navigation

Shadcn/UI - Big Calendar

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.

Table of Contents

Introduction

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.

Features

  • 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.

Installation

Follow these steps to set up the project locally:

  1. Clone the repository:

    git clone https://github.com/list-jonas/shadcn-ui-big-calendar.git
    cd shadcn-ui-big-calendar
  2. Install dependencies:

    npm install
    # or
    yarn install
  3. Run the development server:

    npm run dev
    # or
    yarn dev
  4. Open your browser: Navigate to http://localhost:3000 to see the application in action.

Usage

To use this project, you can follow these steps:

  1. Explore the calendar:

    • View the dynamic theming in action by switching between themes.
    • Interact with the calendar to add, edit, and remove events.
  2. 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.
  3. 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.

Contributing

Contributions are welcome! If you have any suggestions, bug reports, or improvements, please feel free to create an issue or submit a pull request.

  1. 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.

  2. Clone the forked repository:

    git clone https://github.com/list-jonas/shadcn-ui-big-calendar.git
    cd shadcn-ui-big-calendar
  3. Create a new branch:

    git checkout -b your-branch-name
  4. Make your changes: Implement your changes and commit them with descriptive messages.

  5. Push your changes:

    git push origin your-branch-name
  6. Create a pull request: Go to the original repository and create a pull request with a description of your changes.

License

This project is licensed under the MIT License. See the LICENSE file for more details.

Author

Created by Jonas. For more projects and information, visit My Website.

Stats

GitHub stars GitHub forks GitHub issues GitHub pull requests GitHub views

Live Preview

Check out the live preview of the site here.

Screenshots

Dark Theme - Month View

Dark Theme - Month View

Light Theme - Week View

Light Theme - Week View


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!

Star History

Star History Chart

About

A Next.js project that showcases a dynamically themed React Big Calendar using Shadcn's CSS variables. The calendar adapts to the selected theme, providing a seamless and visually appealing user experience. Perfect for learning or integrating dynamic theming into your own Next.js applications.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published