Add a filter by date option to events

[osmers]

Motivation

Our event pages in the app are rather unübersichtlich (DeepL suggests confusing or complex, but I feel like that does not capture the essence). Sometimes users want to check for specific dates, so providing them with a calender that shows events only during those dates, is helpful

Proposed Solution

Implement a filter where users can set the dates they want: https://www.figma.com/design/cA4F2MwHs2LNGviOWUjfE9/Integreat-Tickets-Frontend?node-id=2376-2&t=7XKLyenysm0fmzJm-0

Alternatives

Use preselected filters as in Option A of the document posted above (greyed out below the current design).

User Story

As a user of the app I want to be able to filter events for the dates that I am free so I can quickly see what's happening around me.

Additional Context

A further filter is planned in the future with categories and radius around PLZ - but only after municipal calenders have been integrated. Issue for that: #2707

Design Requirements

already done here: https://www.figma.com/design/cA4F2MwHs2LNGviOWUjfE9/Integreat-Tickets-Frontend?node-id=2376-2&t=7XKLyenysm0fmzJm-0

[LeandraH]

That is a much better issue description than the one it duplicates (#2706), so I'll close the other one. Svenja, can you always write our issues? 🤗

[osmers]

@LeandraH dammit :D I knew there was an issue and for some stupid reason checked the CMS team, didn't find any and wrote the issue there. Before saving I realised that it makes no sense to post this in the CMS project and copied it here :D just didn't think to check again whether you already had an issue for this - lucky coincidence then that you like the description :)

[marko-ignjatovic]

Is there API which supports this functionality from the backend?

[steffenkleinle]

Is there API which supports this functionality from the backend?

No additional API for this should be needed as we are always receiving all of the events that are in the future including their dates/recurrences. Therefore we should have all information we need in events DateModel already.

[marko-ignjatovic]

I am wondering if we are allowed to use third party libraries as https://www.npmjs.com/package/@mui/x-date-pickers ?

[LeandraH]

I am wondering if we are allowed to use third party libraries as https://www.npmjs.com/package/@mui/x-date-pickers ?

Yes, we do in general use some third party libraries though we try to go for open source ones as much as possible, and well maintained ones. For something as complex as a date picker, I think a third party app is a very good idea.

The Material UI package seems to definitely be well maintained and uses an MIT license for the basics, so that could be a good fit. One more thing to consider is that the experience in the web and in native should be pretty similar so we want to make sure that packages for both parts can be styled to a similar level.

[osmers]

The CMS also uses a date picker (I assume from a third party library as well) for choosing the date for events. Maybe you can use the same library, or are those completely different use cases?

[LeandraH]

The CMS also uses a date picker (I assume from a third party library as well) for choosing the date for events. Maybe you can use the same library, or are those completely different use cases?

Hmm, not sure that's all that useful because we don't share code between the app part and the CMS part. But thanks for the suggestion!

[marko-ignjatovic]

Maybe I can be assigned to this one

[LeandraH]

That's awesome, thank you!

[steffenkleinle]

@marko-ignjatovic did you already start working on this/do you have something to push we could start further work from? Thanks :heart: