QCalendar suggestion

  • 1253/5000
    Hello. This is my first contact with Quasar.

    I’d like to know if it’s possible to schedule, say, 10 equal events and see these events one below the other in any of the views (especially the weekly).

    Example: 10 events on day 8, at 10am until 11am.

    It may seem absurd (and, personally, I agree that it is), however, a client asked me to do this on an old project and I could not do it with Vuetify or the “new” FullCalendar.

    I decided to test QCalendar and it also does not show events on the same day. It adds to the right. I need the events to appear underneath each other.

    The reason my former contractor gave me is that some medical professionals mark 3, 5, 10 patients for the same time. In other cases, for example, a large market or mall, they get 10 or 20 or 30 trucks on the same day and at the same time.

    I understand that we could propose other solutions for these customers, but many of them do not understand programming and find it easy to solve these problems. In the old version of FullCalendar (which used jQuery) it was possible to schedule many equal schedules and they were stacked one over the other without overlapping.

    Thanks for your attention.

  • @Hawkeye64 - This one is for you. 😄


  • I think the “events” you can have with QCalendar has nothing to do with QCalendar itself, you just have access to the date slot and you can put anything in there, so you can put a container that stacks events. Of course I might be wrong and Hawkeye can help us all.

  • @lucasfernog There is no documentation about it yet, please see: https://quasarframework.github.io/app-extension-qcalendar/docs “TODO” in “Working with Slots”.

  • Indeed, i had to look at the source code of the playground to learn it.

  • I’ve just created a Laravel project and had integrated / installed Quasar and tested successfully many components. However, looks like I can’t install a Quasar extension (or, I don’t know how to install it). As I’m not using Quasar CLI , there is no way to add it on my new testing project?

    Please see:

    1. QCalendar is a Quasar App Extension.
    2. The warning message here: https://quasar.dev/app-extensions/introduction
    npm i @quasar/qcalendar --save
    npm ERR! 404 Not Found - GET https://registry.npmjs.org/@quasar%2fqcalendar - Not found

    It looks like I have no luck with calendars 🙂

    Or I’ll need to install the ‘old’ one:


  • The correct package name is @quasar/quasar-app-extension-qcalendar and I dont know If it will work on UMD version, but you can try to import the component by yourself @LM

  • @lucasfernog Thanks for the right package name!

    Unfortunately, I’ve got:

    Uncaught TypeError: api.compatibleWith is not a function
        at ./node_modules/@quasar/quasar-app-extension-qcalendar/src/index.js.module.exports (app.js:121)

    and at 121:

    module.exports = function (api) {
      // quasar compatibility check
      api.compatibleWith('@quasar/app', '^1.0.0-beta.26')
      // register JSON api
      // api.registerDescribeApi('QCalendar', './component/QCalendar.json')
      // extend quasar.conf

    Also, from here: https://quasar.dev/app-extensions/introduction


    App Extensions are designed specifically for Quasar CLI only. This means that you will not be able to install them or run them in Vue CLI or UMD environments.

  • Did you try to import the index or install file? You need to import the component and stylus file directly and register it @LM

  • @lucasfernog I’m probably importing the qcalendar wrongly. I have tried the following:

    import { QCalendar } from "@quasar/quasar-app-extension-qcalendar";


    import QCalendar from "@quasar/quasar-app-extension-qcalendar";

    and registered it globally and also tried to register locally in a .vue component.

    Do you have any tip or link/site to explain how can I import that, please? In vuetify I just need to do this:

    import Vuetify from 'vuetify'

    And this is what is working (with all Quasar components, except QCalendar) :

    import Quasar from 'quasar'
    Vue.use(Quasar, {
        // components: [ QCalendar ]

    and this is my package.json

        "devDependencies": {
            "axios": "^0.18",
            "cross-env": "^5.1",
            "laravel-mix": "^4.0.7",
            "lodash": "^4.17.5",
            "resolve-url-loader": "^2.3.1",
            "sass": "^1.15.2",
            "sass-loader": "^7.1.0",
            "vue": "^2.5.17",
            "vue-template-compiler": "^2.6.10"
        "dependencies": {
            "@quasar/extras": "^1.1.2",
            "@quasar/quasar-app-extension-qcalendar": "^1.0.0-alpha.13",
            "quasar": "^1.0.0-rc.4",
            "quasar-framework": "^0.17.20"

  • You need to use import QCalendar from “@quasar/quasar-app-extension-qcalendar/src/component/QCalendar.js”; (something like this)
    and Vue.use(QCalendar)

    i didn’t test it so i dont know, maybe the url should be @quasar/quasar-app-extension-qcalendar/component/QCalendar.js… try some stuff @LM

  • Yes, this would be the proper way for UMD. Just importing it will return the index.js used by the quasar cli.

    import QCalendar from '@quasar/quasar-app-extension-qcalendar/src/component/QCalendar'
    import from '@quasar/quasar-app-extension-qcalendar/src/component/calendar-daily.styl'
    import from '@quasar/quasar-app-extension-qcalendar/src/component/calendar-weekly.styl'

  • note: I have not tried UMD with an app extension yet…

  • Would that be even possible?


  • @Hawkeye64 said in QCalendar suggestion:

    import from ‘@quasar/quasar-app-extension-qcalendar/src/component/calendar-daily.styl’
    import from ‘@quasar/quasar-app-extension-qcalendar/src/component/calendar-weekly.styl’

    I’ve to figure out where to load it in Laravel and I found the right place / file: webpack.mix.js and then:

    .stylus('node_modules/@quasar/quasar-app-extension-qcalendar/src/component/calendar-daily.styl', 'public/css')
    .stylus('node_modules/@quasar/quasar-app-extension-qcalendar/src/component/calendar-weekly.styl', 'public/css')

    The QCalendar is loading without errors, but displaying the header of weeks vertically. Maybe I need some container to display it correctly. I will keep you guys updated.

    Thanks in advance @lucasfernog @Hawkeye64 @s-molinari

  • This post is deleted!

  • So… there is not a ready events method? I mean… a place where I can put a json file/array/object to it load/parse automatically?

    Basically, I must copy/past this: https://github.com/quasarframework/app-extension-qcalendar/blob/21a53d7e57512b6201473e09f76db7b931245890/demo/src/pages/Calendar.vue ?

  • @LM There is no events or reminders system built into QCalendar. However, knoiwing this is a requirement of calendars, it gives special attention to vue slots and events so it can be managed in dev land. In this manner, QCalendar is non-opinionated abaout such things and the UI and handling is done by the developer. See the demo for a complete example.

Log in to reply