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
      api.extendQuasarConf(extendQuasarConf)
    }
    

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

    WARNING

    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";
    

    and

    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'
    Vue.use(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?

    Scott



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