console/app/components/showcase/Calendar.vue at main · agentruntimecontrolprotocol/console · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<script setup lang="ts">
import { ref } from 'vue'
import { CalendarDate } from '@internationalized/date'

const colors = ['primary', 'secondary', 'success', 'info', 'warning', 'error', 'neutral'] as const
const variants = ['solid', 'outline', 'soft', 'subtle'] as const
const sizes = ['xs', 'sm', 'md', 'lg', 'xl'] as const

// Single date selection — schedule a job run
const selectedDate = ref<InstanceType<typeof CalendarDate> | undefined>(
  new CalendarDate(2026, 6, 20)
)

// Range selection — define a lease window
const leaseRange = ref<{ start?: InstanceType<typeof CalendarDate>; end?: InstanceType<typeof CalendarDate> } | null>({
  start: new CalendarDate(2026, 6, 10),
  end: new CalendarDate(2026, 6, 18),
})

// Multiple selection — mark agent maintenance windows
const maintenanceDates = ref<InstanceType<typeof CalendarDate>[]>([
  new CalendarDate(2026, 6, 3),
  new CalendarDate(2026, 6, 9),
  new CalendarDate(2026, 6, 17),
])
</script>

<template>
  <div class="flex flex-col gap-8">
    <GallerySection title="Colors">
      <div class="flex flex-wrap gap-6">
        <div v-for="c in colors" :key="c" class="flex flex-col items-center gap-2">
          <span class="text-xs text-muted capitalize">{{ c }}</span>
          <UCalendar :color="c" size="xs" />
        </div>
      </div>
    </GallerySection>

    <GallerySection title="Variants">
      <div class="flex flex-wrap gap-6">
        <div v-for="v in variants" :key="v" class="flex flex-col items-center gap-2">
          <span class="text-xs text-muted capitalize">{{ v }}</span>
          <UCalendar color="primary" :variant="v" size="xs" />
        </div>
      </div>
    </GallerySection>

    <GallerySection title="Sizes">
      <div class="flex flex-wrap items-start gap-6">
        <div v-for="s in sizes" :key="s" class="flex flex-col items-center gap-2">
          <span class="text-xs text-muted uppercase">{{ s }}</span>
          <UCalendar :size="s" />
        </div>
      </div>
    </GallerySection>

    <GallerySection title="Range selection — lease window">
      <UCalendar
        v-model="leaseRange"
        range
        color="info"
        variant="soft"
        :month-controls="true"
        :year-controls="false"
      />
      <p v-if="leaseRange?.start && leaseRange?.end" class="text-xs text-muted">
        Lease active:
        {{ leaseRange.start.toString() }} → {{ leaseRange.end.toString() }}
      </p>
    </GallerySection>

    <GallerySection title="Multiple selection — maintenance windows">
      <UCalendar
        v-model="maintenanceDates"
        multiple
        color="warning"
        variant="outline"
      />
      <p class="text-xs text-muted">
        {{ maintenanceDates.length }} maintenance window(s) scheduled
      </p>
    </GallerySection>

    <GallerySection title="Schedule a job run">
      <UCalendar
        v-model="selectedDate"
        color="primary"
        variant="solid"
        :month-controls="true"
        :year-controls="true"
        :week-numbers="true"
      />
      <p v-if="selectedDate" class="text-xs text-muted">
        Job scheduled for: {{ selectedDate.toString() }}
      </p>
    </GallerySection>

    <GallerySection title="States">
      <div class="flex flex-wrap gap-6">
        <div class="flex flex-col gap-1">
          <span class="text-xs text-muted">Disabled</span>
          <UCalendar disabled color="neutral" variant="soft" size="sm" />
        </div>
        <div class="flex flex-col gap-1">
          <span class="text-xs text-muted">Read-only</span>
          <UCalendar readonly :model-value="new CalendarDate(2026, 6, 15)" color="secondary" variant="subtle" size="sm" />
        </div>
      </div>
    </GallerySection>
  </div>
</template>