V-calendar: [Vue 3] Scoped slots example not working

[saudsayed]

Scoped slots example with Day-content slot is not rendering attributes in it, Only day of the month is visible in vc-day-content .

Also in v-calendar plugin, default component is 'Components/Calendar/Calendar.vue'.
Is there a way to choose 'Components/CalendarDay/CalendarDay.vue'.

Thanks

[nicosemp]

I believe I have the same problem.
This is the example that's not working for me: https://github.com/nathanreyes/v-calendar/blob/master/docs/.vuepress/components/homepage/custom-calendar.vue

I am using Vue 3 with v-calendar@next

[saudsayed]

@nicosemp yes it is the same issue, waiting for @nathanreyes reply for the help.
Thanks

[umutbozdag]

None of the scoped slots are working for me. I am using Vue 3 with v-calendar@next too

[nicosemp]

I tried playing with v-calendar@next a bit and so far I discovered that the CalendarPane component passes this.$slots to the CalendarDay component:

dayCells.push(
  h(CalendarDay, {
    ...this.$attrs,
    day,
    slots: this.$slots,
  }),
);

But that happens to be empty, so the function safeSlot() in slot.js returns an empty function:

return isFunction(this.$slots[name]) ? this.$slots[name](args) : def;

I also found that the slots can be found in this.$attrs.slots instead of this.$slots but substituting that then gives errors in App.vue if you try to use the day-content slot:

<template v-slot:day-content>
  <div class="flex flex-col h-full z-10 overflow-hidden">
    <span class="day-label text-sm text-gray-900">{{ day.day }}</span>
    <div class="flex-grow overflow-y-auto overflow-x-auto">
      <p
        v-for="attr in attributes"
        :key="attr.key"
        class="text-xs leading-tight rounded-sm p-1 mt-0 mb-1"
        :class="attr.customData.class"
      >
        {{ attr.customData.title }}
      </p>
    </div>
  </div>
</template>

• {{ day.day }} is undefined
• Every day prints all of the attributes (i.e. they're not filtered by the day they're assigned to)

I am guessing that reading slots from this.$attrs.slots is not the correct way to do it.

@nathanreyes I really like this library and I'd love to contribute. Please let me know what I understood wrong so I can help fix this problem, and hopefully others too.
My main obstacle is not being familiar with the render function as I am used to the classic template. I am willing to learn.

[nathanreyes]

@nicosemp There seems to have been a modification to how slots must be passed when using render functions. Before, you could use the slots property in the second options parameter. Now, it must be passed in the 3rd argument. At least that is how I understand it now.

I'll push the fix out asap.