@quasar/quasar-ui-qcalendar

QCalendar - Day/Month/Week Calendars, Popups, Date Pickers, Schedules, Agendas, Planners and Tasks for your Vue Apps
792,774 483
Install
npm install @quasar/quasar-ui-qcalendar
Latest Version:5.3.1
Vue:3
License:MIT
Last Updated:Sep 29, 2026
Links: GitHub  ·  npm
Maintainer: rstoenescu

QCalendar (Vue Plugin, UMD and Quasar App Extension)

npm version npm downloads npm monthly downloads license

@quasar/quasar-app-extension-qcalendar GitHub code size in bytes GitHub repo size in bytes npm @quasar/quasar-app-extension-qcalendar jsdelivr

Discord X

Everything you need for a complete Calendar solution.

QCalendar allows for viewing of day (1-6 days), week, monthly, scheduler, agenda, resource and task views. Painstaking care has been given to make almost every aspect of QCalendar configurable and/or modifiable in some way and control given to the developer.


Important Release Notes

v5.0.0

  • QCalendar v5 is the stable Quasar CLI Vite 3-ready release.
  • The app extension is now Vite-only and requires @quasar/app-vite >=3.0.0.
  • This repo now requires Node.js >=22.13 and pnpm >=11.3.0.
  • Be sure to read the Upgrade Guide.

Live Demo - live Q-Press docs, demos, and examples


Examples

Month view with events

QCalendar example month view

Planner example

QCalendar example agenda view - planner

Monthly Mini-mode

QCalendar example mini-mode selection

Multi-month selector (mini-mode)

QCalendar example multi-month selection

Agenda view with custom content

QCalendar example agenda view

Day view with events

QCalendar example day view - events

Resource view with events

QCalendar example resource view - events

Scheduler view

QCalendar example scheduler view

Task view

QCalendar task view

Including support for locales, optional theming, 1st day Monday, 5-day work weeks, work week numbers, selected days, disabled days, day of year...

...and many more!

Structure

This is a pnpm workspace mono-repo. You cannot use npm for building.

  • /ui - standalone npm package (go here for more information)
  • /app-extension - Quasar app extension
  • /docs - Q-Press documentation site with docs, demos, and examples
  • live demo - live Q-Press docs, demos, and examples

Demo Workflow

If you fork or download this project, make sure you have the Quasar CLI globally installed:

$ npm i -g @quasar/cli

The workflow to build the demo, on a fresh project, is as follows (note: this project uses pnpm workspaces, so you must use pnpm):

$ pnpm install
$ cd packages/ui
$ pnpm build
$ cd ../docs
$ quasar dev

Support

If QCalendar is useful in your workflow and you want to support ongoing maintenance:

License

MIT (c) Jeff Galbraith jeff@quasar.dev

Related Packages

vue-responsive-calendar

A responsive calendar component for Vue.js

2,194 17
vue3-timetable

A versatile timetable component for Vue 3

3,045 6
@calendarjs/ce

A comprehensive JavaScript collection of calendar components including Calendar,...

16,275 47
@cocoar/vue-calendar

Vue 3 calendar component — Temporal-only public surface, single drop pipeline, p...

6,785 0

Version History

Version Released License
5.3.1 MIT
5.3.0 MIT
5.2.2 MIT
5.2.1 MIT
5.2.0 MIT
Pre-releases (56)
Version Released License
5.0.0-rc.10 MIT
5.0.0-rc.9 MIT
5.0.0-rc.8 MIT
5.0.0-rc.7 MIT
5.0.0-rc.6 MIT