Tutorial membuat kalender clean dan elegan

| 2 Comments

Kali ini gue ber-experiment dengan perpaduan java script, html dan css bagai mana membuat sebuah kalender untuk mempercantik blog. Blog yang dinamis, elegan dan sedikit coretan artikel yang kena dihati mampu membuat pengunjung betah dan inget nama blog kita. bener ga ya ?

 Koding nya simpel, asal dipahami secara teliti aja.

  • TUTOR UNTUK WEB
  1. buka Dreamveawer/notepad/notepad++ bla bla bla (gue tutor pake DW)
  2. buka FILE > NEW > HTML > CREATE
    copy dan paste kode dibawa ini di bawah tag <body> lalu save dan beri index.html
    Code:
    <script type="text/javascript">
<!--
  var caldate = new Date();
  var thisday = caldate.getDate();
  var thismonth = caldate.getMonth();
  var thisyear = caldate.getFullYear();
  var first_day;
  var month = thismonth;
  var year = thisyear;
  var months = new Array(12);
  
  function setup(d, months_list) {
    var monthnr;
    first_day = d;
    caldate.setDate(1);
    months = months_list.split(',',12);
    fill_calendar();
  }
  
  function fill_calendar() {
    var calday = new Date();
    var daynr, firstcalday, myclass, slotid, slotnr;
    caldate.setFullYear(year, month, 1);
    element = document.getElementById('mmyyyy');
    element.innerHTML = months[month] + ' ' + year;
    //
    calday = caldate;
    firstcalday = 1 - caldate.getDay() + first_day;
    if (firstcalday > 1) {
      firstcalday = firstcalday - 7;
    }
    calday.setDate(firstcalday);
    for (slotnr=0; slotnr<42; slotnr++) {
      daynr = calday.getDate();
      if (calday.getMonth() == month) {
        myclass='day'
      } else {
        myclass='otherday'
        }
      slotid = 's' + slotnr;
      element = document.getElementById(slotid);
      if (daynr < 10 ) {
        daynrstr = '&nbsp;' + daynr;
      } else {
          daynrstr = daynr;
        }
      if (daynr == thisday && month == thismonth && myclass=='day' && year == thisyear) {
        element.innerHTML = '<strong>' + daynrstr + '</strong>';
        myclass = 'today';
      } else {      
          element.innerHTML = daynrstr;
        }      
      element.className=myclass;
      calday.setDate(calday.getDate() + 1);
    }
  }
  
  function next_month() {
    month= month + 1;
    if (month > 11) {
      month = 0;
      year = year + 1;
    }
    fill_calendar();
  }
  
  function last_month() {
    month= month - 1;
    if (month < 0) {
      month = 11;
      year = year - 1;
    }
    fill_calendar();
  }
  
  function next_year() {
    year = year + 1;
    fill_calendar();
  }
  
  function last_year() {
    year = year - 1;
    fill_calendar();
  }
//-->
</script>


<div id="calendar_wrap"><table id="ndikendii-calendar">
 <caption><div id="mmyyyy">April 2013</div></caption>
 <thead>
 <tr>
  <th scope="col" title="Monday" class="mm">M</th>
  <th scope="col" title="Tuesday" class="mm">T</th>
  <th scope="col" title="Wednesday" class="mm">W</th>
  <th scope="col" title="Thursday" class="mm">T</th>
  <th scope="col" title="Friday" class="mm">F</th>
  <th scope="col" title="Saturday" class="mm">S</th>
  <th scope="col" title="Sunday" class="mm">S</th>
 </tr>
 </thead>

 <tfoot>
 <tr>
  <td colspan="3" id="prev" class="prev" onclick="last_month()">prev</td>
  <td class="pad"></td>
  <td colspan="3" id="next" class="next" onclick="next_month()">next</td>
 </tr>
 </tfoot>
 <tbody>

 <tr>
 <td id="s0" class="otherday" >28</td>
 <td id="s1" class="otherday" >29</td>
 <td id="s2" class="otherday" >30</td>
 <td id="s3" class="otherday" >31</td>
 <td id="s4" class="day" >1</td>
 <td id="s5" class="day" >2</td>
 <td id="s6" class="day" >3</td>
 </tr>
 <tr>
 <td id="s7" class="day" >4</td>
 <td id="s8" class="day" >5</td>
 <td id="s9" class="today" >6</td>
 <td id="s10" class="day" >7</td>
 <td id="s11" class="day" >8</td>
 <td id="s12" class="day" >9</td>
 <td id="s13" class="day" >10</td>
 </tr>
 <tr>
 <td id="s14" class="day" >11</td>
 <td id="s15" class="day" >12</td>
 <td id="s16" class="day" >13</td>
 <td id="s17" class="day" >14</td>
 <td id="s18" class="day" >15</td>
 <td id="s19" class="day" >16</td>
 <td id="s20" class="day" >17</td>
 </tr>
 <tr>
 <td id="s21" class="day" >18</td>
 <td id="s22" class="day" >19</td>
 <td id="s23" class="day" >20</td>
 <td id="s24" class="day" >21</td>
 <td id="s25" class="day" >22</td>
 <td id="s26" class="day" >23</td>
 <td id="s27" class="day" >24</td>
 </tr>
 <tr>
 <td id="s28" class="day" >25</td>
 <td id="s29" class="day" >26</td>
 <td id="s30" class="day" >27</td>
 <td id="s31" class="day" >28</td>
 <td id="s32" class="day" >29</td>
 <td id="s33" class="day" >30</td>
 <td id="s34" class="otherday" >1</td>
 </tr>
 <tr>
 <td id="s35" class="otherday" >2</td>
 <td id="s36" class="otherday" >3</td>
 <td id="s37" class="otherday" >4</td>
 <td id="s38" class="otherday" >5</td>
 <td id="s39" class="otherday" >6</td>
 <td id="s40" class="otherday" >7</td>
 <td id="s41" class="otherday" >8</td>
 </tr>
 </tbody>
 </table></div>
<script type="text/javascript">
setup(0,"JANUARY,FEBRUARY,MARCH,APRIL,MAY,JUNE,JULY,AUGUST,SEPTEMBER,OCTOBER,NOVEMBER,DECEMBER");
</script>

  3. buka FILE > NEW > CSS > CREATE
    copy dan paste kode dibawa ini lalu save dan beri nama tanggal.css
    Code:
    #ndikendii-calendar {
 margin: 0 auto;
 width: 100% !important;
 }
 
#ndikendii-calendar th {
 background-color: rgb(218, 62, 62) !important;
 border: 1px solid #fff;
 font-weight: bold;
 padding: 8px;
 text-align: center;
 }

#ndikendii-calendar .mm  {
 color: #fff;
 }
 
#ndikendii-calendar td {
 background: #afdefa;
 border: 1px solid #fff;
 padding: 8px;
 text-align: center;
 }
 
#ndikendii-calendar .today {
 background-color: rgb(218, 62, 62) !important; 
 color: #fff;
 }
 
#ndikendii-calendar .today a {
 color: #fff;
 }

#ndikendii-calendar .otherday {
 background: #eee !important; 
 font-size: 14px;
 text-align: center;
 background-color: Gainsboro;
 border-right-style: dotted;
 border-right-color: LightGray;
 color: Gray;
 cursor: default
 }
 
#ndikendii-calendar caption {
 background-color: rgb(218, 62, 62);
 color: #fff !important;
 font-size: 20px;
 text-align: center;
 font-weight: bold;
 }

#ndikendii-calendar #next, #prev {
    width: 15px;
    font-size: 14px;
    text-align: center;
    cursor: pointer 
    }



  4. setelah berhasil membuat file html dan css, selanjutnya kita akan membuat kode untuk pemanggilan file css tersebut di lember kerja html kita. (pastikan kita berada di lembar kerja index.html yang kita buat)

    copy dan paste kode dibawa ini di atas tag </head> lalu save kembali file index.html
    Code:
    <link type="text/css" rel="stylesheet" href="tanggal.css"/>
  5. buka file index.html, jika berhasil akan nampak seperti yang ada di blog gue dan seperti ini :
    HASIL JADI
-------------------------------------------------------------------------------------------------------

  • TUTOR UNTUK BLOGSPOT
  1. pastikan sudah login blog
  2. untuk versi bahasa blogger bahasa indonesia :
    TATA LETAK > TAMBAHKAN GADGET > HTML/JavaScript > Judul : Calendar atau kalender 
    > KONTEN > SIMPAN Pada form konten copy dan paste kode dibawah ini lalu simpan.

    untuk versi bahasa blogger bahasa inggris :
    LAYOUT > ADD A GADGET > HTML/JavaScript > Title : Calendar atau kalender 
    > CONTENT > SAVE Pada form konten copy dan paste kode dibawah ini lalu simpan.


    3. Code:
    <script type="text/javascript">
<!--
  var caldate = new Date();
  var thisday = caldate.getDate();
  var thismonth = caldate.getMonth();
  var thisyear = caldate.getFullYear();
  var first_day;
  var month = thismonth;
  var year = thisyear;
  var months = new Array(12);
  
  function setup(d, months_list) {
    var monthnr;
    first_day = d;
    caldate.setDate(1);
    months = months_list.split(',',12);
    fill_calendar();
  }
  
  function fill_calendar() {
    var calday = new Date();
    var daynr, firstcalday, myclass, slotid, slotnr;
    caldate.setFullYear(year, month, 1);
    element = document.getElementById('mmyyyy');
    element.innerHTML = months[month] + ' ' + year;
    //
    calday = caldate;
    firstcalday = 1 - caldate.getDay() + first_day;
    if (firstcalday > 1) {
      firstcalday = firstcalday - 7;
    }
    calday.setDate(firstcalday);
    for (slotnr=0; slotnr<42; slotnr++) {
      daynr = calday.getDate();
      if (calday.getMonth() == month) {
        myclass='day'
      } else {
        myclass='otherday'
        }
      slotid = 's' + slotnr;
      element = document.getElementById(slotid);
      if (daynr < 10 ) {
        daynrstr = '&nbsp;' + daynr;
      } else {
          daynrstr = daynr;
        }
      if (daynr == thisday && month == thismonth && myclass=='day' && year == thisyear) {
        element.innerHTML = '<strong>' + daynrstr + '</strong>';
        myclass = 'today';
      } else {      
          element.innerHTML = daynrstr;
        }      
      element.className=myclass;
      calday.setDate(calday.getDate() + 1);
    }
  }
  
  function next_month() {
    month= month + 1;
    if (month > 11) {
      month = 0;
      year = year + 1;
    }
    fill_calendar();
  }
  
  function last_month() {
    month= month - 1;
    if (month < 0) {
      month = 11;
      year = year - 1;
    }
    fill_calendar();
  }
  
  function next_year() {
    year = year + 1;
    fill_calendar();
  }
  
  function last_year() {
    year = year - 1;
    fill_calendar();
  }
//-->
</script>


<div id="calendar_wrap"><table id="ndikendii-calendar">
 <caption><div id="mmyyyy">April 2013</div></caption>
 <thead>
 <tr>
  <th scope="col" title="Monday" class="mm">M</th>
  <th scope="col" title="Tuesday" class="mm">T</th>
  <th scope="col" title="Wednesday" class="mm">W</th>
  <th scope="col" title="Thursday" class="mm">T</th>
  <th scope="col" title="Friday" class="mm">F</th>
  <th scope="col" title="Saturday" class="mm">S</th>
  <th scope="col" title="Sunday" class="mm">S</th>
 </tr>
 </thead>

 <tfoot>
 <tr>
  <td colspan="3" id="prev" class="prev" onclick="last_month()">prev</td>
  <td class="pad"></td>
  <td colspan="3" id="next" class="next" onclick="next_month()">next</td>
 </tr>
 </tfoot>
 <tbody>

 <tr>
 <td id="s0" class="otherday" >28</td>
 <td id="s1" class="otherday" >29</td>
 <td id="s2" class="otherday" >30</td>
 <td id="s3" class="otherday" >31</td>
 <td id="s4" class="day" >1</td>
 <td id="s5" class="day" >2</td>
 <td id="s6" class="day" >3</td>
 </tr>
 <tr>
 <td id="s7" class="day" >4</td>
 <td id="s8" class="day" >5</td>
 <td id="s9" class="today" >6</td>
 <td id="s10" class="day" >7</td>
 <td id="s11" class="day" >8</td>
 <td id="s12" class="day" >9</td>
 <td id="s13" class="day" >10</td>
 </tr>
 <tr>
 <td id="s14" class="day" >11</td>
 <td id="s15" class="day" >12</td>
 <td id="s16" class="day" >13</td>
 <td id="s17" class="day" >14</td>
 <td id="s18" class="day" >15</td>
 <td id="s19" class="day" >16</td>
 <td id="s20" class="day" >17</td>
 </tr>
 <tr>
 <td id="s21" class="day" >18</td>
 <td id="s22" class="day" >19</td>
 <td id="s23" class="day" >20</td>
 <td id="s24" class="day" >21</td>
 <td id="s25" class="day" >22</td>
 <td id="s26" class="day" >23</td>
 <td id="s27" class="day" >24</td>
 </tr>
 <tr>
 <td id="s28" class="day" >25</td>
 <td id="s29" class="day" >26</td>
 <td id="s30" class="day" >27</td>
 <td id="s31" class="day" >28</td>
 <td id="s32" class="day" >29</td>
 <td id="s33" class="day" >30</td>
 <td id="s34" class="otherday" >1</td>
 </tr>
 <tr>
 <td id="s35" class="otherday" >2</td>
 <td id="s36" class="otherday" >3</td>
 <td id="s37" class="otherday" >4</td>
 <td id="s38" class="otherday" >5</td>
 <td id="s39" class="otherday" >6</td>
 <td id="s40" class="otherday" >7</td>
 <td id="s41" class="otherday" >8</td>
 </tr>
 </tbody>
 </table></div>
<script type="text/javascript">
setup(0,"JANUARY,FEBRUARY,MARCH,APRIL,MAY,JUNE,JULY,AUGUST,SEPTEMBER,OCTOBER,NOVEMBER,DECEMBER");
</script>


  3. lalu kita pindah ke : TEMPLATE > EDIT HTML > klik panah hitam kecil yang ada di blogger <b:skin>....</b:skin> 
    gambar


  4. lalu copy dan paste kode dibawah ini di atas tag </b:skin> lalu simpan.
  5. Code:
    #ndikendii-calendar {
 margin: 0 auto;
 width: 100% !important;
 }
 
#ndikendii-calendar th {
 background-color: rgb(218, 62, 62) !important;
 border: 1px solid #fff;
 font-weight: bold;
 padding: 8px;
 text-align: center;
 }

#ndikendii-calendar .mm  {
 color: #fff;
 }
 
#ndikendii-calendar td {
 background: #afdefa;
 border: 1px solid #fff;
 padding: 8px;
 text-align: center;
 }
 
#ndikendii-calendar .today {
 background-color: rgb(218, 62, 62) !important; 
 color: #fff;
 }
 
#ndikendii-calendar .today a {
 color: #fff;
 }

#ndikendii-calendar .otherday {
 background: #eee !important; 
 font-size: 14px;
 text-align: center;
 background-color: Gainsboro;
 border-right-style: dotted;
 border-right-color: LightGray;
 color: Gray;
 cursor: default
 }
 
#ndikendii-calendar caption {
 background-color: rgb(218, 62, 62);
 color: #fff !important;
 font-size: 20px;
 text-align: center;
 font-weight: bold;
 }

#ndikendii-calendar #next, #prev {
    width: 15px;
    font-size: 14px;
    text-align: center;
    cursor: pointer 
    }


  6. Hasil nya akan seperti gambar ini  :


    Silakan di modifikasi dan berexperiment ria. Semoga bermanfaat. Jika ada yang kurang jelas silakan tinggalkan komentar :)

Comments
2 Comments

2 comments:

  1. AnonymousSeptember 28, 2014 at 6:24 AM

    Sob, tutor untuk Web sepertinya tidak mendukung atau ada file yang salah. Saya sudah coba dan hasil nya hanya berupa text saja, tidak ada bingkai ataupun warna seperti yang dijelaskan diatas.

    Mohon diperbaiki, terimakasih & salam kenal.

    ReplyDelete
    Replies
    1. UnknownNovember 9, 2014 at 1:14 PM

      Silakan di coba lagi, mungkin ada penempatan yang salah. Sudah saya cek kembali hasil nya seperti ini : http://jsfiddle.net/ndikendii/aH48L/1/

      Delete