v3.0.0

QCalendar v3.0.0

As QCalendar strives to be the most exstensible calendar available, to be consistent with this ideology, we had to make a LOT of changes.

Among other updates, several things have become "native" for QCalendar:

1. The largest overhaul was introducing css vars to allow users the ability to customize QCalendar
2. QCalendar was compared to dozens of other calendars and the look was optimized to be more modern
3. The original theming has been removed. The css vars are 25% faster than the previous theming code
4. You no longer need to provide a .q-active-date class. You can now change the active date colors via css vars
5. You no longer need to hook into the styles properties (ie: interval-style) to change the way disabled days look. You can now change the disable date colors via css vars
6. 'activeDate' is now included in a lot of the scoped slots and events
7. On interval-based calendars, when using the property "interval-minutes", those parts of the calendar are now called "interval sections" and can be changed via css vars. The default is to now have a "dashed" look, while at the main interval time, the lines are solid. Again, all changeable via css vars
8. You no longer have to provide .q-range-first, .q-range-last and .q-range classes via day-class property for range selection. It's all built-in now.
9. All deprecated slots and events were removed

Also, check out the new Theme Builder in the docs.

Features/Fixes

The following issues were also resolved or features added:

• feat(scheduler/resource): new event "expanded"
• fix(scheduler/resource): provide proper "down" icon for children
• fix(scheduler/resource): increase children icon size
• fix(resource): use correct icon for children
• fix(month): correctly calc cell width when workweeks is on
• feat(month): don't render doy or month label when on outside day and hide-outside-days is true
• feat(ui): activeDate and outsideDays improvements
• feat(month): new prop "hover"
• feat(ui): getRelativeClasses improvements for selection
• feat(ui): css improvements with css vars (theming)
• feat(day/week): interval sections
• fix(ui): change how order of classes appear at top-level
• feat(ui): new css q-disabled-date is now native for disabled days
• feat(ui): remove color prop -- use css vars now
• feat(ui): remove old theme system
• fix(ui): disabled day must come last in class
• fix(ui): week slots starting position too low

A number of changes were made in v2.4.0 and the current way of doing things was deprecated. All deprecated css and events have been removed for v3.0.0.

Upgrade Guide:

CSS Changes

• If you were using the .q-event for monthly day scoped events, change this to .q-day-event

Event Changes

• :workweek to :workweek2
• :day to :day2
• click:date to click:date2
• contextmenu:date to contextmenu:date2
• :day to :day:header2 (applies to day, week and scheduler that had this representation incorrectly named to begin with)
• :resource:day to :resource:day2
• :resource to :resource2
• :interval to :interval2
• :time to :time2
• :column:head to :column:header2
• :column to :column2

Other

Additionally, the above changes have made the CSS and component smaller for download. Here is the comparison:

File	V3.0.0	V2.5.1
dist/index.css	55.10kb (gzipped: 4.62kb)	75.03kb (gzipped: 7.92kb)
dist/index.umd.js	132.67kb	155.49kb
dist/index.esm.js	68.01kb (gzipped: 13.80kb)	78.61kb (gzipped: 16.03kb)
dist/index.common.js	67.06kb (gzipped: 13.65kb)	77.66kb (gzipped: 15.88kb)
dist/index.umd.min.js	62.57kb (gzipped: 13.64kb)	73.08kb (gzipped: 15.82kb)
dist/index.rtl.css	80.56kb (gzipped: 6.37kb)	96.75kb (gzipped: 9.35kb)
dist/index.min.css	48.42kb (gzipped: 4.47kb)	65.63kb (gzipped: 7.61kb)
dist/index.rtl.min.css	72.58kb (gzipped: 6.02kb)	86.88kb (gzipped: 8.98kb)
dist/api/timestamp.json	35.68kb	35.68kb
dist/vetur/tags.json	1.46kb	1.50kb
dist/vetur/attributes.json	9.90kb	10.24kb
dist/api/QCalendar.json	274.61kb	273.97kb