Open 71kris opened 6 years ago
BrockReece
commented
6 years ago You should be able to have two on the same page, not tried it though.
I think I could probably remove that calendar id if it is causing you an issue as we aren't really using it for anything.
71kris
commented
6 years ago Thank you BrockReece for quick reply.
If you remove that id, then maybe it would be resolved permanently, not limiting number of instances? I'm not sure, I've very limited experience with Vue JS.
I kind of made it working with your ("version": "2.6.1") plugin as is, no changes in your code but am not sure how far I'll get with my implementation. I've no experience with Vue so can't really tell where it takes me ;).
I added this to my main.js file:
...
import CalendarContainer from './components/CalendarContainer'
Vue.use(CalendarContainer)
...
I then created my custom component (a wrapper around your plugin) and in there, in template tags I created two div tags ("containers"). One with id="calendar" and one with id="calendar-other". I know it's not much better because I now have two hard coded ids so no further flexibility and all config init logic has to be plugged in too...
<template>
<!-- <full-calendar :events="events"></full-calendar> -->
<div>
<div id="calendar" :events="events" ref="calendar"></div>
<div id="other-calendar" :events2="events2" ref="other-calendar"></div>
</div>
</template>
...then in my custom component I created two arrays:
<script>
let events = []
let events2 = []
...
...and in mount() method I initialized both:
$('#calendar').fullCalendar({}) and $('#calendar-other').fullCalendar({}) like this:
...
export default {
mounted () {
`$('#other-calendar').fullCalendar({})`
`$('#calendar').fullCalendar({`
`defaultView: 'agendaWeek',`
` eventRender: function(event, element) {`
`console.log(event)`
`},
`firstDay: 1,`
`lang: 'en',`
`})`}
...
...after that I created two arrays for events in data () method (both bind to relevant id="calendar" and id="other-calendar" ids:
data () {
return {
name: "calendar",
events: [
{
title : 'event1',
start : '2018-07-19T11:00',
end : '2018-07-19T12:00'
},
{
title : 'event2',
start : '2018-07-19T12:30',
end : '2018-07-19T13:30',
},
{
title : 'event3',
start : '2018-07-19T14:30:00',
end : '2018-07-19T16:00',
allDay : false,
},
],
events2: [
{
title : 'event1',
start : '2018-07-17T11:00',
end : '2018-07-17T12:00'
},
]
}
}
...
This so far has worked and events did load correctly in two separate calendars on one page.
I'm now trying to pass configuration parameters to each instance of fullCalendar().
I got basic settings working but it does seem a bit overkill in terms of I'm trying to wrap around your plugin. As I said I've no experience with Vue and can't tell how good/bad this approach would be?
To complete my code example here's my CalendarContainer.vue component.
<template>
<div class="container-fluid">
<div class="row margin-bottom">
<div class="calendar-column col-calendar col col-lg-10 col-md-10 col-sm-12">
<calendar></calendar> // <-- this is my custom component that holds 2 div containers
</div>
</div>
</div>
</template>
<script>
import Calendar from './Calendar' // <-- this is located in my "assets/js/components" folder
export default {
components: {
Calendar
},
data () {
return {
name: "calendar-container",
}
}
}
</script>
I really don't know if this is the right approach. I myself don't like hard code ids but can't figure it out with better, cleaner, more optimized solution. I'd appreciate you help guys. Thx for your time.
tangothu
commented
6 years ago Would like to see this feature become live. When trying this with multiple calendars the events were hiding at the backgrounds also and cannot be taken away from original calendar. (See: https://ibb.co/gmCsoK)
Was trying to change the z-index of .fc-events but no luck.
Hello
I'm new to Vue JS + Full Calendar so please forgive me if it is a silly question.
Thanks to vue-full-calendar I got Vue JS + FullCalendar working and events loading. I got stuck on one thing that I can't figure out. I google'd it but couldn't find a solution.
Is it possible to have two calendars on one page using your plugin? I can see that logic is for parent element with id="calendar" but can't figure it out if it's possible or not to have two calendars on one page with your plugin? Including component twice duplicates "calendar" id in DOM. Is it possible to have ids different?
I'd really appreciate your help on this.
Thank you for your time.
kris