3689: Adjust display of date for recurring events

[bahaaTuffaha]

Short Description

Display a collapsible "Weitere Termine" section for recurring events directly in the event list.

The section should show the next 5 upcoming occurrences. If more future occurrences exist, display (...) after the last visible date. Design here

Proposed Changes

• Added a shortFormat parameter to formatMonthlyOrYearlyRecurrence, defaulting to false; when true, it uses dateFormatShort instead of dateFormatWithWeekday.

Web:

• Added a new component EventFurtherDates that renders the upcoming recurrence dates.
• Used the existing Accordion component for EventFurtherDates.tsx.
• Showed up to MAX_FURTHER_DATES (6) recurrences via date.recurrences(), then dropped the first one with .slice(1) since it's already shown in the eventList Item.
• Used preventDefault/stopPropagation on the wrapper's click handler so toggling the accordion doesn't trigger the parent list item's navigation link.
• Added a new icons EventNoteIcon, LocationOnOutlinedIcon for the date and location at EventListItem.tsx.

Native:

• Built the toggle with a TouchableRipple instead of using the accordion because it needs alot of changes to match the design.
• Used the same hasMoreRecurrencesThan logic like web.
• Imported and rendered EventFurtherDates directly below the event's date line.
• New Icons like web: calendar-text-outline, map-marker-outline for location and date.

---

• Added a furtherDates translation key.
• Create new tests for web and native:EventFurtherDates.spec.tsx

Side Effects

N/A

Checklist

• Followed the contributing guidelines and conventions
• Considered accessibility impacts and made the necessary adjustments
• Added or updated unit tests (if applicable)
• Added or updated documentation (if applicable)
• Added a release note for native (if applicable)

Testing

• Launch integreat.
• Go to Events list and check the ones that has the recurrence date icon.
• Check web and native.
• Check contrast and RTL languages alignment.

Resolved Issues

Fixes: #3689

---

[lunars97]

Almost perfect! Tested with real android device and Chrome. I found one issue, please see my comment 👍

[bahaaTuffaha]

@ulyanahoy-cloud
For German it looks great but in english it looks like this:

Is this ok?

[ulyanahoy-cloud]

What if we only show the date on mobile if the time stays the same, and limit the list to the next 3 occurrences? This would keep the card much more compact.
I would also slightly increase the spacing between the event title and the date.

[bahaaTuffaha]

What if we only show the date on mobile if the time stays the same, and limit the list to the next 3 occurrences? This would keep the card much more compact. I would also slightly increase the spacing between the event title and the date.

How about this for mobile and one line for desktop:

[ulyanahoy-cloud]

If the recurring event always has the same time, I'd still prefer showing only the dates on mobile. It keeps the card much more compact and avoids repeating the same information.

If the time differs between occurrences, then this two-line layout works well.

[bahaaTuffaha]

If the recurring event always has the same time, I'd still prefer showing only the dates on mobile. It keeps the card much more compact and avoids repeating the same information.

If the time differs between occurrences, then this two-line layout works well.

Ok and for the occurrences keep them 5 or 3 just for mobile?

[ulyanahoy-cloud]

for mobile 3

[lunars97]

Not tested again. LGTM 👍