sample-calendar-markup.html

<div class="kpic-calendar">
    <div class="kpic-header-row">
        <div class="kpic-box">
            <div class="kpic-dow-text">S</div>
        </div>
        <!-- snip -- repeated 6 more times for each day of the week-->        
    </div>
    <div class="kpic-grid">
        <!-- snip beginning of month-->>
        <div class="kpic-box" data-date="2022-06-01">
            <div class="kpic-date-text">1</div>
            <div class="kpic-data-items"> 
                <!-- a day of the month with a KPI item -->
                <div class="kpic-data-item kpic-data-item-default">
                    <div class="kpic-data-item-inner"></div>
                </div>
                <div class="kpic-data-item kpic-danger">
                    <div class="kpic-data-item-inner">5.4</div>
                </div>
            </div>
        </div>
        <!-- snip rest of the month, repeat to fill up 5 to 6 weeks -->
    </div>
</div>