Components

Calendar

Displays a calendar where users can select a date.

Source Code

Install the VCalendar package

yarn add v-calendar@next @popperjs/core

Create a plugin called vcalendar.ts in plugins folder. Add the following code:

import { setupCalendar } from "v-calendar";
import "v-calendar/style.css";

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(setupCalendar, { isDark: {} });
});

Copy the following code into your project.

<template>
  <ClientOnly>
    <template #fallback>
      <UICard class="h-[272px] w-[250px] shrink-0 bg-background"></UICard>
    </template>
    <VCalendar ref="calRef" v-bind="$attrs">
      <template v-for="(_, slot) in $slots" v-slot:[slot]="scope">
        <slot :name="slot" v-bind="scope"></slot>
      </template>
    </VCalendar>
  </ClientOnly>
</template>

<script setup lang="ts">
  import { Calendar as VCalendar } from "v-calendar";

  interface Props extends /**@vue-ignore */ Partial<InstanceType<typeof VCalendar>["$props"]> {}

  defineOptions({ inheritAttrs: false });
  defineProps<Props>();
  const calRef = ref<InstanceType<typeof VCalendar>>();
  const emit = defineEmits<{
    ready: [arg: InstanceType<typeof VCalendar>];
  }>();
  onMounted(() => {
    emit("ready", calRef as unknown as InstanceType<typeof VCalendar>);
  });
</script>

<style>
  .vc-blue {
    --vc-accent-50: #f1f5f9;
    --vc-accent-100: #e2e8f0;
    --vc-accent-200: #cbd5e1;
    --vc-accent-300: #94a3b8;
    --vc-accent-400: #64748b;
    --vc-accent-500: #475569;
    --vc-accent-600: #334155;
    --vc-accent-700: #1e293b;
    --vc-accent-800: #0f172a;
    --vc-accent-900: #020617;
  }
  :root {
    --vc-gray-50: #f1f5f9;
    --vc-gray-100: #e2e8f0;
    --vc-gray-200: #cbd5e1;
    --vc-gray-300: #94a3b8;
    --vc-gray-400: #64748b;
    --vc-gray-500: #475569;
    --vc-gray-600: #334155;
    --vc-gray-700: #1e293b;
    --vc-gray-800: #0f172a;
    --vc-gray-900: #020617;
    --vc-font-family: theme("fontFamily.sans");
    --vc-rounded-full: theme("borderRadius.DEFAULT");
  }
  .vc-light,
  .vc-dark {
    --vc-bg: theme("colors.background");
    --vc-border: theme("colors.border");
    --vc-focus-ring: 0 0 0 2px theme("colors.ring");
    --vc-popover-content-bg: theme("colors.background");
    --vc-popover-content-border: theme("colors.input");
  }
</style>

Usage

Titlte Position

View

Weekly

Daily

Rows & Columns

Min & Max dates

Button

A button component that can be used anywhere.

Card

Displays a card with header, content, and footer.