✨ Features
📅 Multiple Views
Day, 3-day, and week timeline views for resource visualization
👥 Multi-Resource
Display rooms, staff, equipment as timeline rows
📍 Interactive
Click on timeline slots to trigger custom actions
⏰ Time Context
Visual red line shows current time for reference
🎨 Beautiful UI
Professional styles included - fully customizable CSS
🚀 Zero Deps
Vanilla JavaScript - works with any framework
📦 Installation
npm install resourcenest🚀 Quick Start
Vanilla JavaScript / HTML
<!DOCTYPE html>
<html>
<head>
<title>ResourceNest</title>
</head>
<body>
<div id="calendar"></div>
<script type="module">
import createResourceNest from 'resourcenest';
const calendar = createResourceNest('#calendar', {
resources: [
{ id: 'room-1', name: 'Conference Room A' },
{ id: 'room-2', name: 'Conference Room B' },
],
events: [
{
id: '1',
resourceId: 'room-1',
from: new Date(2024, 0, 15, 10, 0),
to: new Date(2024, 0, 15, 11, 30),
label: 'Team Meeting',
status: 'confirmed',
guestCount: 5,
},
],
onEventClick: (event) => {
console.log('Event clicked:', event);
},
onTimeClick: (slot) => {
console.log('Time slot clicked:', slot);
},
});
</script>
</body>
</html>⚙️ Configuration Options
{
startHour: 8, // Calendar start hour
endHour: 22, // Calendar end hour
resources: [], // Array of resources
events: [], // Array of events
locale: 'de-DE', // Locale for date formatting
dateFormat: 'DD.MM.YYYY', // Date format
view: 'day', // 'day', '3days', 'week'
showNavigation: true, // Show prev/next/today buttons
showNowIndicator: true, // Show current time indicator
eventClickable: true, // Enable event clicking
timeClickable: true, // Enable time slot clicking
onEventClick: (event) => {}, // Event click callback
onTimeClick: (slot) => {}, // Time slot click callback
onDateChange: (date) => {}, // Date change callback
}📚 What is ResourceNest?
ResourceNest is a beautiful, professional calendar UI component. It displays and visualizes your resource scheduling data (which your backend system creates).
It's not an intelligent scheduler - it's the perfect UI for showing the scheduling results your backend provides. Think of it as the visual layer of your resource management system.
Perfect for integrating with your own scheduling logic, planning algorithms, or backend system.
📚 Documentation
For complete documentation, examples, and API reference, visit the GitHub repository.
📄 License
MIT License - feel free to use in personal and commercial projects.