https://github.com/lramos33/big-calendar
This project provides a modern, responsive interface for managing events and schedules with multiple viewing options.
https://github.com/lramos33/big-calendar
Last synced: about 1 month ago
JSON representation
This project provides a modern, responsive interface for managing events and schedules with multiple viewing options.
- Host: GitHub
- URL: https://github.com/lramos33/big-calendar
- Owner: lramos33
- Created: 2025-02-13T20:35:23.000Z (2 months ago)
- Default Branch: main
- Last Pushed: 2025-03-07T00:07:48.000Z (about 1 month ago)
- Last Synced: 2025-03-07T00:20:06.966Z (about 1 month ago)
- Language: TypeScript
- Homepage: https://big-calendar.vercel.app
- Size: 399 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-shadcn-ui - Link - 03-08 | (Libs and Components)
README
# Modern Calendar Application
A feature-rich calendar application built with Next.js, TypeScript, and Tailwind CSS. This project provides a modern, responsive interface for managing events and schedules with multiple viewing options.
## Preview
## Features
- 📅 Multiple calendar views:
- Month view with event previews
- Week view with detailed time slots
- Day view with hourly breakdown
- 🎨 Event customization:
- Multiple color options for events
- Two badge display variants (dot and colored)
- Support for single and multi-day events
- 👥 User management:
- Filter events by user
- View all users's events simultaneously
- User avatars and profile integration
- ⚡ Real-time features:
- Live time indicator
- Current event highlighting
- Dynamic event positioning
- 🎯 UI/UX features:
- Responsive design for all screen sizes
- Intuitive navigation between dates
- Clean and modern interface
- Dark mode support
## Tech Stack
- **Framework**: Next.js 14
- **Language**: TypeScript
- **Styling**: Tailwind v3
- **Date Management**: date-fns
- **UI Components**: ⚠️ Heavily edited shadcn/ui components
- **State Management**: React Context
Note: I **_DO NOT_** use the default shadcn components or its color palette. Some of the shadcn components have been modified to fit my design system and palette, so keep that in mind if you plan to integrate the calendar into your project.
## Getting Started
1. Clone the repository:
```bash
git clone https://github.com/yourusername/calendar-app.git
cd calendar-app
```
2. Install dependencies:
```bash
npm install
```
3. Start the development server:
```bash
npm run dev
```
or
```bash
npm run turbo
```
4. Open your browser and navigate to `http://localhost:3000` to view the application.
## Project Structure
The project structure is organized as follows:
```
src/
├── app/
├── calendar/ # All files related to calendar are in this folder
│ ├── components/
│ │ ├── header/ # Calendar header components
│ │ ├── month-view/ # Month view components
│ │ └── week-and-day-view/ # Week and day view components
│ ├── contexts/ # Calendar context and state management
│ ├── helpers/ # Utility functions
│ ├── interfaces/ # TypeScript interfaces
│ └── types/ # TypeScript types
└── components/ # Components not related to calendar eg: ui and layout components
```
## Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
##
Made by Leonardo Ramos 👋 Get in touch!