QCalendar suggestion

  • @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.

  • @giorgio Use the show-work-weeks property

  • OK thanks

Log in to reply