feat(VCalendar): add interval-highlight prop

[J-Sek]

resolves #22593

• new interval-highlight accepting boolean and color string

Markup:

<template>
  <v-app theme="dark">
    <v-container fluid>
      <div class="d-flex ga-4 mb-4" style="max-width: 460px">
        <v-select
          v-model="type"
          :items="types"
          label="Calendar type"
        />
        <v-select
          v-model="highlight"
          :items="highlights"
          label="Interval highlight"
        />
      </div>
      <VCalendar
        :categories="categories"
        :events="events"
        :first-interval="6"
        :interval-count="14"
        :interval-height="48"
        :interval-highlight="highlight"
        :interval-width="80"
        :type="type"
        event-color="red"
      />
    </v-container>
  </v-app>
</template>

<script>
  import { shallowRef } from 'vue'

  export default {
    name: 'Playground',
    setup () {
      const type = shallowRef('week')
      const types = ['month', 'week', 'day', '4day', 'category']

      const highlight = shallowRef('primary')
      const highlights = [
        { title: 'true (surface-variant)', value: true },
        { title: 'false (off)', value: false },
        'primary',
        'secondary',
        'success',
        '#ffcc11',
      ]

      const categories = [
        { categoryName: 'John' },
        { categoryName: 'Jane' },
        { categoryName: 'Bob' },
        { categoryName: 'Alice' },
        { categoryName: 'Charlie' },
      ]

      const events = [
        { name: 'Meeting', start: '2026-06-01 09:00', end: '2026-06-01 10:00', category: 'John' },
        { name: 'Lunch', start: '2026-06-01 12:00', end: '2026-06-01 13:00', category: 'Jane' },
        { name: 'Review', start: '2026-06-01 14:00', end: '2026-06-01 15:30', category: 'Bob' },
        { name: 'Standup', start: '2026-06-01 09:30', end: '2026-06-01 10:00', category: 'Alice' },
        { name: 'Workshop', start: '2026-06-01 15:00', end: '2026-06-01 17:00', category: 'Charlie' },
      ]

      return {
        type,
        types,
        highlight,
        highlights,
        categories,
        events,
      }
    },
  }
</script>