Back to Calendar Section
Calendar

Month View Grid

#calendar

Live preview

Source code

html
<div class="container py-5">
  <div class="d-flex justify-content-between align-items-center mb-3"><button class="btn btn-outline-dark btn-sm"><i class="bi bi-chevron-left"></i></button>
    <h4 class="fw-bold mb-0">February 2026</h4><button class="btn btn-outline-dark btn-sm"><i class="bi bi-chevron-right"></i></button>
  </div>
  <div class="calgrid">
    <div class="calh">Sun</div>
    <div class="calh">Mon</div>
    <div class="calh">Tue</div>
    <div class="calh">Wed</div>
    <div class="calh">Thu</div>
    <div class="calh">Fri</div>
    <div class="calh">Sat</div>
    <div class="cald text-muted">28</div>
    <div class="cald text-muted">29</div>
    <div class="cald text-muted">30</div>
    <div class="cald text-muted">31</div>
    <div class="cald">1</div>
    <div class="cald">2</div>
    <div class="cald">3</div>
    <div class="cald">4</div>
    <div class="cald">5</div>
    <div class="cald">6</div>
    <div class="cald">7</div>
    <div class="cald">8</div>
    <div class="cald">9</div>
    <div class="cald">10</div>
    <div class="cald">11</div>
    <div class="cald">12</div>
    <div class="cald active">13</div>
    <div class="cald">14</div>
    <div class="cald">15</div>
    <div class="cald has-ev">16</div>
    <div class="cald">17</div>
    <div class="cald">18</div>
    <div class="cald has-ev">19</div>
    <div class="cald">20</div>
    <div class="cald">21</div>
    <div class="cald">22</div>
    <div class="cald">23</div>
    <div class="cald has-ev">24</div>
    <div class="cald">25</div>
    <div class="cald">26</div>
    <div class="cald">27</div>
    <div class="cald">28</div>
    <div class="cald text-muted">1</div>
    <div class="cald text-muted">2</div>
    <div class="cald text-muted">3</div>
  </div>
</div>

More designs in this section