QCalendar suggestion

LM

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.

s.molinari

@Hawkeye64 - This one is for you.

Scott

lucasfernog

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.

LM

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

lucasfernog

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

lucasfernog

https://github.com/quasarframework/app-extension-qcalendar/blob/21a53d7e57512b6201473e09f76db7b931245890/demo/src/pages/Calendar.vue#L187

LM

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:

QCalendar is a Quasar App Extension.
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

lucasfernog

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

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.

lucasfernog

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

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

lucasfernog

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

Hawkeye64

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'

Hawkeye64

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

s.molinari

Would that be even possible?

Scott

LM

@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

LM

This post is deleted!

LM

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 ?

giorgio

Is there any way that the calandar can have the week attached. Very usefull for produxtion pourposes.
https://www.extendoffice.com/documents/outlook/1614-outlook-show-week-numbers.html

https://www.wheniscalendars.com/august-2018-calendar-week-numbers-printable/

Hawkeye64

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

No More Posting New Topics!

QCalendar suggestion