<style>
.atd{text-transform:uppercase; border-radius:50%;font-size:16px;background:green;width:25px;color:#fff;text-align:center;}
.atd1{text-transform:uppercase; border-radius:50%;font-size:16px;background:red;width:25px;color:#fff;text-align:center;}
.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 mb-3 pt-3 pb-3 bg-white student-portal">
    <div class="row">
    <?php
    $y=date('Y'); $year=2021;
    ?>
    
        <div class="col-sm-12">
            
            <ul class="breadcrumb">
                <li class="breadcrumb-item"><a href="<?php echo base_url();?>Home"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-house-fill" viewBox="0 0 16 16"><path fill-rule="evenodd" d="m8 3.293 6 6V13.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5V9.293l6-6zm5-.793V6l-2-2V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z"/><path fill-rule="evenodd" d="M7.293 1.5a1 1 0 0 1 1.414 0l6.647 6.646a.5.5 0 0 1-.708.708L8 2.207 1.354 8.854a.5.5 0 1 1-.708-.708L7.293 1.5z"/></svg></a>
                </li>
                <li class="breadcrumb-item">Attendance</li>
                <li class="breadcrumb-item">Attendance History</li>
                <!--<li class="breadcrumb-item"> </li>-->
            </ul>
    <!--  <div class="attendance-history">-->
    
    <!--</div>    -->
        <div class="left-right-btn-div">
            <p class="btn btn-info left-btn">
                <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-arrow-left-circle" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
                    <path fill-rule="evenodd" d="M12 8a.5.5 0 0 1-.5.5H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5a.5.5 0 0 1 .5.5z"/>
                </svg>
                <input type="hidden" id="year" value="<?php echo $year;?>">
            </p>

            <p class="btn btn-info right-btn" value="<?php  ?>">
                <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-arrow-right-circle" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
                    <path fill-rule="evenodd" d="M4 8a.5.5 0 0 0 .5.5h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5A.5.5 0 0 0 4 8z"/>
                </svg>
            </p>

        </div>    
    </div>

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

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



<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<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(); ?>Home/draw_calender/',
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>