quasarframework / quasar-ui-qcalendar

QCalendar - Quasar App Extension, Vue CLI plug-in and UMD distributions available

QCalendar (Vue Plugin, UMD and Quasar App Extension)

If you are looking for QCalendar that works with Vue 3, head over to the new docs or visit the next branch..

Everything you need for a complete Calendar solution.

QCalendar is a Quasar component. It is a powerful calendar that plugs right into your Quasar application and allows for viewing of day (1-6 days), week, monthly, scheduler and agenda 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

v3.2.0: New property for interval-based calendars: time-clicks-clamped. What this does, is instead of returning a timestamp with the exact time of the click position, it returns the timestamp of the interval. If normally, your timestamp would have a time of 13:20, this property makes it return 13:00. This is also based on your settings of interval-minutes. If your interval-minutes is set to 15, then the same click above would return a timestamp with time set to 13:15.

Day and Week calendars now have the ability to toggle selected intervals or a range of selected intervals (even across multiple days) with properties selected-dates and selected-start-end-dates. These properties not only need the date (like the month view uses), but also the time (use the Timestamp exported method getDateTime). See the examples to learn how to do this.

Timestamp has a new exported method: getDateTimeIdentifier which is a convenience method that combines getDayIdentifier and getTimeIdentifier.

You can find out more information here.

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 of your own. 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.

You can find out more information here.

v2.4.0: New slots and events added. Current event system is deprecated, but still available until the next major version is released. To see the deprecated events in the QCalendar API (at bottom of the page here), select the hamburger menu, then select Show deprecated. You can find out more information here.

v2.2.0: Please be aware of breaking changes in events and scoped slotted data. You can find out more information here.

---

Live Demo - live docs, demo and examples

---

Month view with events

Planner example

Monthly Mini-mode

Multi-month selector (mini-mode)

Agenda view with custom content

Day view with events

Resource view with events

Scheduler 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

• /ui - standalone npm package (go here for more information)
• /app-extension - Quasar app extension
• /demo - 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:

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

Codepen

UMD example on Codepen

Donate

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

License

MIT (c) Jeff Galbraith [email protected]

quasar-ui-qcalendar's Issues

Playground on Quasar Demo is giving errors

For a legitimate bug, in order to process faster, please go here https://codepen.io/Hawkeye64/pen/RwwwKQL, fork the codepen, add code to reproduce the bug and submit link here (don't forget to save your codepen):

Don't know this if this is the where you would prefer this error but I thought someone would like to know.

Describe the bug
A clear and concise description of what the bug is.
[https://quasarframework.github.io/quasar-ui-qcalendar/demo](https://quasarframework.github.io/quasar-ui-qcalendar/demo
is throwing this error
/quasar-ui-qcalendar/demo:1 GET https://quasarframework.github.io/quasar-ui-qcalendar/demo 404
To Reproduce
Visit https://quasarframework.github.io/quasar-ui-qcalendar/demo

Screenshots

Calendar demo style has typo's?

Hi,

In your demo https://github.com/quasarframework/quasar-ui-qcalendar/blob/dev/demo/src/pages/Calendar.vue are some colon's missing.

I did not get the style working and need to edit this style:

<style lang="sass">
  // calendar overrides
  .q-calendar-daily__day-interval:hover
    background-color: rgba(0,0,255,.1)
  .q-calendar-weekly__workweek:hover
    background-color: rgba(0,0,255,.1)
  .q-calendar-weekly__day:hover
    background-color: rgba(0,0,255,.1)
  .q-calendar-weekly__head-weekday:hover
    background-color: rgba(0,0,255,.1)
  // this page
  .calendar-container
    position relative
  .my-event
    width 100%
    position absolute
    font-size 12px
  .full-width
    left 0
    width 100%
  .left-side
    left 0
    width 49.75%
  .right-side
    left 50.25%
    width 49.75%
  </style>

to this style:

<style lang="sass">
  // calendar overrides
  .q-calendar-daily__day-interval:hover
    background-color: rgba(0,0,255,.1)
  .q-calendar-weekly__workweek:hover
    background-color: rgba(0,0,255,.1)
  .q-calendar-weekly__day:hover
    background-color: rgba(0,0,255,.1)
  .q-calendar-weekly__head-weekday:hover
    background-color: rgba(0,0,255,.1)
  // this page
  .calendar-container
    position relative
  .my-event
    width: 100%
    position: absolute
    font-size: 12px
  .full-width
    left: 0
    width: 100%
  .left-side
    left: 0
    width: 49.75%
  .right-side
    left: 50.25%
    width: 49.75%
  </style>

Or has vscode studio some settings that the colon is not mandatory?

Unknown custom element: <q-date-time-scroller> - did you register the component correctly?

Pkg quasar........ v1.1.4
Pkg @quasar/app... v1.1.2

I don't get where these scroll components are coming from?

Is there a way to achieve a strip calendar like the one in Outlook for Android

ReactNative has a component with similar UX from https://github.com/BugiDev/react-native-calendar-strip.

If you have any pointers, I might be able to make a pull request and work on it.

Week views display wrong amount of days when v-model is changed

Set up:

1. week or week-schedule views
2. monday set as first day of the week
3. 5 day work week
   Previous and next works. The issue occurs when you set v-model (value) to something else, like licking the TODAY button. Then, the display is monday as forst day of the week, Saturday and Sunday are skipped, but 7 days are displayed.

Help on setting intervals on Month Scheduler

Question:

I can't find a clear way on the documentation on how to do the following:
On Month Scheduler mode:
Set programmatically and asynchronously an event (could be one day duration or more) and see it being reflected on the calendar (the corresponding days must be styled accordingly).

A common use case would be:

• I click on one of the resource entities (a employee) buttons on the left of the calendar;
• A dialog with a form is fired, with event information to be filled;
• After submitting the form, the calendar is updated and styled according to the data passed on the submitted form.

I'm a bit lost on which methods and parameters should I use to achieve this behavior, i.e., change asynchronously the appearance of the calendar (in other words, styling and adding text to selected days), when I'm in Month Scheduler mode.

No visual feedback on toggling selected dates in mini-mode

In mini-mode, if you try to toggle a selected date it seems like it does not work. The date is removed from the selected dates array, but I believe the CSS of the v-model date is equal to the CSS of a selected date. Thus there is no feedback if a date is selected or if it's the current v-model date.
(that's my guess, but I couldn't figure it out in the source code)

UnhandledPromiseRejectionWarning

after adding calendar with quasar ext add @quasar/qcalendar

I recieve

(node:2587) UnhandledPromiseRejectionWarning: TypeError:
[@quasar]/quasar-app-extension-qcalendar/src/index.js:26:7

when doing quasar dev

Issue with Safari

I was playing with the Demo using Safari and I noticed that:

1. In the "View month", if we click on the "Visit mom" event, after the Event modal displays, it is missing the "End time" data (in chrome it shows "18:30").
2. Once we tried to edit the event on Safari, both "Event start date" field and "Event start date" field (the second one should be named "Event end date" I guess), do not show any data, and on chrome it displays well. I suppose the value is in the "component state", because when we tried to edit them, it goes to the actual values displayed in Chrome.
3. Changing any "Event start date" fields on Safari makes the event suddenly disappear.

Operating System
System Version: macOS 10.14.4 (18E226)

Safari version
Version 12.1 (14607.1.40.1.4)

event badge not expands to dates in case of event timespan is more than one day.

event badge not expands to dates in case of event timespan is more than one day.Suppose a event starts 02-05-2019 and ends 04-05-2019, then event badge should expand to three date cells in calendar.

module size

@quasar/quasar-ui-qcalendar 372.0kB

how can I get this down, the umd.min.js is only 53kb, im not sure why my vue cli version is so much larger

import QCalendar from '@quasar/quasar-ui-qcalendar';
import '@quasar/quasar-ui-qcalendar/dist/index.css';

Vue.use(Quasar, {
	config: { dark: true },
	components: {
		...
		QCalendar
		...
	}
 })

Feature Request: hide-header prop to only hide default header content

Currently the only way to remove the default header content is the hide-header prop.
This prop also removes all header slots such as day-header, column-header-before, column-header-after

This means that I cannot remove the default button and day name and have a custom header at the same time.

The suggested change would use the same props, but only remove the day name and date button when the hide-header prop use truthy. Any custom header slot content would remain.

I am willing to make a PR if you aprove

Edit: alternatively, add a new prop hide-default-header-content
I've just read the code and it looks like if the header is rendered there will be some styling (it wont collapse to nothing if there is no content),

Edit 2: Just went ahead and edited the code direclty in the node modules of my project. Works fine. I suggest we simply repurpose the hideHeader prop for this, as it looks almost the same as long as there is no header slot content

Old look (hide header prop. Does not matter if header slots are used, they will not be shown)

New look (hideHeader prop, no header slot content)

As you can see the grey line on the top is the only difference

Add ability to create interval now line

I have seen in other calendars, the ability to show an interval now line on the today's date representing the current time which reactivity moves on each minute past.

I would love the have a similar feature in the qcalendar. It's already awesome but this, for me is the cherry on top of features.

vue-cal and daykeep-calendar-quasar has similar features, vue-cal's line doesn't reactivity change where as daykeep-calendar-quasar does.

The interval now line is usually red but an added feature, have the ability to change its color.

Demo: many events with the same start overlaps in view day

Describe the bug
2 events with the same start overlaps in day view

To Reproduce
-Go to demo;
-Select view day
-Create event ex. My event 1, start 16:30 ,anyduration;
-Create event ex. My event 2, start 16:30, anyduration;
-see My event 1 disappear.

Expected behavior
many events with the same don't keep full width

Screenshots

Desktop (please complete the following information):

Smartphone (please complete the following information):

Additional context

Miscalculation when weekdays is set to only 5 days

Codepen
https://codepen.io/Gumaa/pen/YzzWPPo

Describe the bug
QCalendar is miscalculating number of days to show when weekdays it set to [1,2,3,4,5] - it does not take into the account disabled days and it overshoots.

In consequence for example in week view, when going to a next week it moves by 7 active days and sometimes skips whole week (because in that case week has only 5 active days). Or in month-interval view it shows extra days at the end of the month.

To Reproduce
A) Steps to reproduce the behavior for month interval view:

1. Create QCalendar with next/prev navigation buttons
2. Add prop: :weekdays="[1,2,3,4,5]"
3. Add prop: view="month-interval"
4. Go to month November
5. It shows additional 10 days from December at the end

B) Steps to reproduce the behavior for week view:

1. Create QCalendar with next/prev navigation buttons
2. Add prop: :weekdays="[1,2,3,4,5]"
3. Add prop: view="week"
4. Click next couple times
5. It skips a whole week every 3rd click

Expected behavior
A) It should display only days in November (from 1-29).
B) It should not skip any week and move only by 5 active days.

Screenshots
A)

B)

Selecting date causes calendar redraw

https://codepen.io/stefanvh/pen/yLNLqbv

Describe the bug
In the example, if you select any date other than the current one, the calendar will redraw. This does not happen if you select a date in a different month (after going to another month with the previous/next buttons).

To Reproduce
Steps to reproduce the behavior:

1. Click on Feb 4 for example
2. Calendar will redraw

Prev/Next Button not working correctly in Scheduler View

The Prev/Next navigation in the Scheduler View Example doesn't work, although the transition animation is triggered the first time you click.

:column-count prop not working for count > 1

For a legitimate bug, in order to process faster, please go here https://codesandbox.io/s/qcalendar-bx1y7, fork the codesandbox, add code to reproduce the bug and submit link here:

Describe the bug
Whenever I try to use :column-count > 1, the day view does not render column header. As long as I'm just using 1, all slots appear to render correctly.

To Reproduce
Add :column-count="1"
Add a #column-header-after slot template and add 2 items. Try to use v-if="day.index === 0" to toggle appropriate item.

Expected behavior
Example appears to be working properly as seen here: https://quasarframework.github.io/quasar-ui-qcalendar/examples/day-view#Day-View---Column-Header-Count

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):
All O/S and platforms

Smartphone (please complete the following information):
All

Additional context
Add any other context about the problem here.

feat: Calendar should expand to fit parent container height (month view)

In "month" view, if the parent container height is taller than the calendar, the calendar should fit the height. This only works properly if day-height is set to 0.

Layout broken on "Day Start" toggle

toggling "Week starts on Monday" breaks the calendar layout
as in my screenshot using chrome on macos

Demo not working

Currently the demo under https://quasarframework.github.io/app-extension-qcalendar/#/ isn't working because of wrong js files

GET https://quasarframework.github.io/js/app.40b76b92.js net::ERR_ABORTED 404

Dependabot couldn't find a package.json for this project

Dependabot couldn't find a package.json for this project.

Dependabot requires a package.json to evaluate your project's current JavaScript dependencies. It had expected to find one at the path: /package.json.

If this isn't a JavaScript project, or if it is a library, you may wish to disable updates for it from within Dependabot.

json data example / docs website and examples

I have been searching the documentation website, and I cannot find the format for bringing in data to display - I am expecting something like - label: '', description: '', from: 'datetime', to:'datetime', color: 'blue' etc.

and for this to display in the calendar. I just cannot find an example anywhere though I can experiment as a user doing this.

If I have missed something incredibly obvious apologies. This may be in your demo set up here on github but I am expecting to see it in the documantation and examples web site.

It looks like an incredible bit of work - looking forward to using.

interval calendars with long text cause bad column widths

If the content of a resource day does not fit within the container, the container is stretched in width until it fits. However, the day headers do not stretch along which means that the columns of days and resources do not longer correspond with each other. Also, a scroll bar appears but the other columns seem to have disappeared.

I'd suggest not making the header a fixed window width, but making both the header and content horizontally scrollable if necessary.

Reproduction:
In the demo, set the content of a resource-day to a very long string.

Does not work on IE 11 or Edge

Describe the bug
Crashes Quasar on IE11 or Edge when including in the quasar.extensions.json.

Error in IE 11:

SCRIPT1006: Expected ')'
app.js (8887,1)

/***/ "./node_modules/quasar-mixin-colorize/src/index.js":
/*!*********************************************************!*\
  !*** ./node_modules/quasar-mixin-colorize/src/index.js ***!
  \*********************************************************/
/*! exports provided: isNamedCssColor, isCssColor, isCssVar, calculateColor, makeQuasarColorVar, Colorize, Theme */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
eval(

To Reproduce
quasar ext add @quasar/qcalendar

Expected behavior
App to boot

Additional context
Edge doesn't boot at all - just a white screen.

5-day workweek does not show month label (when 1st is on weekend)

Codepen
https://codepen.io/Gumaa/pen/jOOBwLp

Describe the bug
When showing month view with 5 day work week enabled month label does not show when the first day of the month is on weekend. Label should be shown on first available day of the month.

To Reproduce
Steps to reproduce the behavior:

1. Create QCalendar
2. Add prop: :weekdays="[1,2,3,4,5]"
3. Add prop: view="month"
4. Go to December 2019
5. There is no month label shown for December

Expected behavior
There should be moth label on the first available day (2nd of December in that case)

Screenshots

Using template to fetch events trigger twice

https://codesandbox.io/s/qcalendar-t0c6e
(not sure it's clear)

Describe the bug
The method to fetch events is called twice

To Reproduce
Open calendar and check the console

Expected behavior
fetchEvents() called only once

Screenshots

Desktop (please complete the following information):
Firefox 68.0 (64 bit)
Ubuntu 16.04.6 LTS
Pkg quasar........ v1.0.5
Pkg @quasar/app... v1.0.4

Additional context

@click:time event should pass index when column-count > than 1

[BUG] Extra week displayed when 1st day of month is 1st day of week

Day view intervals start at wrong time

The day view intervals are starting at +/- GMT from UTC.

(demo) Header buttons do not work in scheduler views

Describe the bug
When the view is set to a scheduler view, and the button in the header is clicked to change the date, it returns the following error:
RangeError: "date value is not finite in DateTimeFormat.format()"
(and selectedDate: undefined in the demo)

Expected behavior
It should change the date to the selected date, as in the other views.

I think it might be an error here:

quasar-ui-qcalendar/ui/src/component/QCalendarScheduler.js

Line 249 in a054f7c

}, _event => scope)

But I'm not sure.

Stylus and CSS customization

Now it's not possible to override stylus variables for customization.

The Calendar stylus vars should be declared with a ?. E.g.: $day-label ?= 24px

This is useful for reducing the css footprint.

Would be also nice if instead of $primary, etc, use var(--q-color-primary) and if the color for borders, backgrounds, etc, are in their own vars. E.g.: $calendarBorderColor ?= $grey-4

Improve DnD functionality and give visual feedback on dragged event

In week mode it is not possible to drag 2 hours event for period shorter then 2 hours.

Would be nice to get visual feedback of where the event is going to land on drop (maybe with snap to the grid) and it is must have to be able to drag event for period shorter then event self.

Intervals stop at 12pm

Hi, my calendar stop the intervals at 12 pm for any kind of view (tried with dayview and weekview)

To Reproduce

Don't even know how it is possible

Screenshots

Desktop (please complete the following information):

• OS: W10
• Browser Chrome Version 78.0.3904.108

Additional context
Quasar 1.5.8

Documentation for click event

The documentation table doesn't indicate that click:context event pass the date as argument.

API json seems to be from a different extension

https://github.com/quasarframework/app-extension-qcalendar/blob/dev/src/component/QCalendar.json

error when changing saved event from all day event to duration event

Describe the bug
Error in callback for watcher "date": "TypeError: Cannot read property 'date' of null"

To Reproduce
Steps to reproduce the behavior:

1. enter an all day event
2. Click on the event to edit it
3. Uncheck all day event checkbox and select event start date and time
4. See error in console

Desktop (please complete the following information):

• OS: [windows]
• Browser [chrome]

By adding 00:00 to the string in the input it doesn't throw the error when clicking on the icon to open datepicker, so to rectify the issue, I would say that string needs to be formatted to include hours and minutes

[feat] Agenda view

Is your feature request related to a problem? Please describe.
I was using q-calendar to create a booking system, however on the week-view, q-calendar's behavior is to show all the time intervals for a day, which might be less user-friendly since the user has to scroll a lot to see an available booking slot.

Describe the solution you'd like
It would be awesome if q-calendar body to show only the event, not all the time intervals in week-view, I have left an example screenshot at the additional context.

Describe alternatives you've considered
Currently I am considering to start the daily timeline at the earliest available booking slot so that user does not have to scroll that much to see the first available booking slot. Combining with the header v-slot, I will add q-badge in the header, so that it's more straightforward to the user to see if the day has an available booking slot.

Additional context
Similar example of desired achievement:

Doc incomplete: How to use event drag and drop?

Hi,

I am trying out the QCalendar from my quasar cli app but don't understand how to use it.
I would like to be able to move events and think it should be possible with the drag and drop support.
In the doc ( https://quasarframework.github.io/quasar-ui-qcalendar/docs#Drag-and-Drop-support ) is described you should create events like this :

<template #day="{ date }">
  <template v-for="(event, index) in getEvents(date)">
    <q-badge
      :key="index"
      style="width: 100%; cursor: pointer;"
      :class="badgeClasses(event, 'day')"
      :style="badgeStyles(event, 'day')"
      @click.stop.prevent="showEvent(event)"
      :draggable="true"
      @dragstart.native="(e) => onDragStart(e, event)"
      @dragend.native="(e) => onDragEnd(e, event)"
      @dragenter.native="(e) => onDragEnter(e, event)"
      @touchmove.native="(e) => {}"
    >
      <q-icon v-if="event.icon" :name="event.icon" class="q-mr-xs" /><span class="ellipsis">{{ event.title }}</span>
    </q-badge>
  </template>
</template>

and add this methods:

onDragEnter (ev, event) {
  prevent(ev)
},
onDragStart (ev, event) {
  this.dragging = true
  this.draggedEvent = event
  stop(ev)
},
onDragEnd (ev, event) {
  stopAndPrevent(ev)
  this.resetDrag()
},
onDragOver (ev, day, type) {
  if (type === 'day') {
    stopAndPrevent(ev)
    return this.draggedEvent.date !== day.date
  } else if (type === 'interval') {
    stopAndPrevent(ev)
    return this.draggedEvent.date !== day.date && this.draggedEvent.time !== day.time
  }
},
onDrop (ev, day, type) {
  ev.preventDefault()
  ev.stopPropagation()
  if (type === 'day') {
    this.draggedEvent.date = day.date
    this.draggedEvent.side = void 0
  } else if (type === 'interval') {
    this.draggedEvent.date = day.date
    this.draggedEvent.time = day.time
    this.draggedEvent.side = void 0
  }
},
resetDrag () {
  this.draggedEvent = void 0
  this.dragging = false
  if (Platform.is.desktop) {
    this.ignoreNextSwipe = true
  }
}

This source code is not complete. The method's prevent(ev) en stopAndPrevent(ev) are missing.
Also the onDragOver and onDrop are not linked to a event handler. Do you have some complete examples how to use this with a calendar with view="week"?

5-day workweek/month-view shows invalid weeks

When showing month-view and a 5-day workweek, starting and ending weeks may display without dates from current month. Quite visible for June 2019 and Feb 2020.

[BUG] Workweeks display is off

Month view - events that extends beyond a day

In the Month view, if I add an event with a duration of several days, I expect that this event tag would appear in each one of the days comprising the event interval. However, only the first day is tagged. If I click in the event tag, it shows me the correct duration. Nevertheless, I found it kind of misleading, since it seems like a one day event at first sight. If there are several events in the month, it seems kind of unpractical to click on each one of them just to know the duration, don't you think?

weekdays misbehaviour if using just [4,5,6,0]

Hi, it seems to me that weekdays prop doesn't behave correctly if you just show numbers after 4 as in:

   :weekdays="[4,5,6,0]"
   :weekdays="[5,6]"

(but seems fine with "[4,5,6]")

A codepen is here.

Here clearly names are not sequential and are not correct.
Sometimes the weekday names gets scrambled:

"[6,0]" => missing header
"[5,6,0]" => you just see friday

Did I miss something?

Day View - missing labels at end of day

I was playing with the demo, and set the "Interval Range (daily)" to be 06:45 to 19:30.

With the "Interval Step" set to 15min, all the labels display correctly each hour terminating at 7:00pm

With the "Interval Step" set to 30min, all the labels display correctly each hour .... BUT ... they terminate at 6:00pm ... so the 7:00pm label is not there

With the "Interval Step" set to 60min, all the labels display correctly each hour .... BUT ... they terminate at 5:00pm ... so both the 6:00pm lable and the 7:00pm label are not there

(@Digiproduct)

cannot run quasar dev after updating to 1.0.2

Describe the bug
after updating to latest version (@quasar/[email protected]) of the component i get:

⚠️ Missing .babelrc file...

after running: $ quasar dev

To Reproduce
update component and run quasar dev

Expected behavior
doesn't give errors

Screenshots

Desktop (please complete the following information):

Smartphone (please complete the following information):

Additional context
haven't test on a clean build

Swipe event on calendar effects siblings on mobile

For a legitimate bug, in order to process faster, please go here https://codesandbox.io/s/qcalendar-bx1y7, fork the codesandbox, add code to reproduce the bug and submit link here:
https://quasarframework.github.io/quasar-ui-qcalendar/examples#Swipe-Navigation

Describe the bug
With the swipe enabled on the calendar component, swiping in mobile mode will also make any sibling components have an elastic effect - but only when swiping right to left!

To Reproduce
Steps to reproduce the behavior:

1. Go to https://quasarframework.github.io/quasar-ui-qcalendar/examples#Swipe-Navigation
2. Open dev tools and set to mobile view.
3. Make sure you are at the swipe section (content moves when going into mobile mode)
4. Swipe between months/days.
5. As you can see, the other elements of the template move too.

Expected behavior
Any sibling or parents to not be affected by the swipe effect.

Screenshots
Note: The days shown are Monday - Friday

This is a screenshot when bugged

This is how I expect it to look like. I fixed it by putting the swipe in a parent div.

Desktop (please complete the following information):

• OS: Windows
• Browser: Chrome
• Version: 77.0.3865.120 (Official Build) (64-bit)

Smartphone (please complete the following information):

• Device: Motorola g4 Plus
• OS: Android 8.1.0 (OPJ28.111-22)
• Browser: Mobile Chrome
• Version: 77.0.3865.116

Additional context
I also tried loading the test site on my phone just in the chrome browser, and besides being stupidly slow, the swipe doesn't work at all.

I also tried putting this in the sandbox suggested when creating a bug report, but it didn't like my valid syntax.

Here it is anyway.
https://codesandbox.io/s/qcalendar-sobtj?fontsize=14

Missing day in month view

Steps

1. Go To the demo https://quasarframework.github.io/app-extension-qcalendar/demo
2. Change to month view
3. Go to September 2019

The bottom row is only 6 days long

Demo: building as spa is not working

Describe the bug
The demo built as spa doesn't work

To Reproduce
Steps to reproduce the behavior:
$ git clone
$ cd app-extension-qcalendar/demo
$ npm install
$ quasar build
copy ./dist/spa to an HTTP server
open webpage
see a lot of 404, like: http://localhost/app-extension-qcalendar/css/app.23634172.css

Expected behavior
the page loading and gives same result as using
$ quasar dev
command

Screenshots
white page

Desktop (please complete the following information):
not relevant

Smartphone (please complete the following information):
not relevant

Additional context
probably related to the way the app-extension is built... I have symlinked the ./dist/spa folder with a name, but it is trying to reach the "../" path for any reason

Resource interval gets console errors when no resources defined

It would be an error to not have any resources in a scheduler environment

calendar overwrites sass variables e.g. $primary

Describe the bug
Calendar overwrites my primary color.

To Reproduce
Steps to reproduce the behavior:

1. change the $primary src/css/quasar.variables.sass to a custom color.
2. verify that the primary color is being used e.g. in a button
3. install this app extension
4. notice that your primary color has returned to default

Expected behavior
qcalendar should NOT modify my color variables

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: mac
• Browser: brave, chrome

This is probably related to this line in q-colorize

By the way - I overwrote the vars in quasar/src/css/variables.sass with my vars (just to see what happened) and the q-calendar respected those, but outside of that component everything else still uses the stock quasar colors.