V-calendar: get customData in day slot

[ciro-webcom]

Hello,
Is it possible to access customData within the day-content slot? Or at least get the attribute(s) of the current day? I have to show some additional information in the day-content slot.

Thank you and really nice work :-)

[kl3sk]

Is this what you are looking for ?

https://jsfiddle.net/klesk/mg4akx8n/

[ggirodda]

Hello, thank you for answering me. No, I talk about the customData Object wich we can pass in the attributes prop:
https://docs.vcalendar.io/attributes.html#using-customdata

[kl3sk]

Hello,
Be more explicit I don't understand what is your purpose between customData and day-content slot

In the day content slot you can show more text, as i did in the fiddle. Maybe it is in the popover you want it ?

An other clue could be that: Working With Data

Could you provide a fiddle event if this is not working 100% as expected ? Just to understand your problem.

Edit: Here is an working example of @nathanreyes documentation

[kl3sk]

An other solution may be that

[nathanreyes]

@ggirodda The attributes array is passed in as a parameter to your day-content slot, so you should be able to get to your customData object.

[ggirodda]

Hello,
Yes I have all the attributes array, what I wanted is the attributes of the current day in the slot. What I've done for the moment is create a object with the date as index and put my additional content in it, then in the slot I use the day.date argument of the slot-scope to find it.

[ggirodda]

      <div
        slot="day-content"
        slot-scope="{day, attributes, contentStyle}"
        :day='day'>
        <div
          class='c-day-content'
          :style='contentStyle'>
          <div>
            <div>{{ day.label }}</div>
            <div class="c-day-rate">{{ getRate(day.date) }}</div>
          </div>
        </div>
      </div>

Where the function getRate returns the additional content of the date in argument
But what I wanted to do is

      ...
            <div class="c-day-rate">{{ day.attributes[0].customData.rate }}</div>
      ...

where day.attributes is the attributes array of the current day

[riseoflex88]

The day-content slot code as proposed above doesn't trigger the hover / click actions. As I understand it from here: https://github.com/nathanreyes/v-calendar/issues/297 "passing dayEvents to the scoped slot and then using v-on="dayEvents" works", however, I can't get that to work.

Just wondering if you managed to get that working on your code and if so, can you post an example?

[dima-horror]

The day-content slot code as proposed above doesn't trigger the hover / click actions. As I understand it from here: #297 "passing dayEvents to the scoped slot and then using v-on="dayEvents" works", however, I can't get that to work.

Just wondering if you managed to get that working on your code and if so, can you post an example?

Try pass dayEvents parameter. It's works for me.

<v-calendar>
  <template v-slot:day-content="{ day, dayEvents }">
    <div v-on="dayEvents">
      <span>{{day.label}}
      <span> blah blah blah </span>
    </div>
  </template>
</v-calendar>

[nathanreyes]

Closing outstanding issue. The day-content slot provides an attributes and attributesMap to access the attributes only assigned for that particular day.
https://vcalendar.io/api/v2.0/calendar.html#day-content