Slot Support (feature request) about fullcalendar-vue HOT 17 CLOSED

Is there only one slot ?

from fullcalendar-vue.

It would be neat if one could use slots to render events.

I really would love to be able to do something like this:

<FullCalendar
  :events="events"
>
<template v-slot:event="{event, view}">
   <div class="my-calendar-event">{{ event.title }}</div>
</template>
</FullCalendar>

from fullcalendar-vue.

scoped slots are implemented in the latest v5 beta

changelog: https://fullcalendar.io/docs/v5/upgrading-from-v4#vue-connector
example code: https://github.com/fullcalendar/fullcalendar-example-projects/blob/v5/vue/src/DemoApp.vue#L13

they can be used for any of the new *Content settings, not just for events.

from fullcalendar-vue.

If you're curious to know, this will be included in v5 (currently in-development)
blog post: https://fullcalendar.io/blog/2020/02/changes-in-the-upcoming-v5

from fullcalendar-vue.

This has officially been release in v5: https://fullcalendar.io/blog/2020/06/v5-official

@AbrahamBrookes I moved your report to a new ticket: #105

from fullcalendar-vue.

Events Slots will be so helpful, exactly what I need. Do you have an idea when the v5 will be released?

from fullcalendar-vue.

Nothing new? Is support planned for this feature?
It would be useful to have the possibility to specify slots for header or footer calendar.

Thanks!

from fullcalendar-vue.

Would be very nice having slot inside event, currently manually adding/removing Vue Component in a very dirty solution. in eventRender and eventDestroy

from fullcalendar-vue.

scoped slots are implemented in the latest v5 beta

changelog: https://fullcalendar.io/docs/v5/upgrading-from-v4#vue-connector
example code: https://github.com/fullcalendar/fullcalendar-example-projects/blob/v5/vue/src/DemoApp.vue#L13

they can be used for any of the new *Content settings, not just for events.

the example code link appears to be broken

from fullcalendar-vue.

sorry. moved to master: https://github.com/fullcalendar/fullcalendar-example-projects/blob/master/vue/src/DemoApp.vue

from fullcalendar-vue.

sorry. moved to master: https://github.com/fullcalendar/fullcalendar-example-projects/blob/master/vue/src/DemoApp.vue

Thanks!

I noticed in the changelog that slots are available "with any of the *Content options in the API." Are these listen anywhere? I've tried searching through the API a bit but have only found eventContent. Is there one for toolbar?

from fullcalendar-vue.

It seems that using the new slot feature breaks reference to my root vue app? I have a component that sits inside the eventContent slot, and I can no longer access my root vue instance (in particular, my vuex store) from that component:

		<full-calendar 
			:options="calOptions"
		>
			<template v-slot:eventContent="event" >
				<planner-period
					:event="event"
				></planner-period>
			</template>

		</full-calendar>

Inside the planner-period component when I try to access my store data using this.$store.state I get this.$store is undefined. Is the calendar creating its own entirely new vue app?

from fullcalendar-vue.

@ssyberg , if you browse the docs in the "table of content" view: https://fullcalendar.io/docs#toc

...you'll be able to text-search for "Content" and you'll see

from fullcalendar-vue.

Yea.. not clear.

from fullcalendar-vue.

Guys, when I use scoped slots to customize an event the Calendar slows down. For example, changing the view is taking about 5 sec as well as moreLinkClick function or other actions with the Calendar. (Without slots the delay gets down to about 0.5 sec) Can you please check this out?

from fullcalendar-vue.

I'm missing a slot for the full event to be changeable (not only the content). I'm trying to open a custom made modal, but the only slot to be used is the eventContent slot.

I'd like to see a new slot within the <FullCalendar />

Something like:

    <FullCalendar>
        <template #event="arg">
            <div class="flex w-full" :id="arg.event.id" @click="openModal(arg.event.id)">
                <p class="font-bold">
                    {{ arg.timeText }}
                </p>
                <p class="ml-2">
                    {{ arg.event.title }}
                </p>
            </div>
        </template>
    </FullCalendar>

from fullcalendar-vue.

sorry. moved to master: https://github.com/fullcalendar/fullcalendar-example-projects/blob/master/vue/src/DemoApp.vue

Thanks!

I noticed in the changelog that slots are available "with any of the *Content options in the API." Are these listen anywhere? I've tried searching through the API a bit but have only found eventContent. Is there one for toolbar?

Working link: https://github.com/fullcalendar/fullcalendar-examples/blob/v5/vue2/src/DemoApp.vue

from fullcalendar-vue.