bf96fcf22c
FullCalendar treats naive datetime strings as already being in the display timezone, causing double-offset. Appending 'Z' forces correct UTC interpretation before conversion to user timezone. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
SpaceCalendar Component
Component Vue.js 3 pentru afișarea rezervărilor unui spațiu folosind FullCalendar.
Utilizare
<template>
<div>
<h2>Rezervări pentru Sala A</h2>
<SpaceCalendar :space-id="1" />
</div>
</template>
<script setup lang="ts">
import SpaceCalendar from '@/components/SpaceCalendar.vue'
</script>
Props
| Prop | Type | Required | Description |
|---|---|---|---|
spaceId |
number |
Yes | ID-ul spațiului pentru care se afișează rezervările |
Features
- View Switcher: Month, Week, Day views
- Status Colors:
- Pending: Orange (#FFA500)
- Approved: Green (#4CAF50)
- Rejected: Red (#F44336)
- Canceled: Gray (#9E9E9E)
- Auto-refresh: Se încarcă automat rezervările când se schimbă data
- Responsive: Se adaptează la dimensiunea ecranului
API Integration
Componenta folosește bookingsApi.getForSpace(spaceId, start, end) pentru a încărca rezervările.
TypeScript Types
Componenta este complet type-safe și folosește interfețele din /src/types/index.ts.