Calendar Resource View ( reusable wrapper for calendar & resource view )

<!-- ResourceCalendarView.vue -->
<template>
  <div class="resource-calendar-wrapper">
    <!-- ... (view switcher, loading indicator) ... -->
    <div v-else>
      <!-- Calendar View -->
      <calendar-view v-if="activeView === 'calendar'"
        :month-data="calendarMonthData"
        :month-name="currentMonthName"
        :year="currentYear"
        @navigate-prev="handlePrevMonth"
        @navigate-next="handleNextMonth"
        @navigate-today="handleGoToToday"
        @event-click="handleEventClick"
        v-bind="$attrs"
      />

      <!-- Timeline View with Pagination -->
      <div v-if="activeView === 'timeline'">
        <resource-timeline-view
          :events="timelineVisibleEvents"
          :resources="resources"
          :current-date="currentDate"
          @navigate-prev="handlePrevDay"
          @navigate-next="handleNextDay"
          @navigate-today="handleGoToToday"
          @event-click="handleEventClick"
          v-bind="$attrs"
        />
        <!-- ... (pagination controls) ... -->
      </div>
    </div>
  </div>
</template>

<script>
// ... (imports) ...
export default {
  name: 'ResourceCalendarView',
  // IMPORTANT: Prevents pass-through attributes from being applied to this component's root element.
  inheritAttrs: false,
  // ... (components, props, data, watch, mounted, computed) ...
  // All other logic from the previous version remains exactly the same.
  // ...
};
</script>

<!-- MyPage.vue -->
<template>
  <div>
    <h1>My Custom Calendar</h1>
    <resource-calendar-view
      :events-endpoint="'/api/my-events'"
      :resources-endpoint="'/api/my-resources'"
      @event-click="showEventDetails"

      <!-- Pass-through props for child components -->
      :day-labels="['S', 'M', 'T', 'W', 'T', 'F', 'S']"
      :row-height="65"
    />
  </div>
</template>

<script>
import ResourceCalendarView from './components/ResourceCalendarView.vue';

export default {
  components: { ResourceCalendarView },
  methods: {
    showEventDetails(event) {
      alert(`You clicked on: ${event.title}`);
    }
  }
}
</script>

<!-- HalamanSaya.vue -->
<template>
  <div>
    <h1>Kalender Kustom Saya</h1>
    <resource-calendar-view
      :events-endpoint="'/api/acara-saya'"
      :resources-endpoint="'/api/resource-saya'"
      @event-click="tampilkanDetailEvent"

      <!-- Props penerus untuk komponen anak -->
      :day-labels="['M', 'S', 'S', 'R', 'K', 'J', 'S']"
      :row-height="65"
    />
  </div>
</template>

<script>
import ResourceCalendarView from './components/ResourceCalendarView.vue';

export default {
  components: { ResourceCalendarView },
  methods: {
    tampilkanDetailEvent(event) {
      alert(`Anda mengklik: ${event.title}`);
    }
  }
}
</script>

<!-- Uses the default ['Sun', 'Mon', ...] -->
<ResourceCalendarView ... />

<!-- Customizes the day labels to be single letters -->
<ResourceCalendarView ... :day-labels="['S', 'M', 'T', 'W', 'T', 'F', 'S']" />

<!-- Customizes for Bahasa Indonesia -->
<ResourceCalendarView ... :day-labels="['Min', 'Sen', 'Sel', 'Rab', 'Kam', 'Jum', 'Sab']" />

<!-- Uses the default 50px row height -->
<ResourceCalendarView ... />

<!-- Makes the rows taller for better readability -->
<ResourceCalendarView ... :row-height="75" />

<!-- Makes the rows shorter for a more compact view -->
<ResourceCalendarView ... :row-height="35" />