klasse echt ...ich habs nicht hinbekommen.aber mit deiner Erklärung hab ich's noch etwas angepasst...
Eine Frage habe ich noch...hat aber Zeit 
Und Zwar habe ich ein Kalender Widget importiert... mir gefällt nicht, dass die Überschrift "Kalender" sich je nach Termine horizontal verändert.
Vielleicht hast dazu ja auch eine Idee...ich bekomme das mit CSS einfach nicht gebacken. Je mehr Termine desto höher rutscht die Überschrift.. Hätte es einfach gerne fixiert.
Vielleicht hast du mal Muse , dir das anzusehen
<style>
.calendar {
top: 0px;
display: flex;
flex-direction: column;
justify-content: space-between;
bottom: 0px;
left: 0px;
right: 0px;
position: absolute;
padding: 100px;
}
.calendar-col-1 {
text-align: right;
flex-shrink: 0;
}
.calendar-col-2 {
text-align: left;
flex-grow: 1;
margin-left: 10px;
overflow: hidden;
}
.calendar-row {
display: flex;
flex-direction: row;
justify-content: space-between;
}
div.event-date {
font-size: 1.5vw;
color: {{config.CalendarGlobalHighlightColor}};
}
div.event-day {
font-size: 1vw;
}
div.event-summary {
font-size: 1.5vw;
color: {{config.CalendarGlobalHighlightColor}};
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
div.event-time {
font-size: 1vw;
font-weight: bold;
}
div.event-location {
font-size: 1vw;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
hr.event-divider {
border: 0;
height: 1px;
margin: 0px;
background-image: -webkit-linear-gradient(left, #212124, #666666, #FFFFFF, #666666, #212124);
}
</style>
<div class="calendar">
<div ng-repeat-start="n in [].constructor(5) track by $index">
<div ng-if="config.CalendarGlobalNumberOfEvents > $index" class="calendar-row"
ng-init="endTime =config['CalendarEvent'+ ($index+1)+'EndDateTime'];
startTime=config['CalendarEvent'+ ($index+1)+'StartDateTime'];
summary=config['CalendarEvent'+ ($index+1)+'Summary'];
location=config['CalendarEvent'+ ($index+1)+'Location'];">
<div class="calendar-col-1">
<div ng-if="(config.CalendarGlobalShowDate)" class="event-date"> {{itemValue(startTime) | date:'dd. MMM'}}</div>
<div ng-if="(config.CalendarGlobalShowDay)" class="event-day"> {{itemValue(startTime) | date:'EEE'}}</div>
</div>
<div class="calendar-col-2">
<div class="event-summary">
<span ng-if="(config.CalendarGlobalShowSummary)"> {{itemValue(summary)}}</span>
</div>
<div class="event-time">
<span ng-if="(config.CalendarGlobalShowTime) && ((itemValue(startTime) | date:'dd.MM.yyyy') == (itemValue(endTime) | date:'dd.MM.yyyy'))"> {{itemValue(startTime) | date:'HH:mm'}}</span>
<span ng-if="(config.CalendarGlobalShowTime) && ((itemValue(startTime) | date:'dd.MM.yyyy') == (itemValue(endTime) | date:'dd.MM.yyyy'))"> - </span>
<span ng-if="(config.CalendarGlobalShowTime) && ((itemValue(startTime) | date:'dd.MM.yyyy') == (itemValue(endTime) | date:'dd.MM.yyyy'))"> {{itemValue(endTime) | date:'HH:mm'}}</span>
<span ng-if="(config.CalendarGlobalShowTime) && ((itemValue(startTime) | date:'dd.MM.yyyy') < (itemValue(endTime) | date:'dd.MM.yyyy'))"> All day </span>
</div>
<div class="event-location">
<span ng-if="(config.CalendarGlobalShowLocation)"> {{itemValue(location)}}</span>
</div>
</div>
</div>
</div>
<div ng-repeat-end ng-if="(config.CalendarGlobalNumberOfEvents > $index +1)">
<hr class="event-divider"/>
</div>
</div>
