Array
(
    [y] => 2083
    [m] => 1
    [M] => ब‌ैशाख
    [M_Eng] => Bhaisakh
    [d] => 1
    [D] => २
    [l] => मङ्गलबार
)
<script>
  let year =  2083;
  var screenwidth =  window.screen.width;
function calenderInNepali() // display calender in nepali
{
  

  $('#container div').remove();
  // document.getElementById('todayDate').innerHTML='<p>ब‌ैशाख-२</p>';
    // document.getElementById("EnglishLanguage").classList.remove("active_language");
    // document.getElementById("NepaliLanguage").classList.add("active_language");
    $(document).ready(function(){
        $('#weekdays div').remove();
        $('#days div').remove();
        let weekArray = ['आइतबार','सोमबार','मंगलबार','बुधबार','बिहिबार','शुक्रवार','शनिबार'];
        let weekArrayshort = ['आइ','सोम','मंगल','बुध','बिहि','शुक्र','शनि'];
        let monthArrayEnglish = ['Bhaisakh','jestha','Ashar','Shrawn','Bhadra','Ashoj','Kartik','Mangsir','Poush','Magh','Falgun','Chaitra'];
        let monthArray =['ब‌ैशाख', 'जेठ', 'असार', 'साउन', 'भदौ', 'असोज', 'कार्तिक', 'मङ्सिर', 'पुस', 'माघ', 'फाल्गुण', 'चैत'];
 let DaysArrayNepali =['१','२','३','४','५','६','७','८','९','१०','११','१२','१३','१४','१५',
                        '१६','१७','१८','१९','२०','२१','२२','२३','२४','२५','२६','२७',
                        '२८','२९','३०','३१','३२'];
 let DaysArray = [];

//  let End_Date = [31,32,31,32,31,30,30,30,29,30,29,31];//
 let End_Date = [31,31,32,31,31,31,30,29,30,29,30,30];
 

// let initialStart = 1;
start= [1,4,1,4,1,4,6,1,3,4,6,0];
// for(let mystart=1;mystart<=End_Date.length;mystart++)
// {
 
//     let gap = 35-parseInt(start[mystart-1])-parseInt(End_Date[mystart-1]);
//     remainingcoveredinweek =7-gap;
//    // console.log(start[mystart-1]+' '+End_Date[mystart-1]+ ' '+remainingcoveredinweek);
//     start.push(remainingcoveredinweek);
// }

 for(let dayarrayincrement=1;dayarrayincrement<=31;dayarrayincrement++)
 {
     DaysArray.push('"'+dayarrayincrement+'"');
 }

  for(let i = 0;i<monthArray.length;i++) // creating div for every month
  { 
    let newdiv = document.createElement('div');
        document.getElementById('container').appendChild(newdiv); 
        newdiv.classList.add('calender');
        var list = document.getElementsByClassName("container")[0];
        list.getElementsByClassName("calender")[i].setAttribute("id","month"+monthArray[i]);
        let newdivh1 = document.createElement('h1');
        document.getElementById("month"+monthArray[i]).appendChild(newdivh1);
       newdivh1.innerHTML += year+ " " +monthArray[i];
  }
totalvalue=0;
  for(let i = 0;i<monthArray.length;i++) // creating div for every month
  { 
    
    // var monthdiv= document.getElementById('month'+monthArray[i]);
    let newdivweekDays = document.createElement('div');
        document.getElementById('month'+monthArray[i]).appendChild(newdivweekDays).classList.add("weekdays");
        let newdivdays = document.createElement('div');
       let newdivdayscreated = document.getElementById('month'+monthArray[i]).appendChild(newdivdays);
       newdivdayscreated.classList.add("days");
       newdivdayscreated.setAttribute("id","days-"+monthArray[i]);

       if( screenwidth >700)
       {
       for(let j=0;j<weekArray.length;j++)
    {
        let newdivweek = document.createElement('div');
      let insertedMonth =  newdivweek.innerHTML += weekArray[j];
        document.getElementsByClassName('weekdays')[i].appendChild(newdivweek);
    }
  }
  if( screenwidth <=700)
  {
    for(let j=0;j<weekArray.length;j++)
    {
      let newdivweek = document.createElement('div');
      let insertedMonth =  newdivweek.innerHTML += weekArrayshort[j];
        document.getElementsByClassName('weekdays')[i].appendChild(newdivweek);
    }
  }
   var temp = start[i];
        while(start[i]>0)
        {
          let newdiv = document.createElement('div');
          let insertedMonth =  newdiv.innerHTML += " ";
        newdivcreated =document.getElementById("days-"+monthArray[i]).appendChild(newdiv);
        newdivcreated.classList.add("mydaysblank");
        start[i]--;
        totalvalue+=1;
       
        }
        start[i]=temp;
        
      for(let k=0;k<End_Date[i];k++)
    {
      
      var weekknowarray = start[i]+k;
      var currentWeek;
      if(weekknowarray<=6)
      {
       currentWeek= weekArray[weekknowarray];
      }
      if(weekknowarray>6 && weekknowarray<=13)
      {
        currentWeek= weekArray[weekknowarray-7];
      }
      if(weekknowarray>13 && weekknowarray<=20)
      {
        currentWeek= weekArray[weekknowarray-14];
      }
      if(weekknowarray>20 && weekknowarray<=27)
      {
        currentWeek= weekArray[weekknowarray-21];
      }
      if(weekknowarray>27 && weekknowarray<=34)
      {
        currentWeek= weekArray[weekknowarray-28];
      }
      if(weekknowarray>34 && weekknowarray<=41)
      {
        currentWeek= weekArray[weekknowarray-35];
      }
      
      let newdiv = document.createElement('div');
     if(monthArray[i] == "ब‌ैशाख" && DaysArrayNepali[k] == "२" && totalvalue <=20)
        {
          // document.getElementById('noticemonth').innerHTML="Today<br>"+year+" "+" "+monthArray[i]+"<br>"+DaysArrayNepali[k];

          newdiv.style.backgroundColor = 'green';
          let insertedMonth =  newdiv.innerHTML += DaysArrayNepali[k];
       var todaysday = document.getElementById("days-"+monthArray[i]).appendChild(newdiv);
       todaysday.classList.add("mydays"); 
       todaysday.id= currentWeek;
     todaysday.setAttribute("onclick",'displaytodaydate("days-'+monthArray[i]+'","'+DaysArrayNepali[k]+'","'+currentWeek+'") , sidebarshowaction()');
    
       displaytodaydate("days-"+monthArray[i],DaysArrayNepali[k],currentWeek);
           
          
        }
        else
        {
      let insertedMonth =  newdiv.innerHTML += DaysArrayNepali[k];
       var newdivmydays = document.getElementById("days-"+monthArray[i]).appendChild(newdiv);
       newdivmydays.classList.add("mydays");
       newdivmydays.id=currentWeek;
       newdivmydays.setAttribute("onclick",'displaynote("days-'+monthArray[i]+'","'+DaysArrayNepali[k]+'","'+currentWeek+'") , sidebarshowaction()');
       
        }
     
    }
    // while(totalvalue>7)
    // {
    //   var parent = document.getElementById("days"+monthArray[i]);
    //   var child = parent.getElementsByClassName('mydays')[0];
    //   parent.removeChild(child);
    //   totalvalue--;
    // }

totalvalue=0;

  }
      });
}
function calenderInEnglish()// display calender in english
{
  document.getElementById('todayDate').innerHTML='<p>Bhaisakh-1</p>';
    document.getElementById("NepaliLanguage").classList.remove("active_language");
    document.getElementById("EnglishLanguage").classList.add("active_language");
    $(document).ready(function(){
        $('#weekdays div').remove();
        $('#days div').remove();
        let monthArray = ['Bhaisakh','jestha','Ashar','Shrawn','Bhadra','Ashoj','Kartik','Mangsir','Poush','Magh','Falgun','Chaitra'];
        let weekArray = ['Sunday','Monday','Tuesday','Wednesday','Thusday','Friday','Saturday'];
        let DaysArrayNepali =['१','२','३','४','५','६','७','८','९','१०','११','१२','१३','१४','१५',
                               '१६','१७','१८','१९','२०','२१','२२','२३','२४','२५','२६','२७',
                               '२८','२९','३०','३१'];
        let DaysArray = [];
        for(let dayarrayincrement=1;dayarrayincrement<=31;dayarrayincrement++)
        {
            DaysArray.push(''+dayarrayincrement+'');
        }
       
        let WeekDays = document.getElementById('weekdays');
           for(let i=0;i<weekArray.length;i++)
           {
       
               let newdiv = document.createElement('div');
             let insertedMonth =  newdiv.innerHTML += weekArray[i];
               document.getElementById('weekdays').appendChild(newdiv); 
           }
           for(let i=0;i<DaysArray.length;i++)
           {
       
               let newdiv = document.createElement('div');
               if(DaysArray[i] == "1")
               {
                  newdiv.style.backgroundColor = 'green';
                  let insertedMonth =  newdiv.innerHTML += DaysArray[i];
               document.getElementById('days').appendChild(newdiv);
                 }
                 else
                 {
             let insertedMonth =  newdiv.innerHTML += DaysArray[i];
               document.getElementById('days').appendChild(newdiv);
                 } 
           }
       
      });


   

 }


</script><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calender</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
    <script>
//     document.addEventListener('contextmenu', event=> event.preventDefault()); 
// document.onkeydown = function(e) { 
// if(event.keyCode == 123) { 
// return false; 
// } 
// if(e.ctrlKey && e.shiftKey && e.keyCode == 'I'.charCodeAt(0)){ 
// return false; 
// } 
// if(e.ctrlKey && e.shiftKey && e.keyCode == 'J'.charCodeAt(0)){ 
// return false; 
// } 
// if(e.ctrlKey && e.keyCode == 'U'.charCodeAt(0)){ 
// return false; 
// } 
// }
    function alertweek(week)
    {
        alert(week);
    }
        function note_Insert(val , year, week)
{
    document.getElementById('newnoticeadd').style.display = 'none';
    var splitedYear = year.split("<br>");
//  alert(val+splitedYear[0]+splitedYear[1]);

    $.ajax({ 
 type: 'post',
 url: 'backend.php',
 data: {
  add_Note:val,
  date_nepali: splitedYear[0]+splitedYear[1]
 },
 success: function (response) {
document.getElementById("My_Note").innerHTML=response; 
 } 
 });

}

function displaynote(id,text,week)
{
  // alert(id + ' <br>' +text);
  var str = id;
  var res = str.split("-");
  document.getElementById('noticemonth').innerHTML= year+' '+' '+res[1] +'<br>'+text;
  document.getElementById('noticeweek').innerHTML = week;

  $.ajax({ 
 type: 'post',
 url: 'backend.php',
 data: {
  year_note_display:year+' '+' '+res[1]+text,
 },
 success: function (response) {
document.getElementById("My_Note").innerHTML=response; 
 } 
 });
}
function displaytodaydate(id,text,week)
{
  var str = id;
  var res = str.split("-");
  document.getElementById('noticemonth').innerHTML= 'Today<br>'+year+' '+' '+res[1] +'<br>'+text;
  document.getElementById('noticeweek').innerHTML = week;

  $.ajax({ 
 type: 'post',
 url: 'backend.php',
 data: {
  year_note_display:year+' '+' '+res[1]+text,
 },
 success: function (response) {
document.getElementById("My_Note").innerHTML=response; 
 } 
 });
}

function sidenoticebaraction()
    {
        var x = document.getElementById('sideNoteBoxmain');
        var sidebar = document.getElementById('sideNoteBox');
        if(x.style.display ==='block')
        {
            x.style.display = "none";
            sidebar.style.height = 'auto';
            sidebar.style.width = 'auto';
            document.getElementById('plusminus').innerHTML = "+"; 
           

        }
        else
        {
            x.style.display = "block";
            sidebar.style.height = 'auto';
            document.getElementById('plusminus').innerHTML = "-";
        }
    }

function sidebarshowaction()
{
    var x = document.getElementById('sideNoteBoxmain');
        var sidebar = document.getElementById('sideNoteBox');
    x.style.display = "block";
            sidebar.style.height = 'auto';
            document.getElementById('plusminus').innerHTML = "-";
}
    </script>
</head>
<body onload="calenderInEnglish()">
    <div class="language_box">
        <span class="language_text">सबैको नेपाली पात्रो</span>
        <button onclick="calenderInNepali()" id="NepaliLanguage">Nepali</button>
        <button onclick="calenderInEnglish()" id="EnglishLanguage" class="active_language">English</button>
    </div>
    <center>
    <div class="container" id="container">
        <div class="calender" id="calender">
            <div class="month">
               <!-- <i class="fas fa-angle-left prev"></i>-->
                <div class="date" id="todayDate">
                    <!--<h1>May</h1>-->
                    <p>hty</p>
                </div>
                <div class="weekdays" id="weekdays">
                </div>
                <div class="days" id="days">
                </div>
            </div>
        </div>
    </div>
</center>
<div id="sideNoteBox">
<div style="text-align:center;;margin-top:0;"><h3 style="margin:0;cursor:pointer;width:30px;" id="plusminus" onclick="sidenoticebaraction()"> </h3>
</div>
<div id="sideNoteBoxmain">
    <h1>
    <span id="noticemonth"></span>
    <span id="noticeweek"></span>
    </h1>
    <div id="noteheadbar">
        <span>NOTICE</span>
        <button id="shownewadd">+</button>
    </div>
    <div id="newnoticeadd">
        <form method="post">
        <textarea name="myNote" id="mynotetext" cols="30" rows="5"></textarea><br>

        <input type="button" value="ADD" onclick='note_Insert(document.getElementById("mynotetext").value,document.getElementById("noticemonth").innerHTML)'>
        </form>
    </div>
    <div id="My_Note"></div>
    </div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    $(document).ready(function(){
    $("#shownewadd").click(function(){
        if( $("#newnoticeadd").css("display") == "none")
        {
  $("#newnoticeadd").show();
        }
        else
        {
            $("#newnoticeadd").hide();
        }
});
    });
</script>
<link rel="stylesheet" href="style.css"/>
</html>