ResourceNest

ResourceNest is a lightweight, framework-agnostic resource calendar UI. It provides a professional timeline interface for displaying and managing bookings, schedules, and appointments.

📖 Demo | 📦 npm | 🐙 GitHub

---

Features

• 📅 Timeline Views – Day, 3-Day, and Week views.
• 👥 Resource Management – Display multiple resources (rooms, staff, equipment) as rows.
• 🏢 Event Visualization – Render bookings with custom labels and statuses.
• 📍 Interactivity – Built-in callbacks for clicks on events and time slots.
• 🎨 Modern UI – Clean, responsive design with a "Current Time" indicator.
• 🚀 Zero Dependencies – Fast, lightweight vanilla JavaScript.
• 🔌 Framework Ready – Works with React, Vue, Angular, or plain HTML.

---

Installation

yarn add resourcenest
# or
npm install resourcenest

---

Quick Start

<div id="calendar"></div>

<script type="module">
  import createResourceNest from 'resourcenest';

  const calendar = createResourceNest('#calendar', {
    resources: [
      { id: 'r1', name: 'Conference Room A' },
      { id: 'r2', name: 'Conference Room B' }
    ],
    events: [
      {
        id: 'e1',
        resourceId: 'r1',
        from: '2024-01-24T10:00:00',
        to: '2024-01-24T12:00:00',
        label: 'Team Sync'
      }
    ],
    onTimeClick: ({ time, resource }) => {
      console.log(`Booking for ${resource.name} at ${time}`);
    }
  });
</script>

---

API Reference

Options

Option	Default	Description
view	'day'	Initial view: 'day', '3days', or 'week'.
startHour	8	Start of the timeline (0-23).
endHour	22	End of the timeline (0-23).
events	[]	Array of event objects.
resources	[]	Array of resource objects (rows).
onEventClick	null	Callback: (event) => { ... }
onTimeClick	null	Callback: ({ time, resource }) => { ... }
onDateChange	null	Callback: (dateString) => { ... }

Instance Methods

• calendar.setEvents(events) – Update all events.
• calendar.setResources(resources) – Update resources.
• calendar.setDate(date) – Navigate to a specific date.
• calendar.setView(view) – Switch between 'day', '3days', or 'week'.
• calendar.nextDay() / calendar.prevDay() – Navigation.
• calendar.destroy() – Cleanup.

---

Styling

ResourceNest uses SCSS for internal styling, but the styles are bundled directly into the JavaScript file. You can easily customize the appearance using CSS variables. You can override them in your global CSS:

:root {
  --rn-primary-color: #4f46e5;   /* Main color for events */
  --rn-success-color: #059669;   /* Color for 'confirmed' status */
  --rn-error-color: #dc2626;     /* Color for 'cancelled' status & now indicator */
  --rn-bg-highlight: #f5f3ff;    /* Highlight color for current day/time */
  --rn-radius: 12px;             /* Corner radius for the calendar */
  --rn-font-family: 'Inter', sans-serif;
}

CSS Variables Reference

Variable	Default	Description
--rn-primary-color	#3b82f6	Default event background.
--rn-success-color	#10b981	Background for .status-confirmed.
--rn-error-color	#ef4444	Background for .status-cancelled and now indicator.
--rn-bg-main	#ffffff	Main background color.
--rn-bg-muted	#f9fafb	Sidebar and hover backgrounds.
--rn-border-color	#e5e7eb	Grid and container borders.
--rn-radius	8px	Outer border radius.

You can also override specific classes for more advanced styling:

/* Custom event padding */
.rn-event { padding: 8px 12px; }

/* Timeline cell height */
.rn-timeline-row, .rn-resource-row { height: 80px; }

---

License

MIT