Rich events

[scottybo]

Is it possible, using slots, to create events which contain images, buttons and other components?

I'm looking to create something similar to falcon.io

[richardtallent]

Not exactly. In this control, events float above the calendar (absolute positioning and higher z-index). This is an important point, because it means there is no event content flow within a particular day's "cell." This is why events must all have the same height--otherwise, it would be far more difficult to position them. But it's also what allows multi-day events, which was a core use case for me.

In the example you linked, the pill-rounded events shown above the colorful content would be a very good match for what this component does. But the cards and icons also shown on the week/month views, not so much. That said, the content of each day's cell is accessible using the dayContent slot, so you could create the cards / icons within this area, with four important caveats:

1. Your parent control would be responsible for rendering them on the correct day, they wouldn't be part of the events prop.

2. A change is coming in 3.0 (soon, you can pull the current branch to see) that will result in the day of the month being outside/below the dayContent slot. This will actually help, since you won't have to worry about rendering the day number on your own.

3. You would need to vertically position your cards/icons below the events sent in through the props, otherwise the events will be on top of your content. It may be possible to modify the code to pass the number of events visible on a given day as part of the dayContent slot, but it would take some work to make this happen and make it efficient (this is currently only computed in the local variable eventRows, once for each week, as part of drawing the events, which happens separately from rendering the days). I'm open to pull requests on the version 3 branch if you want to take a stab at this. (What I'm envisioning is a class added to dayContent that would give it the top margin needed to push itself below the events).

4. By design, every day of every week visible in the calendar has the same height. This can be problematic if you're expecting a day to stretch vertically for weeks with more events stacked in a given day. It could be done, but you'd be overriding some CSS to do so, and that sort of override couldn't be guaranteed to be compatible with future versions.

[scottybo]

Thanks @richardtallent for such a detailed reply - will carefully read through your response and think about how we might be able to adapt the calendar :)