Improve design appearance of calendar meetings

[JuliaKirschenheuter]

Is your feature request related to a problem? Please describe.

• [ ] Requires https://github.com/nextcloud/calendar/issues/4353
• [ ] Use only material design icons
• [ ] Make sure that icons will adopt to background color (white and black)
• [x] If the text is too long, make it shorter via (...)
• [ ] Set the event text color to eventDetails.textColor and background to eventDetails.backgroundColor
• [ ] Adapt the tests for changes
• [ ] Add the attendee icon from #3994
• [ ] Show the checkbox icon when the event is a task
  • [ ] Adapt to the view (check logic in eventDidMount.js)
  • [ ] Adapt to the task being done
• [ ] Add the location and description content in the event in the list view
• [x] Events do not render correctly #4291

• [ ] If the meeting is a task, please use this icon

Comment from @jancborchardt

• [ ] The time shouldn't be bold as it's not more important than the event name. Actually making it color-text-maxcontrast might be better
• [ ] The icons also seem very present, I'd say less opacity, like we do for menu icons in the left navigation: Icon opacity could go down to 50%
• [x] For long events, the content is vertically centered in the box which looks a bit strange. Would look better top-aligned

Describe the solution you'd like

No response

Describe alternatives you've considered

No response

Additional context

This is a follow-up ticket for https://github.com/nextcloud/calendar/pull/4085.

[jancborchardt]

Slight correction: Since we said to only use Material icons, the proper icon for an event with a Task would be this: https://fonts.google.com/icons?selected=Material%20Icons%3Adone%3A

[JuliaKirschenheuter]

Right now it is not possible to continue with this ticket, because the way of using EventRender.vue is unfortunately wrong, see https://github.com/nextcloud/calendar/issues/4336 and https://github.com/nextcloud/calendar/issues/4334 as example.

The easy/quick fix was to revert this changes: https://github.com/nextcloud/calendar/pull/4351.

• First the right way of using EventRender.vue should be found
• Tests should be adapted to the new structure again
• Then the design / css could be adapted to the new structure