Layouts ​

Full Width ​

To expand the component to the full width of its container, set the expanded prop.

<VCalendar expanded />

Title Positioning ​

To make the title header left or right aligned, use the title-position prop.

Left Aligned ​

<VCalendar title-position="left" />

Right Aligned ​

<VCalendar title-position="right" />

Weekly View ​

Set the view prop to display the calendar in 'weekly' view.

<VCalendar view="weekly" />

Weeknumbers ​

Left ​

Show week numbers by setting the show-weeknumbers prop.

<VCalendar show-weeknumbers />

By default, this will display the numbers on the left side within the calendar pane.

The show-weeknumbers can also be assigned to left and outside positions.

Left Outside ​

<VCalendar show-weeknumbers="left-outside" />

Right ​

<VCalendar show-weeknumbers="right" />

Right Outside ​

<VCalendar show-weeknumbers="right-outside" />

ISO Weeknumbers ​

To show ISO week numbers, use the show-iso-weeknumbers prop with the same convention as show-weeknumbers. If both are assigned, the show-weeknumbers prop takes precendence.

Since ISO weeks start on Monday, it makes sense to also set Monday as the first day of the week when setting show-iso-weeknumbers.

<VCalendar :first-day-of-week="2" show-iso-weeknumbers />

Trim Weeks ​

By default, calendar panes always displays the maximum number of weeks in a month, even if the max week does not contain any days in the current month displayed.

This is to ensure user interface consistency and prevents the calendar height from always changing as the user navigates months.

However, these empty weeks can be 'trimmed' by setting the trim-weeks prop.

<VCalendar trim-weeks>

Footer ​

A footer slot may be used to insert content below the primary calendar content.

<template>
  <VCalendar ref="calendar">
    <template #footer>
      <div class="w-full px-4 pb-3">
        <button
          class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold w-full px-3 py-1 rounded-md"
          @click="moveToday"
        >
          Today
        </button>
      </div>
    </template>
  </VCalendar>
</template>

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

const calendar = ref(null);

function moveToday() {
  calendar.value.move(new Date());
}
</script>

The slot may also be applied to date pickers.

Multiple Rows & Columns ​

Use the rows and columns props to create multi-row and multi-column static layouts.

<VCalendar :rows="2" />

Responsive Layouts ​

Previous to 3.0, v-calendar provided a $screens function out-of-the-box to help create computed properties based on the current screen size. To minimize package size and complexity, this built-in functionality has been removed.

To reproduce this behavior, you can bind to computed rows or columns using your own logic, or install a 3rd-party plugin like vue-screen-utils that can create dynamic computed properties based on media queries or ResizeObserver.

For this example, we can use the mapCurrent function exported by vue-screen-utils to display 2 columns for large screens.

<template>
  <VCalendar :columns="columns" />
</template>
<script setup>
import { useScreens } from 'vue-screen-utils';

const { mapCurrent } = useScreens({ xs: '0px', sm: '640px', md: '768px', lg: '1024px' });
const columns = mapCurrent({ lg: 2 }, 1);
</script>

Next, for mobile layouts, we can expand the pane width to fill its container.

<template>
  <VCalendar :columns="columns" :expanded="expanded" />
</template>
<script setup>
import { useScreens } from 'vue-screen-utils';

const { mapCurrent } = useScreens({
  xs: '0px',
  sm: '640px',
  md: '768px',
  lg: '1024px',
});
const columns = mapCurrent({ lg: 2 }, 1);
const expanded = mapCurrent({ lg: false }, true);
</script>

Read more about vue-screen-utils for more options.