Planner Component: A React component for dynamic appointment management. Features drag-and-drop, date range selections, and integrates with shadcn/ui. Perfect for developers enhancing apps with efficient scheduling capabilities.
Planner is a highly adaptable scheduling component tailored for React applications. This tool enriches your application with robust resource management functionalities. Planner integrates smoothly into your existing systems, presenting intuitive interfaces for effective management of appointments and resources. By embodying the principles of shadcn/ui, Planner emphasizes component reusability and adaptability, offering a modular approach to UI construction.
shadcn/ui
components to ensure that Planner fits perfectly within your application's design./src
|-- /utils
| └── fakeData.ts # Utilities to generate fake data
|-- /styles
| └── globals.css # Global styles
|-- /services
| ├── AppointmentService.ts # Manages appointment CRUD operations
| ├── index.ts # Service exports
| └── ResourceService.ts # Manages resource CRUD operations
|-- /models
| ├── Appointment.ts # Appointment data model
| ├── index.ts # Model exports
| └── Resource.ts # Resource data model
|-- /lib
| └── utils.ts # Additional utility functions
|-- /contexts
| ├── CalendarDataContext.tsx # Context for managing Planner data
| └── PlannerContext.tsx # Context for managing overall app state
|-- /components
| ├── ui # UI components following `shadcn/ui` philosophy
| └── planner # Planner-specific components
└── /app
├── layout.tsx # Main layout component
└── page.tsx # Entry page component
To start using Planner in your project, follow these steps to install and configure the necessary components:
/components/planner
directory./models
directory./contexts
directory for state management./services
directory to handle business logic./lib/utils.ts
into your project's utility functions.Ensure to include the following dependencies in your project:
react-day-picker
for date picking functionalities.date-fns
for handling date operations.@atlaskit/pragmatic-drag-and-drop
for implementing the drag and drop features.Add the following styles to your global stylesheet to ensure the calendar components display correctly:
/* Scrollbar customization for calendar components */
.calendar-scroll::-webkit-scrollbar {
width: 8px;
scrollbar-width: thin;
}
.calendar-scroll::-webkit-scrollbar-track {
background: var(--background);
}
.calendar-scroll::-webkit-scrollbar-track:hover {
background: var(--muted);
}
.calendar-scroll::-webkit-scrollbar-thumb {
background: #DADCE0;
border-radius: 6px;
cursor: grab;
}
.calendar-scroll::-webkit-scrollbar-thumb:hover {
background: #BDC1C6;
}
.calendar-scroll::-webkit-scrollbar-thumb:active {
cursor: grabbing;
}
Special thanks to the following projects and their teams for inspiration and tools that helped enhance Planner:
Experience Planner in action: Planner Demo
We welcome contributions to Planner! Whether it's feature enhancements, bug fixes, or documentation improvements, follow these steps:
git checkout -b feature/your-feature
).git commit -am 'Add some feature'
).git push origin feature/your-feature
).Let's make Planner even better together!