calendar-overflow

by Luis Valle

HTML

<table class="calendar-table">
    <tr>
        <th>Sun</th>
        <th>Mon</th>
        <th>Tue</th>
        <th>Wed</th>
        <th>Thu</th>
        <th>Fri</th>
        <th>Sat</th>
    </tr>
    <tr>
        <td>
            <div class="date-number">1</div>
            <div class="event-container">
                <div class="single-day-event">Meeting this day with a real bad doctor</div>
                <div class="single-day-event">Lunch</div>
            </div>
        </td>
        <td>
            <div class="date-number">2</div>
            <div class="event-container">
                <!-- This div will be positioned to span across days -->
                <div class="multi-day-event" style="left: 0; width: 300%;">3-Day Time Off</div>
                <div class="single-day-event" style="margin-top: 22px;">Doctor Appt</div>
            </div>
        </td>
        <td>
            <div class="date-number">3</div>
            <div class="event-container">
                <!-- Second day of multi-day event is empty for this example -->
                <div class="single-day-event" style="margin-top: 22px;">Team Lunch</div>
            </div>
        </td>
        <td>
            <div class="date-number">4</div>
            <div class="event-container">
                <!-- Third day of multi-day event is empty for this example -->
            </div>
        </td>
        <td>
            <div class="date-number">5</div>
            <div class="event-container">
                <div class="single-day-event">Meeting</div>
            </div>
        </td>
        <td>
            <div class="date-number">6</div>
            <div class="event-container"></div>
        </td>
        <td>
            <div class="date-number">7</div>
            <div class="event-container"></div>
        </td>
    </tr>
</table>

CSS

.calendar-table {
        border-collapse: separate;
        border-spacing: 0;
        width: 100%;
        position: relative;
    }
    
    .calendar-table td {
        border: 1px solid #ccc;
        padding: 8px;
        height: 100px;
        width: 14.28%; /* For 7 days per week */
        vertical-align: top;
        position: relative;
    }
    
    .date-number {
        font-weight: bold;
        margin-bottom: 8px;
    }
    
    .event-container {
        position: relative;
        width: 100px;
        min-height: 80px; /* Provide space for events */
    }
    
    .single-day-event {
        background-color: #4CAF50;
        color: white;
        padding: 2px 5px;
        margin-bottom: 2px;
        border-radius: 3px;
        font-size: 12px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }
    
    .multi-day-event {
        position: absolute;
        background-color: #2196F3;
        color: white;
        padding: 2px 5px;
        border-radius: 3px;
        z-index: 10;
        font-size: 12px;
        box-sizing: border-box;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }