Custom HTML for event style with slot about vue-simple-calendar

[richardtallent]

Interesting use case! As you noticed, events are intended to be positioned above the HTML that renders each week, and to do that, the event needs the event class, along with a spanX, offsetX, and eventRowX class to determine the event's width (in days), left start (in days), and vertical position on the week (0-20). There are also some optional classes passed to indicate, for example, an event that is wrapping from the previous week or wrapping to the next week.

These classes are passed to the slot on the event object, so you should be able to use them like this (I believe the <template> wrapper is no longer required in Vue 2.5+, and do remember to assign a key so Vue can update properly):

<div slot="event" slot-scope="props" 
  :classes="props.event.classes" 
  :key="e.id">
    {{ props.event.title }}
</div>

Keep in mind that the eventRowX class is designed for events that are always 1.4em high, so this component won't work if you have events with different heights and more than one event falling on a given day. But as long as you have single-day events on single-event days, having taller events shouldn't be a problem. This also means you won't need the z-index (which is not currently passed to the slot), as long as you constrain your events to not exceed the height of the day.

Hope this helps! I'd love to see a live example of it working, if you're working on something that will be publicly accessible.

I think this addresses the key issue, please feel free to reopen (ideally with a CodePen) if you still have problems with the positioning.

[LTroya]

I was trying to do the same thing. I start using a custom template inside the event's title property but on event's hover, the template is shown.

So I am trying to use the event's slot but I have the same issue that was reported at first. Maybe I am missing something.

<div slot="event" slot-scope="props"
        :classes="props.event.classes"
        :key="props.event.id">
        {{ props.event.title }}
</div>

I will appreciate any hint. Thanks in advance.

[richardtallent]

Ah! I believe what you're seeing is a Vue issue, not something specific to this component. In Vue, the {{handlebar}} syntax is only for plain text -- any HTML markup returned by the expression will be escaped. To dynamically render HTML from an expression, you'd need to use the v-html attribute. Something like this:

<div slot="event" slot-scope="props"
        :class="props.event.classes"
        :key="props.event.id"
        v-html="props.event.title"/>

(Use </div> instead of /> if you're not using an SFC.)

Also, note that the div should have a class attribute, not classes. The event attribute storing the list of classes is called classes. When you set up your event, be sure to set classes to either a string with a single class, or an array if you are assigning multiple classes.

Nice looking calendar, BTW!

[LTroya]

Oh, thank you. That is what I was missing. I added the event class to position the element in the right place.

This was the changed:

:class="['event', ...props.event.classes]"