[QUESTION] - Is there a way to customize the cell content color using scoped slots

[pedrohcarvalhom]

Hi, i'm new using the lib and I wanna know if is possible to set event colors dinamically using a scoped slot.

e.g:

const events = [
  {
    start: '2024-05-21 10:30',
    end: '2024-05-21 12:30',
    title: 'Need to go shopping',
    color: "red"
  },
]

in cell-content slot:

    <template #cell-content="{ event }">
      <div class="vuecal__event" :class="event.color">{{ event.title }}</div>
    </template>

or maybe at event scoped slot:

    <template #event="{ event }">
      <div class="vuecal__event" :class="event.color">{{ event.title }}</div>
    </template>

Checking the docs i've saw you guys passed a key class to events, and define then at style tag, but that's not necessarily what I want. The main use case for this is to make it possible the client choose the color he wants for each event.

Thanks in advance

[m32]

try this:

<template #event="{ event }">
   <div class="vuecal__event-title" :style="onGetEventStyle(event)" v-html="event.title" />
</template>
...
onGetEventStyle(event) {
return 'background-color: red;';
}

[pedrohcarvalhom]

it does not work quite well, as u can see. It's because it only paints the title div.

However, I was able to make it by "overriding" the vuecal__event class, something like this:

  <template #event="{ event }">
        <calendar-event :event="event" @on-event-click="onEventClick" />
  </template>

and inside of calendar-event

<div
    v-else
    @contextmenu.prevent="onImageRightClick($event)"
    @click="toggle($event)"
    class="vuecal__event w-full h-full border rounded-md cursor-pointer"
  >
    <div class="flex flex-col gap-2 w-full h-full">
      <div class="vuecal__event-title text-black font-semibold text-sm">{{ event.title }}</div>
      <div class="vuecal__event-content text-black text-xs overflow-hidden">{{ event.content }}</div>
    </div>
 </div>

of course, it has some caveats like deleting a event from the calendar, the button keeps behind this "new div". But it worked quite well, as u can see below

[m32]

after adding another element to the styles (height: 100%), the title will occupy the entire height of the event cell

Other part you can customize:

<div class="vuecal__event-title" />
<div class="vuecal__event-title vuecal__event-title--edit" contenteditable />
<div class="vuecal__event-time" />
<div class="vuecal__event-content" />

https://antoniandre.github.io/vue-cal/#ex--custom-event-rendering