Custom background on some v-calendar events

[thany]

I need a custom background (stripes, in our case) on a specific type of events in v-calendar. The CSS for this I can get done easily. But the problem is how to identify such events?

There doesn't seem to be any way of adding some kind of type/category/kind to an event that I can target by CSS. A class or data attribute, will do just fine, but I've searched high and low on how to add one. Other than fantastically hairy hackery, I have not found a way.

The striped background must be applied to the actual v-event element itself, NOT the contents of the event slot - that is only a child of v-event.

So I've tried to set the event name, which doesn't appear to do anything at all. I've tried the event category - also no change in the DOM that is useful in this scenario. I've even tried to forcibly make such events "timed", but having only all-day events, this obviously didn't change anything in the DOM. All this is hackery, and I basically just need a class or a data attribute.

I do know how to set the foreground & background colours of an event, but this is ONLY the colour. I cannot put a whole css background shorthand in there - this will be put into a background-color internally, and therefor will not help me.

So what do I do?

Bottomline:

• Some events will need a striped background.
• An arbitrary property in our events determines this.
• I need something, anything at all, to make one or more events targettable in CSS.

[KaelWD]

If your event colors are classes instead of css colors you can just add another string to it like primary striped.
If the colors are hex or something yeah you're kinda screwed, the only way I can think of would be to override the method:

export default {
  extends: VCalendar,
  methods: {
    genEvent (event, ...args) {
      const vnode = VCalendar.options.methods.genEvent(event, ...args)
      vnode.data.class.striped = event.input.striped
      return vnode
    }
  }
}

[thany]

Yeah I guess that would work. Misusing color to add classes for something other than literally colours, feels like just as much of a hack to me as this function override does. After all, neither can be guaranteed to keep working in any upcoming version.

Either way, this does solve our use case if it works. Will try it out first thing in the morning. Thanks for now 😎

One thing though, where should I import VCalendar from? In our setup, we don't need no component imports as they're all registered on application init.

[KaelWD]

Depends on where vuetify is coming from. If you using cdn/vuetify.min.js then const VCalendar = Vue.component('VCalendar')
If you're using vuetify-loader you can import it from vuetify/lib/components/VCalendar

[thany]

Got it working. I did have some trouble getting it to work, mostly because VCalendar was unable to find its this.$scopedSlots. Hurray for class-based components I guess 😑

But, all is not lost, here's my final component:

<script>
import { VCalendar } from 'vuetify/lib/components/VCalendar';

export default {
  extends: VCalendar,
  methods: {
    genEvent (event, ...args) {
      const vnode = VCalendar.options.methods.genEvent.call(this, event, ...args);
      vnode.data.class.stripes = event.input.statusOptions.stripes;
      return vnode;
    },
  },
};
</script>

Turns out I just had to call that function, because it was looking at the wrong this. Thanks, javascript.
But thanks @KaelWD for pointing in the right direction 🚀