QCalendar suggestion



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

    https://www.npmjs.com/package/quasar-calendar



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


Log in to reply