WARNING
If you’re looking to help out, check out our Call to action in the Contributing section.
If you are looking for the Upgrade Guide for QCalendar v5, go here.
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.
QCalendar is a less-opinionated calendar component, as it does not keep track of things like events and reminders. This is in the hands of the developer, but QCalendar makes it easy via events, slots and methods (see examples how to accomplish these endeavors).
The guiding philosophy has been to empower the developer and allow them to do what needs to be done without being overly opinionated.
QCalendar can be installed directly in Vue/Vite projects using the UI package. The Quasar app extension is a convenience layer for Quasar CLI Vite projects that want automatic boot-file registration and Quasar-specific tooling integration.
QCalendar is actually an accumulation of several other dedicated components and exported methods:
- QCalendar (wrapper)
- QCalendarDay
- QCalendarMonth
- QCalendarAgenda
- QCalendarResource
- QCalendarScheduler
- QCalendarTask
Features
- Show month, week, work-week, day, contiguous days (ex: 3 days at a time)
- Scheduler view (optional hierarchical trees)
- Resource view (optional hierarchical trees)
- Agenda view (with optional Planner modes)
- Task view (timesheets, Gantt charts)
- Month view mini-mode (picker)
- Month view multi-day selection (toggle and range)
- Month view multi-month/multi-day range selection when combining two or more calendars
- Optional drag and drop support (including mobile)
- Automatic localization / internationalization
- Responsive flex grid layout
- No external dependencies (momentjs, jQuery, etc) other than Vue and the shared timestamp primitives used by the package
- User events support (date, day, interval, time, resource, etc)
- Define any day as beginning of week
- Show only certain days of the week (good for work week days)
- Disable days or weekdays
- Workweek number support
- Day-of-the-year support
- Easy to theme using CSS vars and Theme Builder
- Easy to customize with Vue slots
- Support for Dark mode
- Rich support of date functions that are also exported for making your own calendars
- Toggled date, range and interval selection
QCalendar is not…
- An event management system. However, QCalendar supports everything you need to create an event/reminder/task management system using slots.
- An interactive navigation provider (next, previous, today). However, you can easily do this in devland with QCalendar’s methods (see examples).
- Only the Gregorian calendar is supported (at this time).