Membuat Kalender Praktis di Website

Pernah kah anda berinisiatif untuk membuat Kalender di website, ya mungkin untuk memper cantik design, atau untuk memperlengkap aplikasi di website anda, untuk yang berfikiran seperti itu, saya mempunyai code yang sangat mudah utuk menciptakan kalender untuk anda.

Kode nya sangat simple hanya HTML css dan JavaScript, namun bukan hanya mudah disini yang saya berikan Script yang bersih tanpa backlink untuk kentungan saya. OK dari sini kita mulai dengan membuat sruktur HTML nya.

<div id="idx-calendar">
 <div id="calendar-control">
  <div id="monthNow">Januari 2014</div>
  <div id="nextMonth"></div>
  <div id="prevMonth"></div>
 </div>
 <div id="dayNames">
  <ul>
   <li>Minggu</li>
   <li>Senin</li>
   <li>Selasa</li>
   <li>Rabu</li>
   <li>Kamis</li>
   <li>Jum'at</li>
   <li>Sabtu</li>
  </ul>
 </div>
 <div id="daysNum">
 </div>
</div>

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.

Untuk nama hari diatas bisa anda ganti dengan bahasa inggis atau yang lainya yang anda suka, setelah selesai dengan kode HTML nya kita lanjut dengan code css untuk membentuk betuk rupa kalendernya.

#idx-calendar {
    margin: 0 auto;
    max-width: 500px;
    text-align: center;
    width: 100%;
} 
#idx-calendar div > ul {
    list-style: none ;
    background-color: #333333;
    margin: 0;
    padding: 0 10px;
}
#idx-calendar #dayNames > ul {
    background-color: #232323;
}
#idx-calendar ul li {
    color: #FFFFFF;
    float: left;
    font-family: Tahoma;
    font-weight: inherit;
}
#dayNames ul li {
    font-weight: bold;
    margin: 2% 0;
    padding: 3% 0;
    width: 14.2857%;
}
#daysNum ul li:hover {
    background-color: #232323;
}
#daysNum ul li {
    padding: 2.5% 0;
    width: 14.2857%;
}
#dayNames,#daysNum {
    clear: both;
    width: 100%;
}
#dayNames:after,#daysNum:after,#idx-calendar div > ul:after  {
    content: "";
    display: table;
    clear: both;
}
#idx-calendar div > ul li:first-child {
    color: #F05558;
    font-weight: bold;
}
#idx-calendar li.dayNow {
    color: #0084B4 !important;
    font-weight: bold;
    background-color: #232323;
    position: relative;
    z-index: 2;
}
.monthNow {
    color: #0084B4;
    font-family: arial;
    font-size: 40px;
    text-align: left;
}
#monthNow {
    background-color:#4188D0;
    font-family: verdana;
    font-weight: bold;
    color: #FFFFFF;
    padding: 20px;
    text-transform: uppercase;
}
#calendar-control {
    position: relative;
}
#nextMonth, #prevMonth {
    transition:0.5s;
    background-color: #232323;
    color: #FFFFFF;
    font-family: verdana;
    height: 100%;
    position: absolute;
    right: 0;
    text-transform: uppercase;
    top: 0;
    width: 60px;
}
#prevMonth{
    left: 0;            
}
#prevMonth:before, #nextMonth:before {
    background-color: #4188D0;
    border-radius: 50%;
    transition:0.5s;
    border-right: 1px solid #FFFFFF;
    border-top: 1px solid #FFFFFF;
    content: "";
    display: block;
    height: 20px;
    left: 20px;
    position: relative;
    top: 18px;
    transform: rotate(45deg);
    width: 20px;
}
#prevMonth:before{
    transform: rotate(-135deg);
}
#nextMonth:hover, #prevMonth:hover{
    background-color: transparent;
}
#nextMonth:hover:before, #prevMonth:hover:before{
    border-radius: 0%;
}

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.
  • 69.
  • 70.
  • 71.
  • 72.
  • 73.
  • 74.
  • 75.
  • 76.
  • 77.
  • 78.
  • 79.
  • 80.
  • 81.
  • 82.
  • 83.
  • 84.
  • 85.
  • 86.
  • 87.
  • 88.
  • 89.
  • 90.
  • 91.
  • 92.
  • 93.
  • 94.
  • 95.
  • 96.
  • 97.
  • 98.
  • 99.
  • 100.
  • 101.
  • 102.
  • 103.
  • 104.
  • 105.
  • 106.
  • 107.
  • 108.
  • 109.
  • 110.
  • 111.

Jika sudah terlihat bentuk kalendernya, maka yang terakhir code JavaScript nya utuk fungsinya,

function displayCalendar(month, year){
    
    var monthNow = new Date().getMonth();
    var yearNow = new Date().getFullYear();;
    var nextMonth = month+1;
    var prevMonth = month-1;
    var day = 0;
    
    if((month == monthNow)&&(year == yearNow)){
        var day = new Date().getDate();
    }
    
    var htmlContent ="";
    var FebNumberOfDays ="";
    var counter = 1;
    var Nameday = 1;
    
    if (month == 1){
        if ( (year%100!=0) && (year%4==0) || (year%400==0)){
            FebNumberOfDays = 29;
            }else{
            FebNumberOfDays = 28;
        }
    }
    
    var monthNames = ["January","February","March","April","May","June","July","August","September","October","November", "December"];
    var monthNum = ["1","2","3","4","5","6","7","8","9","10","11", "12"];
    var dayNames = ["Sunday","Monday","Tuesday","Wednesday","Thrusday","Friday", "Saturday"];
    var dayPerMonth = ["31", ""+FebNumberOfDays+"","31","30","31","30","31","31","30","31","30","31"]
    var nextDate = new Date(nextMonth +' 1 ,'+year);
    var weekdays = nextDate.getDay();
    var weekdays2 = weekdays
    var numOfDays = dayPerMonth[month];
                                    
    while (weekdays>0){
    htmlContent += "<li style='padding:1 0 0;'></li>";
        weekdays--;
    }
    
    while (counter <= numOfDays){
        
        if (weekdays2 > 6){
            weekdays2 = 0;
            htmlContent += "</ul><ul>";
        }
        if (counter == day){
            htmlContent +="<li class='dayNow'>"+counter+"</li>";
            Nameday = counter;
            }else{
            htmlContent +="<li>"+counter+"</li>";
        }
        weekdays2++;
        counter++;
    }
    
    document.getElementById("monthNow").innerHTML= monthNames[month]+" "+ year ;
    document.getElementById("daysNum").innerHTML= "<ul id="+monthNum[month]+" class="+year+">"+htmlContent+"</ul>";
}


(function() {
    var dateNow = new Date();
    var month = dateNow.getMonth();
    var year = dateNow.getFullYear();
    displayCalendar(month,year)
})(window);


document.getElementById("nextMonth").onclick = function(){
    var idmonth = document.getElementById("daysNum");
    var month = idmonth.getElementsByTagName("ul")[0].id;
    var nextYear = idmonth.getElementsByTagName("ul")[0].className;
    var nextMonth = Number(month);
    if(nextMonth == 12){
        nextMonth = 0;
        nextYear = Number(nextYear) + 1
    }
    displayCalendar(nextMonth,nextYear);
}


document.getElementById("prevMonth").onclick = function(){
    var idmonth = document.getElementById("daysNum");
    var month = idmonth.getElementsByTagName("ul")[0].id;
    var prevYear = idmonth.getElementsByTagName("ul")[0].className;
    var prevMonth = Number(month) - 2;
    if(prevMonth < 0 ){
        prevMonth = 11;    
        prevYear = Number(prevYear) - 1
    }
    displayCalendar(prevMonth,prevYear);
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.
  • 69.
  • 70.
  • 71.
  • 72.
  • 73.
  • 74.
  • 75.
  • 76.
  • 77.
  • 78.
  • 79.
  • 80.
  • 81.
  • 82.
  • 83.
  • 84.
  • 85.
  • 86.
  • 87.
  • 88.
  • 89.
  • 90.
  • 91.
  • 92.

Yosh sudah jadi simple bukan. Selamat Mencoba !!.

Live Demo