Custom Style

vue-day-calendar has the minimal, lightweight appearance, and you need to import the styles into the component.

import 'vue-day-calendar/style.css'

Alternatively, you don't need to import styles, you can customize the styles, allowing you to better control the appearance of the component.

Use UnoCSS

You can find all the class names through the VueDayCalendarProps type, and you can use UnoCSS to customize the style.

If you're not sure where the week_day class name is applied, you can open the console to find the class attribute of this component.

<script setup lang="ts">
  import VueDayCalendar from 'vue-day-calendar'
  import { type VueDayCalendarProps } from 'vue-day-calendar'

  const classes: VueDayCalendarProps['classes'] = {
    week_day: '!text-[10px]',
    day_selected: '!bg-red text-white',
    today: '!text-white !bg-sky-400',
    day: `!h-6 !leading-6 rounded-5px 
          rounded-5px !text-10px 
          text-center !w-6`
  }
</script>

<template>
  <VueDayCalendar :classes/>
</template>

Use style scoped

If you don't want to write css inside the <script> tag, you can use the style tag to customize the style.

<script setup lang="ts">
  import VueDayCalendar from 'vue-day-calendar'
</script>

<template>
  <VueDayCalendar/>
</template>

<style lang="scss" scoped>
:deep(.today) {
  background-color: red;
  color: #fff;
}
</style>

You can also use UnoCSS inside the style tag.

<style lang="postcss" scoped>
:deep(.today) {
  @apply bg-red text-white;
}
</style>

Slots

Sometimes you may need to customize some content, such as displaying additional information below the date. You can use slots to achieve this.

<script setup lang="ts">
  import VueDayCalendar from 'vue-day-calendar'
</script>

<template>
  <VueDayCalendar>
    <template #head="{ date }">
      <span class="mr-2 text-sm">{{ date }}</span>
    </template>
  </VueDayCalendar>
</template>