← All layouts  ·  Productivity

calendar_month Calendar

Month grid with events, plus an agenda rail.

A month grid answers 'when am I free'; an agenda answers 'what is next'. Most calendars need both, so both are here.

• .ms-stat
• .ms-sidenav
• .ms-badge
• .ms-btn
• .ms-shell
• .ms-chip

Open full page

Live

The layout as it renders, in a frame at its own width. Resize the window to watch it respond — the frame is a real viewport.

How to build it

This is the layout's template, read from disk — the same file the frame above renders, so it cannot drift out of date. Copy it into your own page and replace the content; every class in it ships in mcgowan.css.

<div class="ms-shell">
    <aside class="ms-shell__sidebar">
        <div class="ms-shell__brand">Northbound</div>
        <ul class="ms-sidenav">
            <li class="ms-sidenav__section">Workspace</li>
            <li class="ms-sidenav__item"><a class="ms-sidenav__link" href="#"><span class="material-icons">dashboard</span>Boards</a></li>
            <li class="ms-sidenav__item"><a class="ms-sidenav__link" href="#"><span class="material-icons">check_circle</span>Tasks</a></li>
            <li class="ms-sidenav__item"><a class="ms-sidenav__link ms-sidenav__link--active" href="#"><span class="material-icons">calendar_today</span>Calendar</a></li>
            <li class="ms-sidenav__item"><a class="ms-sidenav__link" href="#"><span class="material-icons">folder</span>Files</a></li>
            <li class="ms-sidenav__item"><a class="ms-sidenav__link" href="#"><span class="material-icons">mail</span>Inbox</a></li>
            <li class="ms-sidenav__item"><a class="ms-sidenav__link" href="#"><span class="material-icons">group</span>People</a></li>
        </ul>
    </aside>
    <div class="ms-shell__main">
        <div class="ms-shell__bar">
            <strong>August 2026</strong>
            <span class="ms-toolbar__spacer"></span>
            <span class="ms-avatar-sm">ER</span>
        </div>
        <div class="ms-shell__body">
            <div class="ms-toolbar">
                <button class="ms-btn ms-btn--sm ms-btn--outline">Today</button>
                <button class="ms-btn ms-btn--sm ms-btn--ghost">
                    <span class="material-icons">chevron_left</span></button>
                <button class="ms-btn ms-btn--sm ms-btn--ghost">
                    <span class="material-icons">chevron_right</span></button>
                <strong>August 2026</strong>
                <span class="ms-toolbar__spacer"></span>
                <div class="ms-chip-set">
                    <button class="ms-chip" type="button">Day</button>
                    <button class="ms-chip" type="button">Week</button>
                    <button class="ms-chip ms-chip--active" type="button">Month</button>
                </div>
            </div>

            <div class="ms-card ms-card--flush">
                <table class="ms-table" style="table-layout:fixed">
                    <thead><tr><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th>
                        <th>Fri</th><th>Sat</th><th>Sun</th></tr></thead>
                    <tbody>
                        <tr style="height:110px; vertical-align:top">
                            <td><span class="ms-stat__meta">10</span></td>
                            <td><span class="ms-stat__meta">11</span>
                                <div class="ms-badge ms-badge--info">09:00 Standup</div></td>
                            <td><span class="ms-stat__meta">12</span></td>
                            <td><span class="ms-stat__meta">13</span>
                                <div class="ms-badge ms-badge--warning">VAT return due</div></td>
                            <td><span class="ms-stat__meta">14</span></td>
                            <td><span class="ms-stat__meta">15</span></td>
                            <td><span class="ms-stat__meta">16</span></td>
                        </tr>
                        <tr style="height:110px; vertical-align:top">
                            <td><span class="ms-stat__meta">17</span></td>
                            <td><span class="ms-stat__meta">18</span>
                                <div class="ms-badge ms-badge--info">14:00 Fellside call</div></td>
                            <td><span class="ms-stat__meta">19</span></td>
                            <td><span class="ms-stat__meta">20</span>
                                <div class="ms-badge">Release 2.8.0</div></td>
                            <td><span class="ms-stat__meta">21</span></td>
                            <td><span class="ms-stat__meta">22</span></td>
                            <td><span class="ms-stat__meta">23</span></td>
                        </tr>
                        <tr style="height:110px; vertical-align:top; background:#f5f9ff">
                            <td><strong>24</strong>
                                <div class="ms-badge ms-badge--info">09:00 Standup</div>
                                <div class="ms-badge ms-badge--success">11:00 1:1 Priya</div></td>
                            <td><span class="ms-stat__meta">25</span></td>
                            <td><span class="ms-stat__meta">26</span></td>
                            <td><span class="ms-stat__meta">27</span></td>
                            <td><span class="ms-stat__meta">28</span>
                                <div class="ms-badge ms-badge--danger">Pay run</div></td>
                            <td><span class="ms-stat__meta">29</span></td>
                            <td><span class="ms-stat__meta">30</span></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

More productivity layouts