TypeScript icon, indicating that this package has built-in type declarations

4.0.0-beta.16 • Public • Published

QCalendar (Vue Plugin, UMD and Quasar App Extension)

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

Discord Discord

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


  • QCalendar v4.x (alpha/beta) lives in the next branch. This will change at some point in the future when v4.0.0 release is available.
  • Be sure to read the documentation

Live Demo - live docs, demo and 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!


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

  • /ui - standalone npm package (go here for more information)
  • /app-extension - Quasar app extension
  • /docs - sources for docs, demo and examples project
  • live demo - live docs, demo 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 yarn workspaces, so you must use yarn):

$ yarn
$ cd ui
$ yarn build
$ cd ../docs
$ quasar dev


UMD examples in Codepen collection


If you appreciate the work that went into this, please consider donating to Quasar or Jeff.


MIT (c) Jeff Galbraith jeff@quasar.dev

Package Sidebar


Weekly Downloads






Unpacked Size

8.85 MB

Total Files


Last publish


  • rstoenescu
  • hawkeye64
  • smolinari
  • ilcallo