Cara Membuat Kalender Menggunakan Html dan CSS

Cara Membuat Kalender Menggunakan Html dan CSS – Widget kalender adalah komponen terpenting untuk situs web terkait acara. Ini membantu pengguna untuk melihat informasi jadwal atau acara untuk hari atau tanggal tertentu. Selain itu, kalender juga digunakan dalam pemilih tanggal, penjadwal acara, atau proyek widget kalender tujuan umum. Jika Anda sedang mengerjakan proyek seperti itu di mana Anda perlu menerapkan widget kalender, Anda berada di tempat yang tepat. Dalam tutorial ini, saya akan menjelaskan cara membuat kalender dalam HTML, CSS, dan JavaScript.

Anda pasti membutuhkan kalender yang bisa Anda desain sesuai dengan kebutuhan Anda. Jadi, saya akan fokus pada penyesuaian serta membuat widget kalender dengan menambahkan asetnya ke proyek Anda. Pada dasarnya, widget kalender ini tidak memerlukan pustaka atau plugin karena murni ditulis dalam JavaScript. Bagaimanapun, ia menggunakan Font Awesome CSS untuk tombol navigasi kalender.

Sebelum memulai dengan HTML, saya sarankan Anda memeriksa halaman demo untuk melihat cara kerja kalender. Anda dapat sangat menyesuaikan tata letaknya, tanggal saat ini, tanggal yang dinonaktifkan, dan navigasi tombol berikutnya/sebelumnya seperti yang Anda inginkan.

Struktur HTML

Di HTML, muat Reset CSS untuk menghapus pemformatan elemen HTML browser default. Demikian pula, muat font Roboto dan Font Awesome CSS (untuk ikon) dengan menambahkan tautan CDN berikut ke tag kepala halaman web Anda.

<!-- Reset CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <!-- Google Roboto Fonts --> <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:400|Roboto+Condensed:400|Fjalla+One:400'> <!-- Font Awesome CSS --> <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'>

Kita perlu memiliki elemen div di mana kalender akan dirender secara dinamis. Jadi, buat elemen div dengan nama kelas “calendar-wrapper”, letakkan tombol next/prev, dan elemen div dengan id “divCal” di dalamnya.

<div class="calendar-wrapper">     <button id="btnPrev" type="button">Prev</button>     <button id="btnNext" type="button">Next</button> <div id="divCal"></div> </div>

Anda dapat menempatkan struktur HTML di atas di mana saja di halaman web/aplikasi tempat Anda ingin membuat widget kalender.

Struktur CSS

Setelah membuat pembungkus kalender dalam HTML, sekarang saatnya untuk menata tata letak kalender. Oleh karena itu, pilih kelas “calendar-wrapper” dan tentukan properti width, margin, padding, dan border sebagai berikut. Anda dapat mengatur warna latar belakang kustom sesuai dengan pilihan Anda.

.calendar-wrapper {   width: 360px;   margin: 3em auto;   padding: 2em;   border: 1px solid #dcdcff;   border-radius: 5px;   background: #fff; }

Fungsi kalender menghasilkan tanggal yang diatur dalam tata letak tabel. Jadi, Anda dapat dengan mudah menyesuaikan tata letak kalender dengan memilih elemen tabel pembungkus kalender. Berikut ini adalah gaya default (seperti yang ditunjukkan pada halaman demo). Anda dapat memodifikasinya sesuai dengan kebutuhan Anda.

.calendar-wrapper table {   clear: both;   width: 100%;   border: 1px solid #dcdcff;   border-radius: 3px;   border-collapse: collapse;   color: #444; } .calendar-wrapper td {   height: 48px;   text-align: center;   vertical-align: middle;   border-right: 1px solid #dcdcff;   border-top: 1px solid #dcdcff;   width: 14.28571429%; } thead td {   border: none;   color: #28283b;   text-transform: uppercase;   font-size: 1.5em; }

Class “not-current” untuk elemen td menentukan tanggal yang dinonaktifkan di kalender. Jika Anda ingin menyembunyikan tanggal ini, Anda dapat menggunakan properti visibilitas CSS dengan nilai “Hidden”.

td.not-current {   color: #c0c0c0; }

Jika Anda ingin menyesuaikan tanggal saat ini, Anda dapat memilih class “today” dan menentukan gaya CSS untuknya. Gaya CSS default untuk tanggal saat ini adalah sebagai berikut:

td.today {   font-weight: 700;   color: #28283b;   font-size: 1.5em; }

Kalender menggunakan ikon Font Awesome di dalam tombol berikutnya dan sebelumnya. Tombol navigasi kalender ini dapat disesuaikan dengan memilihnya berdasarkan idnya. Anda dapat mengatur warna latar belakang kustom, ukuran font, dan ikon untuk tombol-tombol ini sesuai dengan kebutuhan Anda.

#btnPrev {   float: left;   margin-bottom: 20px; } #btnPrev:before {   content: '\f104';   font-family: FontAwesome;   padding-right: 4px; } #btnNext {   float: right;   margin-bottom: 20px; } #btnNext:after {   content: '\f105';   font-family: FontAwesome;   padding-left: 4px; } #btnPrev, #btnNext {   background: transparent;   border: none;   outline: none;   font-size: 1em;   color: #c0c0c0;   cursor: pointer;   font-family: "Roboto Condensed", sans-serif;   text-transform: uppercase;   transition: all 0.3s ease; }

Demikian pula, Anda dapat menentukan gaya arahkan kursor untuk tombol berikutnya/sebelumnya sebagai berikut. Jika Anda ingin membuat tombol ini lebih menarik, lihat efek hover CSS ini untuk tombol.

#btnPrev:hover, #btnNext:hover {   color: #28283b;   font-weight: bold; }

Struktur Fungsi Javascript

Sekarang semuanya sudah siap, akhirnya, Anda hanya perlu menambahkan fungsi JavaScript kalender ke dalam proyek Anda. Jadi, tambahkan fungsi berikut di antara tag

var Cal = function(divId) {   //Store div id   this.divId = divId;   // Days of week, starting on Sunday   this.DaysOfWeek = [     'Sun',     'Mon',     'Tue',     'Wed',     'Thu',     'Fri',     'Sat'   ];   // Months, stating on January   this.Months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December' ];   // Set the current month, year   var d = new Date();   this.currMonth = d.getMonth();   this.currYear = d.getFullYear();   this.currDay = d.getDate();   }; // Goes to next month Cal.prototype.nextMonth = function() {   if ( this.currMonth == 11 ) {     this.currMonth = 0;     this.currYear = this.currYear + 1;   }   else {     this.currMonth = this.currMonth + 1;   }   this.showcurr(); }; // Goes to previous month Cal.prototype.previousMonth = function() {   if ( this.currMonth == 0 ) {     this.currMonth = 11;     this.currYear = this.currYear - 1;   }   else {     this.currMonth = this.currMonth - 1;   }   this.showcurr(); }; // Show current month Cal.prototype.showcurr = function() {   this.showMonth(this.currYear, this.currMonth); }; // Show month (year, month) Cal.prototype.showMonth = function(y, m) {   var d = new Date()   // First day of the week in the selected month   , firstDayOfMonth = new Date(y, m, 1).getDay()   // Last day of the selected month   , lastDateOfMonth =  new Date(y, m+1, 0).getDate()   // Last day of the previous month   , lastDayOfLastMonth = m == 0 ? new Date(y-1, 11, 0).getDate() : new Date(y, m, 0).getDate();   var html = '<table>';   // Write selected month and year   html += '<thead><tr>';   html += '<td colspan="7">' + this.Months[m] + ' ' + y + '</td>';   html += '</tr></thead>';   // Write the header of the days of the week   html += '<tr class="days">';   for(var i=0; i < this.DaysOfWeek.length;i++) {     html += '<td>' + this.DaysOfWeek[i] + '</td>';   }   html += '</tr>';     // Write the days   var i=1;   do {     var dow = new Date(y, m, i).getDay();     // If Sunday, start new row     if ( dow == 0 ) {       html += '<tr>';     }     // If not Sunday but first day of the month     // it will write the last days from the previous month     else if ( i == 1 ) {       html += '<tr>';       var k = lastDayOfLastMonth - firstDayOfMonth+1;       for(var j=0; j < firstDayOfMonth; j++) {         html += '<td class="not-current">' + k + '</td>';         k++;       }     }     // Write the current day in the loop     var chk = new Date();     var chkY = chk.getFullYear();     var chkM = chk.getMonth();     if (chkY == this.currYear && chkM == this.currMonth && i == this.currDay) {       html += '<td class="today">' + i + '</td>';     } else {       html += '<td class="normal">' + i + '</td>';     }     // If Saturday, closes the row     if ( dow == 6 ) {       html += '</tr>';     }     // If not Saturday, but last day of the selected month     // it will write the next few days from the next month     else if ( i == lastDateOfMonth ) {       var k=1;       for(dow; dow < 6; dow++) {         html += '<td class="not-current">' + k + '</td>';         k++;       }     }     i++;   }while(i <= lastDateOfMonth);   // Closes table   html += '</table>';   // Write HTML to the div   document.getElementById(this.divId).innerHTML = html; }; // On Load of the window window.onload = function() {   // Start calendar   var c = new Cal("divCal");			   c.showcurr();   // Bind next and previous button clicks   getId('btnNext').onclick = function() {     c.nextMonth();   };   getId('btnPrev').onclick = function() {     c.previousMonth();   }; } // Get element by id function getId(id) {   return document.getElementById(id); }

Setelah Semuanya tersimpan Maka hasilnya adalah sebagai Berikut :

Cara Membuat Kalender Menggunakan Html dan CSS
1 Shares:
Leave a Reply

Your email address will not be published.

You May Also Like