Comments (2)
Please refer to the support page and use Stack Overflow for help. If this is a bug, please supply a runnable, stripped-down demonstration.
There is an example here for Vue3:
https://github.com/fullcalendar/fullcalendar-example-projects/tree/master/vue3-typescript
from fullcalendar-vue.
Hi
thanks for the quick reaction.
There is an example here for Vue3:
That is an example that I can't use as I use vanilla JS; nethertheless I used it to build my example code.
If this is a bug
I wouldn't dare to barge in a project and throw "bug" at first: I find it disrespectful.
So I prefer to be cautious; for such library behavior (CDNs that trigger an exception) I previously hit the spot by submitting a report: quasarframework/quasar#8113.
As I suspect that encountered behavior is not normal (and it seems that regular JS are not as tested as webpack/etc versions), you can find at the end of my message a more concise example.
Here is a more stripped one:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML5 : Hello World Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.12/vue.global.min.js" integrity="sha512-CLrLddI89KM+4mefYP8PbruyeARQAoQVwajhryM9hwM5bAeEFdtBwk0Wy6A9HlVeXyszFtXqOzg1Qy/A+Fwglg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/main.min.css" integrity="sha256-5veQuRbWaECuYxwap/IOE/DAwNxgm4ikX7nrgsqYp88=" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/main.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/locales-all.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/[email protected]/dist/main.global.js" crossorigin="anonymous"></script>
</head>
<body>
<div id="q-app">
<template>
<full-calendar
class='demo-app-calendar'
:options='calendarOptions'
>
<template v-slot:eventContent='arg'>
<b>{{ arg.timeText }}</b>
<i>{{ arg.event.title }}</i>
</template>
</full-calendar>
</template>
</div>
<script>
let todayStr = new Date().toISOString().replace(/T.*$/, '') // YYYY-MM-DD of today
var bar = null
const QApp = {
el: '#q-app',
data: function() {
return {
calendarOptions: {
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
initialView: 'dayGridMonth',
initialEvents: [
{id: '54545454',title: 'All-day event',start: todayStr},
{id: '98989898',title: 'Timed event',start: todayStr + 'T12:00:00'}
],
}
}
},
methods: {}
}
window.addEventListener('load', (event) => {
const app = Vue.createApp(QApp)
app.component('FullCalendar', FullCalendar)
app.mount('#q-app')
});
</script>
</body>
</html>
from fullcalendar-vue.
Related Issues (20)
- i found a bug in Timeline ,when set eventMaxStack.i have a demo address,help me please. HOT 1
- resourceTimelineDay v-slot resourceLabelContent only work with column one HOT 2
- Add support for Vue Router and Vuex HOT 5
- Integration for nuxt HOT 1
- JSX issue when using in Vue 3 with Typescript HOT 8
- TypeError: Cannot set properties of undefined (setting 'VueFullcalendar') HOT 1
- Vue3: Custom event component issue: No root instance for app HOT 1
- More than 1 full calendar on the same page. HOT 1
- Event change class between determinate hours HOT 1
- Render `eventContent` in the context of the main Vue application HOT 1
- Using slots breaks optimized rendering HOT 1
- __vite_ssr_import_1__ is not defined when trying to implement FullCalendar in nuxt3 project HOT 1
- Global.vue is not a function HOT 1
- Importing fullcalendar component breaks type checking with vue-tsc HOT 4
- Horizontal scroll position on timelineMonth resets when navigating to the next day HOT 1
- dayMinWidth: No ScrollGrid implementation HOT 1
- Createapp() called for every event in fullcalendar vue3 HOT 5
- fullcalender not showing time correctly on daygrid view HOT 2
- This issue tracker has moved
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from fullcalendar-vue.