Calendar

<script setup>
import { ref } from 'vue'

const value = ref(Date.now())
</script>

<template>
  <PCalendar v-model="value" />
</template>

<script setup>
import { ref } from 'vue'

const value = ref(Date.now())
</script>

<template>
  <PCalendar v-model="value">
    <template #item="{ date }">
      <span>{{ date }}</span>

      <span v-if="date === 1" class="ml-1 text-xs font-medium text-red-900">New</span>
    </template>
  </PCalendar>
</template>

<script setup>
import { ref } from 'vue'

const value = ref(Date.now())

function isDateDisabled(timestamp) {
  return new Date(timestamp).getDay() === 0
}
</script>

<template>
  <PCalendar v-model="value" :is-date-disabled="isDateDisabled" />
</template>

<script setup>
import { ref } from 'vue'

const value1 = ref(Date.now())
const value2 = ref('2024-08-15')
</script>

<template>
  <PStack direction="vertical" gap="4">
    <div>
      <PText class="mb-2">Value formatted: {{ value1 }}</PText>
      <PCalendar v-model="value1" value-format="timestamp" />
    </div>
    <div>
      <PText class="mb-2">Value formatted: {{ value2 }}</PText>
      <PCalendar v-model="value2" value-format="YYYY-MM-DD" />
    </div>
  </PStack>
</template>

<script setup>
import { ref } from 'vue'

const value = ref(Date.now())
</script>

<template>
  <div class="max-w-max max-sm:mx-auto">
    <PCalendar v-model="value" compact />
  </div>
</template>