Research a calendar view/component/library

[Sancus]

Right now our calendar views are all custom. It seems like we might benefit from an existing calendar display component/framework instead.

We should search to see if there is a suitable one. We'll still need our own CSS and likely some modifications, but perhaps some of the thorny UI problems of events overlapping and such have been solved for us.

A quick google found https://fullcalendar.io/ but I'm sure there are others.

[MelissaAutumn]

I've been looking into fullcalendar and have some thoughts but I figured I'd list out some other ones I've seen first.

Other alternatives: https://tomosterlund.github.io/qalendar/ https://antoniandre.github.io/vue-cal/ (hasn't been updated in a while)

[MelissaAutumn]

Okay after poking around with full calendar it seems to be competent but not not perfect for use with vuejs.

It's a preactbased project, so they have their own dom management code that doesn't really hook well with vuejs. We can't just pass a ref filled up with events into the component, we have to manually add and remove eventSources. That stuff is annoying but pretty easy to deal with. There's some premium plugins which we don't really need, the main codebase is MIT licensed so that's nice.

However the main deal breaker here is the lack of a responsive design. We'd pretty much be adding a needless amount of work hooking up reactivity, and making it responsive vs just making our homebrew solution responsive.

[MelissaAutumn]

Qalendar is a lot more promising. Fully responsive by design, and native vuejs3 as far as I can tell. The only issue is we'll have to re-build their style.css for themeing. Their style build system seems to flatten the use of css vars.

Here's a small test + responsive view:

We should be able to create our booking flow by inserting fake events and using their emitted events on event-was-clicked.

By default it does add this fade effect to small events but we can customize how events look pretty easily.

It does look like it's Qalendar is in maintenance mode: https://www.oesterlund.dev/blog/note-on-maintenance-of-qalendar but so far it looks to be feature complete enough. It seems like they've moved onto https://schedule-x.dev/ which is built in preact. So I expect similar annoyances when it comes to integration, but I haven't tested that yet.

[MelissaAutumn]

I briefly checked out schedule x. It's also nice and responsive, and themeing seems much easier. However the reactivity isn't great. In this case I would add a watch or special setter on a computed for our events list. This would allow me to do some outside-of-the-box shenanigans like call another libraries API to add some events for example.

There isn't functionality for adding or removing many events at once, only one at a time. We pretty easily submit a PR for this functionality though.

There is also a custom plugin api, but their event list is in a specific class that isn't available on dist afaik. So we'd have to do a bit of hackery there.

[MelissaAutumn]

Some additional Qalendar points:

Seems like they have an adjustable time scale, so I think this component library is probably our best bet. With some additional work I can have the booking page flow setup within a day.

Mobile Month View is even usable:

[radishmouse]

After a quick look at your notes and each of the projects, I agree that Qalendar is the best of the bunch. I think that relatively easy integration with our vue.js codebase is key.

[malini]

Ditto, I agree that Qalendar sounds ideal for us, thanks for the investigation and clear pros/cons, @MelissaAutumn!

[MelissaAutumn]

Sounds good, I'll move onto integrating it. Thanks everyone for your input! (And thanks @devmount for creating the original calendar components that have kept us going for this long!)

[devmount]

My pleasure! I decided for the custom approach when creating the MVP to have maximum flexibility but I totally see the advantages of a pre-built component. I hope we don't end up spending a lot of time into customizing a component which becomes abandoned/deprecated 😅