<style>
/*
*
* ==========================================
* CUSTOM UTIL CLASSES
* ==========================================
*
*/
.clearfix::after,
.calendar ol::after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

/* ================
Calendar Styling */
.calendar {
  border-radius: 10px;
}

.month {
  font-size: 2rem;
}

@media (min-width: 992px) {
  .month {
    /*font-size: 3.5rem;*/
  }
}

.calendar ol li {
  float: left;
  width: 14.28571%;
}

.calendar .day-names {
  border-bottom: 1px solid #eee;
}

.calendar .day-names li {
  text-transform: uppercase;
  /*margin-bottom: 0.5rem;*/
}

.calendar .days li {
  border-bottom: 1px solid #eee;
  /*min-height: 8rem;*/
}

.calendar .days li .date {
  margin: 0.5rem 0;
}

.calendar .days li .event {
  font-size: 0.75rem;
  padding: 0.4rem;
  color: white;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: 4rem;
  margin-bottom: 1px;
}

.calendar .days li .event.span-2 {
  width: 200%;
}

.calendar .days li .event.begin {
  border-radius: 1rem 0 0 1rem;
}

.calendar .days li .event.end {
  border-radius: 0 1rem 1rem 0;
}

.calendar .days li .event.clear {
  background: none;
}

.calendar .days li:nth-child(n+29) {
  border-bottom: none;
}

.calendar .days li.outside .date {
  color: #ddd;
}

/*
*
* ==========================================
* FOR DEMO PURPOSES
* ==========================================
*
*/
body {
  min-height: 100vh;
  background-color: #3ca55c;
  background-image: linear-gradient(147deg, #3ca55c 0%, #b5ac49 100%);
}
    
</style>
<?php 
$months=cal_info(0);
foreach($months as $month){
$y=12; 
for ($x = 1; $x <= $y; $x++) {
}    
}
?>




<div class="container py-5">

  <!-- For Demo Purpose -->
  <!--<header class="text-center text-white mb-5">-->

  <!--</header>-->
  
<div class="row">
<?php  
$year=date('Y');
$y=12; 
for ($x = 1; $x <= $y; $x++) {


?>
<div class="col-sm-6">
  <!-- Calendar -->
<div class="calendar shadow bg-white p-5">
<!--<?php echo $month=date('JUL');echo "-"; echo date('Y'); ?>-->
<div class="d-flex align-items-center"><i class="fa fa-calendar fa-3x mr-3"></i>
<h2 class="month font-weight-bold mb-0 text-uppercase">
<?php
$jd=gregoriantojd($x,13,1998);
echo jdmonthname($jd,0);

// echo date('d-$x-y');
?>
    </h2>
</div>
<p class="font-italic text-muted mb-5">No events for this day.</p>
<ol class="day-names list-unstyled">
<li class="font-weight-bold text-uppercase bg-danger text-white">Sun</li>
<li class="font-weight-bold text-uppercase">Mon</li>
<li class="font-weight-bold text-uppercase">Tue</li>
<li class="font-weight-bold text-uppercase">Wed</li>
<li class="font-weight-bold text-uppercase">Thu</li>
<li class="font-weight-bold text-uppercase">Fri</li>
<li class="font-weight-bold text-uppercase">Sat</li>
</ol>

<ol class="days list-unstyled">
<?php


$d=cal_days_in_month(CAL_GREGORIAN,$x,$year);

// $maxDays=date('t');
$maxDays=$d;
$currentDayOfMonth=date('j');
for($i=1; $i<=$maxDays; $i++){
echo "<li>";
echo '<div class="date">'.$i.'</div>';
echo "</li>";    
} 

?>        
</ol>
</div>






</div>
<?php

} 
?>

</div>
</div>  










<!--<li>-->
<!--<div class="date">1</div>-->
<!--<div class="event bg-success">Event with Long Name</div>-->
<!--</li>-->
<!--      <li>-->
<!--        <div class="date">2</div>-->
<!--      </li>-->
<!--      <li>-->
<!--        <div class="date">3</div>-->
<!--      </li>-->
<!--      <li>-->
<!--        <div class="date">4</div>-->
<!--      </li>-->
<!--      <li>-->
<!--        <div class="date">5</div>-->
<!--      </li>-->
<!--      <li>-->
<!--        <div class="date">6</div>-->
<!--      </li>-->
<!--      <li>-->
<!--        <div class="date">7</div>-->
<!--      </li>-->
<!--      <li>-->
<!--        <div class="date">8</div>-->
<!--      </li>-->
<!--      <li>-->
<!--        <div class="date">9</div>-->
<!--      </li>-->
<!--      <li>-->
<!--        <div class="date">10</div>-->
<!--      </li>-->
<!--      <li>-->
<!--        <div class="date">11</div>-->
<!--      </li>-->
<!--      <li>-->
<!--        <div class="date">12</div>-->
<!--      </li>-->
<!--      <li>-->
<!--        <div class="date">13</div>-->
<!--        <div class="event all-day begin span-2 bg-warning">Event Name</div>-->
<!--      </li>-->
<!--      <li>-->
<!--        <div class="date">14</div>-->
<!--      </li>-->
<!--      <li>-->
<!--        <div class="date">15</div>-->
<!--        <div class="event all-day end bg-success">Event Name</div>-->
<!--      </li>-->
<!--      <li>-->
<!--        <div class="date">16</div>-->
<!--      </li>-->
<!--      <li>-->
<!--        <div class="date">17</div>-->
<!--      </li>-->
<!--      <li>-->
<!--        <div class="date">18</div>-->
<!--      </li>-->
<!--      <li>-->
<!--        <div class="date">19</div>-->
<!--      </li>-->
<!--      <li>-->
<!--        <div class="date">20</div>-->
<!--      </li>-->
<!--      <li>-->
<!--        <div class="date">21</div>-->
<!--        <div class="event bg-primary">Event Name</div>-->
<!--        <div class="event bg-success">Event Name</div>-->
<!--      </li>-->
<!--      <li>-->
<!--        <div class="date">22</div>-->
<!--        <div class="event bg-info">Event with Longer Name</div>-->
<!--      </li>-->
<!--      <li>-->
<!--        <div class="date">23</div>-->
<!--      </li>-->
<!--      <li>-->
<!--        <div class="date">24</div>-->
<!--      </li>-->
<!--      <li>-->
<!--        <div class="date">25</div>-->
<!--      </li>-->
<!--      <li>-->
<!--        <div class="date">26</div>-->
<!--      </li>-->
<!--      <li>-->
<!--        <div class="date">27</div>-->
<!--      </li>-->
<!--      <li>-->
<!--        <div class="date">28</div>-->
<!--      </li>-->
<!--      <li>-->
<!--        <div class="date">29</div>-->
<!--      </li>-->
<!--      <li>-->
<!--        <div class="date">30</div>-->
<!--      </li>-->
<!--      <li>-->
<!--        <div class="date">31</div>-->
<!--      </li>-->
<!--      <li class="outside">-->
<!--        <div class="date">1</div>-->
<!--      </li>-->
<!--      <li class="outside">-->
<!--        <div class="date">2</div>-->
<!--      </li>-->
<!--      <li class="outside">-->
<!--        <div class="date">3</div>-->
<!--      </li>-->
<!--      <li class="outside">-->
<!--        <div class="date">4</div>-->
<!--      </li>-->
