Vite support for FullCalendar

[TuguldurJ]

I'm submitting a ... (check one with "x")

[x] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primevue/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=110

Plunkr Case (Bug Reports) Please demonstrate your case at codesandbox by using the issue template below. Issues without a test case have much less possibility to be reviewed in detail and assisted. https://codesandbox.io/s/admiring-hooks-cv1dy

I also created an issue on https://forum.primefaces.org/viewtopic.php?f=142&t=66480

Current behavior I purchased diamond project and try to use it with vite.js compiler recently introduced in https://github.com/primefaces/primevue-quickstart-vite. npm run dev then error shown: Please import the top-level fullcalendar lib before attempting to import a plugin.

What is the motivation / use case for changing the behavior? This should update outdated dependencies on Diamond Premium Template and run with Vite.js perfectly.

Please tell us about your environment: Windows 10 x64, VSCode, Node.js, Npm

• Vue version: 3.X 3.0.10

• PrimeVue version: 5.X 3.4.0

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ] Chrome 90.0.4430.85 (Official Build) (64-bit)

main.js

import FullCalendar from 'primevue/fullcalendar';
import '@fullcalendar/common/main.min.css';
import '@fullcalendar/daygrid/main.min.css';
import '@fullcalendar/timegrid/main.min.css';
...
app.component('FullCalendar', FullCalendar);

    "name": "prime",
    "version": "3.4.0",
    "private": true,
    "scripts": {
        "start": "npm run dev",
        "dev": "vite",
        "build": "vite build",
        "test:unit": "vue-cli-service test:unit",
        "lint": "vue-cli-service lint"
    },
    "devDependencies": {
        "@fullcalendar/core": "5.6.0",
        "@fullcalendar/daygrid": "5.6.0",
        "@fullcalendar/interaction": "5.6.0",
        "@fullcalendar/timegrid": "5.6.0",
        "@vitejs/plugin-vue": "^1.2.2",
        "@vue/cli-plugin-babel": "~4.5.12",
        "@vue/cli-plugin-eslint": "~4.5.12",
        "@vue/cli-plugin-router": "~4.5.12",
        "@vue/cli-plugin-unit-jest": "~4.5.12",
        "@vue/cli-service": "~4.5.12",
        "@vue/compiler-sfc": "^3.0.11",
        "@vue/test-utils": "^2.0.0-0",
        "axios": "^0.21.1",
        "babel-core": "7.0.0-bridge.0",
        "babel-eslint": "^10.1.0",
        "babel-jest": "^26.6.3",
        "chart.js": "3.2.0",
        "core-js": "^3.11.0",
        "eslint-plugin-vue": "^7.9.0",
        "mitt": "^2.1.0",
        "primeflex": "2.0.0",
        "primeicons": "4.1.0",
        "primevue": "3.4.0",
        "prismjs": "^1.23.0",
        "sass": "^1.32.11",
        "vite": "^2.2.3",
        "vue": "^3.0.10",
        "vue-router": "^4.0.6"
    }
}

[TuguldurJ]

@tugcekucukoglu please help to resolve issue.

Anything would help. 🙏

[Aysnine]

any progress?

[Aysnine]

quick fix. workaround with official demo :

import '@fullcalendar/core/vdom' // ! add it
import '@fullcalendar/core'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'
import FullCalendar from 'primevue/fullcalendar'

[TuguldurJ]

quick fix. workaround with official demo :

import '@fullcalendar/core/vdom' // ! add it
import '@fullcalendar/core'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'
import FullCalendar from 'primevue/fullcalendar'

Thank you @Aysnine ! But I had this error. How can you solve this? Uncaught (in promise) TypeError: chart_esm_exports is not a constructor

[Aysnine]

@TuguldurJ Sorry, some error about chart. I'm not aware of this component.

[TuguldurJ]

It was related to issue #1142. Chart.js v3.0 is not supported yet.

[cagataycivici]

Charts also have this issue with Vite, we'll see if there is something we can do on our end.

[cagataycivici]

Closing as FullCalendar is deprecated in favor of the official component.

[reksc]

@cagataycivici can you elaborate on what do you mean as the official component? I'm working with Diamond theme and having exactly this issue.

[cbutler90]

Having same issue. Still no vite support?

[cbutler90]

For anyone looking for a resolution:

import '@fullcalendar/core/vdom';

in the component file add "vdom" as seen above