
<style>
.calendar		{ border-left:1px solid #999; width:100%;}
tr.calendar-row	{width:100%;  }
td.calendar-day	{ min-height:80px; font-size:11px; position:relative; } * html div.calendar-day { height:80px; }
td.calendar-day:hover	{ background:#eceff5; }
td.calendar-day-np	{ background:#eee; min-height:80px; } * html div.calendar-day-np { height:80px; }
td.calendar-day-head { background:#ccc; font-weight:bold; text-align:center; width:120px; padding:5px; border-bottom:1px solid #999; border-top:1px solid #999; border-right:1px solid #999; }
div.day-number		{ background:#999; padding:5px; color:#fff; font-weight:bold; float:right; margin:-5px -5px 0 0; width:20px; text-align:center; }
/* shared */
td.calendar-day, td.calendar-day-np { width:120px; padding:5px; border-bottom:1px solid #999; border-right:1px solid #999; }    

.right-btn{float:right;}
.month{width:100px;float:left;}
.year{width:100px;float:left;}
.month-year-div{width:100%;}

.left-right-btn-div{width:100%;}
</style>
<div class="container mt-3 mb-3">
<div class="row">

<!--<div class="calendar-tool col-sm-12">-->
<!--<div class="month-year-div">-->
<!--<input type="number" id="month" val="">    -->
<!--<select class="form-control month">-->
<?php
//$month =1;
$y=date('Y');
// for($month=1; $month <=12; $month++){
// $jd=gregoriantojd($month,1,$y);  
// echo '<option value="'.$month.'">'.jdmonthname($jd,0).'</option>';
// }
// ?>
 <!--</select>  -->
 <!--<select class="form-control year" id="year">-->
 <?php



$year=2021;
// $y1=$year + 20;
// for($year; $year<= $y1; $year ++){
// if($year==date('Y')){
// echo '<option value="'.$year.'" selected>'.$year.'</option>';        
// }else{    
// echo '<option value="'.$year.'">'.$year.'</option>';    
// }
// }
?>
<!--</select>-->

<!--</div>-->
<!--</div>-->
<div class="col-sm-12">
<div class="left-right-btn-div"><p class="btn btn-info left-btn"><i class="fas fa-angle-left"></i><input type="hidden" id="year" value="<?php echo $year;?>"> </p><p class="btn btn-info right-btn" value="<?php  ?>"><i class="fas fa-angle-right"></i></p></div>    
</div>

<div class="col-sm-12">
<div id="load-calendar">
    
</div>

    
</div>    
</div>    
</div>




<script>
$(document).ready(function(){
// var month = $("#month").val();
var year = $("#year").val();
var d = new Date();
// var year = d.getFullYear();
// var month=1;
var month=d.getMonth() + 1;
// alert(month);
// for(month=1; month <=12; month++){

function load_calendar(month, year){

$.ajax({
url: '<?php echo base_url(); ?>SchoolCalender/draw_calendar/',
type: 'POST', 
data: {month:month,year:year},
success: function(data){
$("#load-calendar").html(data);
// alert(data);
}
});

}
load_calendar(month, year);



var month_new=month;
$(document).on("click",".left-btn",function(){
month=month - 1;
if(month==0){
month=12;
year=year - 1;
}
load_calendar(month, year);
});

$(document).on("click",".right-btn",function(){

month=month + 1;
if(month >12){
month=1;
var sss=1;
// year=console.log(sum([year,sss]));
year = parseInt(year)
year=year + 1;
load_calendar(month, year);
}
else{
load_calendar(month, year);    
}

});


});
</script>