Full calendar

You might want to style a full calendar in your app, for example, similar to event or planning apps. We've made it simple with the following markup.

<div class="container">
   <div class="row">
      <div class="col p-t ">
         <div class="day day-disabled"></div>
         <div class="day">1</div>
         <div class="day">2</div>
         <div class="day">3</div>
         <div class="day">4</div>
         <div class="day">
            <div class="row">
               <div class="col no-margin">
                  5
               </div>
            </div>
            <div class="row">
               <div class="col no-margin">
                  <div class="badge badge-success p">Some task </div>
               </div>
            </div>
            <div class="row">
               <div class="col no-margin">
                  <div class="badge badge-dark p m-t">task </div>
               </div>
            </div>
         </div>
         <div class="day">6</div>
         <div class="day">7</div>
         <div class="day">8</div>
         <div class="day">9</div>
         <div class="day">10</div>
         <div class="day">11</div>
         <div class="day">12</div>
         <div class="day">13</div>
         <div class="day">14</div>
         <div class="day">15</div>
         <div class="day">16</div>
      </div>
   </div>
</div>
1
2
3
4
5
Some task
task
6
7
8
9
10
11
12
13
14
15
16