Improve design appearance of calendar meetings

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)
• 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
• 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%
• 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.

Start by reviewing the remaining unchecked requirements and the existing event rendering, especially the eventDidMount.js check logic mentioned in the issue. Compare the current calendar views with the attached design context, then adapt the remaining icon, task, typography, alignment, and color behavior and update the relevant tests; done means the listed visual requirements are covered.