A favicon of Full Calendar For Shadcn UI

Full Calendar For Shadcn UI

A non-package, customizable full calendar component for shadcn/ui, offering multiple views, keyboard navigation, and event management.

A screenshot of Full Calendar For Shadcn UIVisit

Full Calendar Component for shadcn/ui Applications

This project offers a versatile full calendar component designed for seamless integration with shadcn/ui. It is provided as a non-package solution, meaning developers can directly copy and adapt the full-calendar.tsx component. The calendar supports various display modes and keyboard interactions, improving user experience for scheduling and managing events within React applications. While it is no longer actively maintained, it stands as a solid base or an excellent example for developing calendar features.

Features:

  • Keyboard Shortcuts: Facilitates calendar navigation and interactions via keyboard.
  • Multiple View Modes: Offers day, week, month, and year views for flexible scheduling display.
  • shadcn/ui Integration: Built as a component for shadcn/ui, ensuring consistent design language.
  • Direct Component Copy: Provided as a single .tsx file for easy integration and customization (non-package).
  • Event Management: Supports defining and displaying events with properties like start/end times, title, and color.
  • View Switching Controls: Includes UI elements to easily switch between day, week, month, and year views.
  • Date Navigation: Features 'Previous', 'Today', and 'Next' controls for intuitive date browsing.
  • Current Date Indicator: Displays the current date context within the calendar.
  • Theme Toggling Support: Includes a 'ModeToggle' for switching between visual themes (e.g., light/dark).
  • Based on date-fns: Uses date-fns for reliable date and time operations.
  • Uses react-hotkeys-hook: Implements keyboard shortcuts using the react-hotkeys-hook library.

Summary:

This shadcn/ui full calendar component equips developers with a readily implementable solution for calendar features. It includes multiple views, keyboard navigation, and event rendering, styled with shadcn/ui. Being a non-package component, it offers extensive customization possibilities. Though development has ceased, it remains a useful asset for React developers requiring a calendar interface in their projects.

Distribution:
opensource
GitHub:
151 Stars
9 Forks
Share:

 

  
 

Similar to Full Calendar For Shadcn UI:

 

  
  

 

  
  

 

  
  
Full Calendar For Shadcn UI: Integrate a full-featured calendar into your shadcn/ui applications easily. – Awesome-Shadcn/ui