I created a “schedule calendar” on my webpage, which should display existing appointments according to the data provided in the Model from the back-end side:

<table class="calendar">
    <thead>
        <tr class="calendar-row">
            <th>Mon</th>
            <th>Tue</th>
            <th>Wed</th>
            <th>Thu</th>
            <th>Fri</th>
            <th>Sat</th>
            <th>Sun</th>
        </tr>
    </thead>
    <tbody>
        <!-- Generate calendar grid -->
        <tr th:each="week : ${calendar}" class="calendar-row">
            <th:block th:each="day : ${week}">
                <td th:if="${day}"  class="day-cell">
                    <span class="day-number" th:text="${day.getDayOfMonth()}"></span>
                    <div class="appointment" th:each="appointment : ${appointments}"
                         th:if="${appointment.date.toLocalDate().isEqual(day.toLocalDate())}"
                         th:text="|${appointment.date.toLocalTime().toString()} - ${appointment.title}|">
                    </div>
                </td>
                <td th:unless="${day}" class="empty-day-cell"></td>
            </th:block>
        </tr>
    </tbody>
</table>

stylesheet:

.calendar {
    border-collapse: separate;
}

.calendar th, .calendar td {
    text-align: center;
    width: 100%;
}

.calendar-row {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: stretch;
}

.empty-day-cell {
    position: relative;
    min-width: 80px;
    min-height: 80px;
}

.day-cell {
    border: 1px solid #000000;
    border-radius: 5px;
    position: relative;
    min-width: 80px;
    min-height: 80px;
    padding-top: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.day-number {
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 12px;
}

.appointment {
    width: fit-content;
    margin: 0 10%;
    margin-bottom: 0.5rem;
    white-space: nowrap;
    border: 1px solid #000000;
    border-radius: 10px;
    color: black;
    background: teal;
    padding: 0 10%;
}

and the result looks like this (pasting an image, not a jsfiddle link, because of all the Thymeleaf tags that won’t work good without backend data):

Unfortunately the cells does not seem to help me with resizing themselves to fit to the “appointments” size…
Most probably I messed up with flexboxes, although I believed that I understand the concept when creating this layout. Here few questions arise:

1. How to make the cells resize themselves so the tasks are contained in a single cell, not overlay like on the image?
2. How can I make several appointments like shown on 22th have the same box size as the longest one?
3. (cosmetic and not very important one) 1st and 2nd boxes are slightly wider than the ones in the following rows, I can’t find the reason behind this, can someone explain this to me? I guess it has to do with having no border in “empty-day-cell”, but giving it 1px transparent border doesn’t change anything actually.