Absolute positioning of events breaking event emit

[rogue-ninja-creative]

I have removed the "sort by duration" method so I can apply absolute positioning to events using the cssClass. The reason for this is that I have a set number of users (U1-U6) and I want their events to always show in a specific order and in a specific location within the day card. However, this has broken the eventClick in certain places. For example, when U1 has an event spanning all week, I can't click the last two days of the event to launch the body-card. This glitch seems to be connected to the 3-day event for U3. See the attached image.

If I change U3's event from the 15th to the 19th to match U1, then all the cell are clickable for U1 again. Really strange.

When I look at the components in the Vue plugin for Chrome, I see that the event on the 18th is duplicated for U1, one with the correct classes and one incorrect :

Here's an example of the styles I applied:

.U1 { position: absolute; top: 0; right: 0; left: 0; background-color: #ccff66; } .U2 { position: absolute; top: 20px; right: 0; left: 0; background-color: #ccccfc; } .U3 { position: absolute; top: 40px; right: 0; left: 0; background-color: #ffabc7; }

Is there a way to resolve this? Perhaps a better way to position the event-items without using position: absolute? Any help would be appreciated!

[rogue-ninja-creative]

I seem to have solved this by removing the place holder logic.

[fu-hb]

hello, how to launch the body-card ??

[rogue-ninja-creative]

You have to create a component for it first. I don't believe one is included. look at the eventCard.vue file for an example of what it might look like.

[fu-hb]

Thanks so much!

[zxh2013]

添加moreClick，需要设置属性moreClick="true"

[chengjinrui]

@mclassdesigns how to use cssClass? Just like your example (U1-U6)? I can't resolve this

[rogue-ninja-creative]

The cssClass should be automatically added to events if it exists in the data.

For example:

<script> let demoEvents = [{ title: 'Conference Call', start: '2017-05-26' end: '2017-05-26', cssClass: 'marketing' }]

[fu-hb]

How to refresh the calendar component ? @mclassdesigns