Calendar

A calendar component allows you to display a calendar with events.

Source code

Click here to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

Installation

npx ui-thing@latest add calendar

You can optionally configure the vcalendar module in your nuxt.config.js file:

vcalendar: {
  calendarOptions: {
    masks: {
      weekdays: "WW",
    },
  },
},

Usage

Attributes

Attributes are visual decorators that can be applied to specific calendar dates. Learn more about them here.

Right Title - Left Nav

Header Slot

Date Range

Disabled Dates

Week View

Button

A button is a component that is used to trigger an action.

Card

A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.