The App Extension adds the stylesheet for you.

If you install the UI package directly, import the matching stylesheet in your boot file or app entry:

import '@quasar/quasar-ui-qcalendar/QCalendarDay.css'

Quasar CLI projects can also centralize the stylesheet in quasar.config.ts:

// Note: using ~ tells Quasar the file resides in node_modules
css: [
  "app.scss",
  "~@quasar/quasar-ui-qcalendar/QCalendarDay.css",
],

Use @quasar/quasar-ui-qcalendar/index.css when registering the full plugin, or replace QCalendarDay.css with the component stylesheet you import.

Yes, but use the UI package directly instead of the Quasar App Extension.

QCalendar components are Vue components, so they can be used in Vue/Vite applications that are not Quasar CLI projects. Install @quasar/quasar-ui-qcalendar, import the component and its stylesheet, and register the component in your app as you would with other Vue libraries.

The Quasar App Extension is only the convenience layer for Quasar CLI projects. It wires up boot files, CSS, and Quasar-specific integration for you, but it is not required when you want direct component usage.

Yes. After the App Extension is installed, run quasar describe for the component you want to inspect:

quasar describe QCalendar
quasar describe QCalendarMonth
quasar describe QCalendarDay

The same generated API is shown on the component API pages, such as QCalendar API, QCalendarMonth API, and QCalendarDay API.

In this example, check out the custom .my-sticky css class. This works in conjunction with a parent whose height is horter than the height needed to display the calendar and setting it’s style to overflow: auto.

In this example, it shows how you can display the currently displayed month and year. It uses the browser’s Intl.DateTimeFormat to do the formatting.

In this example, it shows how you can display the minimum number of weeks displayed in a month. The reason form doing this is to make sure the calendar is always the same height.