Problem Importing QCalendar

ElTigreChino

I have installed QCalender through the Quasar cli as directed by the installation section of the docs, and followed on of the examples of the calendar.

However, I receive the following error:

TypeError: _quasar_quasar_ui_qcalendar__WEBPACK_IMPORTED_MODULE_0__.QCalendar.getDayTimeIdentifier is not a function

At first I thought it was having trouble importing the plugin, but I do import it and it does seem to be installed by the cli

import { QCalendar } from '@quasar/quasar-ui-qcalendar'

However, it does render the calendar correctly and only throws the error when I try doing a time selection

I did try changing the import to since that is how it was listed by quasar info:

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

But it throws the following instead:

TypeError: Cannot read property 'getDayTimeIdentifier' of undefined

This makes me think that now QCalendar itself is unresolved, so its a step back to what I originally had.

I am new to Quasar so I might be not installing it correctly. Can anyone point me in the right direction to resolving this issue? From the docs it seemed I only needed to do a

quasar ext add @quasar/qcalendar

This is my quasar version:

Important local packages
  quasar - 1.15.5 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app - 2.2.1 -- Quasar Framework local CLI
  @quasar/extras - 1.9.19 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 2.6.12 -- Reactive, component-oriented view layer for modern web interfaces.
  vue-router - 3.2.0 -- Official router for Vue.js 2
  vuex - 3.6.0 -- state management for Vue.js
  electron - Not installed
  electron-packager - Not installed
  electron-builder - Not installed
  @babel/core - 7.13.10 -- Babel compiler core.
  webpack - 4.44.2 -- Packs CommonJs/AMD modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand. Support loaders to preprocess files, i.e. json, jsx, es7, css, less, ... and your custom stuff.
  webpack-dev-server - 3.11.0 -- Serves a webpack app. Updates the browser on changes.
  workbox-webpack-plugin - Not installed
  register-service-worker - 1.7.1 -- Script for registering service worker, with hooks
  typescript - 4.2.2 -- TypeScript is a language for application scale JavaScript development
  @capacitor/core - Not installed
  @capacitor/cli - Not installed
  @capacitor/android - Not installed
  @capacitor/ios - Not installed

Quasar App Extensions
  @quasar/quasar-app-extension-qcalendar - 3.3.4 -- A Quasar App Extension for @quasar/quasar-ui-qcalendar

Hawkeye64

Do you get the error with getDayTimeIdentifier without even importing it?
There’s a couple of ways you can import:

import myPlugin from '@quasar/quasar-ui-qcalendar
This is the default export, so the exported name can be anything you like

myPlugin will contain all the other exports, but to get at those, you can destructure them:

import { getDayTimeIdentifier, version, QCalendar } from '@quasar/quasar-ui-qcalendar
Hope that helps

ElTigreChino

@hawkeye64 said in Problem Importing QCalendar:

When I have no import statement it gives me an error about QCalendar not being defined.

I did try importing the specific functions manually as you suggested:

import { QCalendar,getDateTime,getDayTimeIdentifier } from '@quasar/quasar-ui-qcalendar'

It still throws the same error. Also, it might be worth noting that visual studio code marks the import of the functions as unused, with the only used import being QCalendar.
Could it be an issue with how I am calling it? I pretty much copied the code from the examples page.

anchorDayTimeIdentifier () {
      if (this.anchorTimestamp !== null) {
        return QCalendar.getDayTimeIdentifier(this.anchorTimestamp)
      }
      return false
    },
otherDayTimeIdentifier () {
      if (this.otherTimestamp !== null) {
        return QCalendar.getDayTimeIdentifier(this.otherTimestamp)
      }
      return false
    },

ugd

Hi, any updates on this topic? I have the same problem, I installed QCalendar via Quasar Cli with

quasar ext add @quasar/qcalendar

and when I’m trying an example from the example page by copying the template then the script part, my console from browser prints:

ReferenceError: QCalendar is not defined

The example which I want to use is the QCalendar(Month) with daily slots.

No More Posting New Topics!

Problem Importing QCalendar