Membuat Widget Calender Menggunakan Javascript
Assalamualaikum wr.wb
Pagi kawan, pada hari ini saya akan sharing cara membuat widget calender menggunakan javascript
A. Pengertian
Widget adalah contoh aplikasi pelengkap dan tambahan yang tidak memonopoli intensi pengguna. Artikel bertopik perangkat lunak ini adalah sebuah rintisan.
B. Latar Belakang
Kalender yang akan dirancang bertemakan ergonomi, dimana dalam pembuatan display ini bertujuan agar para pembaca dapat mengetahui dan memahami informasi yang disampaikan serta semenarik mungkin warna yang digunakan agar pembaca tertarik dan minat untuk melihat kalender tersebut
C. Maksud dan Tujuan
membuat widget kalender untuk fitur tambahan di website php
D. Alat dan Bahan
- Komputer / Laptop
- Text Editor
E. Langkah - langkah
1. Membuat struktur folder sebagai berikut :
2. Mengisi file " index.html " dengan script dibawah ini .
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Calender</title>
<link href='http://fonts.googleapis.com/css?family=Raleway:700,500,900' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<div class="curr-month"><b>november</b></div>
<div class="all-days">
<ul>
<li>sun</li>
<li>mon</li>
<li>tue</li>
<li>wed</li>
<li>thu</li>
<li>fri</li>
<li>sat</li>
</ul>
</div>
<div class="all-date">
<ul>
</ul>
</div>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
3. Mengisi file " index.js " dengan script dibawah ini .
var curDate = (new Date()).getDate();
var curMonth = (new Date()).getMonth();
var curYear = (new Date()).getFullYear();
var startDay = (new Date(curYear, curMonth, 1)).getDay();
var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var noofdays = ["31", "29", "31", "30", "31", "30", "31", "31", "30", "31", "30", "31"];
var prevMonth = noofdays[curMonth - 1];
if (curMonth == 11) {
prevMonth = noofdays[0]
} else if (curMonth == 0) {
prevMonth = noofdays[11]
};
var totalDays = noofdays[curMonth];
var counter = 0;
var precounter = prevMonth - (startDay - 1);
var rightbox = 6;
var flag = true;
jQuery('.curr-month b').text(months[curMonth]);
for (var i = 0; i < 42; i++) {
if (i >= startDay) {
counter++;
if (counter > totalDays) {
counter = 1;
flag = false;
}
if (flag == true) {
jQuery('.all-date ul').append('<li class="monthdate">' + counter + '</li>');
} else {
jQuery('.all-date ul').append('<li style="opacity:.8">' + counter + '</li>');
}
} else {
jQuery('.all-date ul').append('<li style="opacity:.8">' + precounter + '</li>');
precounter++;
}
if (i == rightbox) {
jQuery(jQuery('.all-date ul li')[rightbox]).addClass("b-right");
rightbox = rightbox + 7;
}
if (i > 34) {
jQuery(jQuery('.all-date ul li')[i]).addClass("b-bottom");
}
if ((jQuery(jQuery('.all-date ul li')[i]).text() == curDate) && (jQuery(jQuery('.all-date ul li')[i]).css('opacity') == 1)) {
jQuery(jQuery('.all-date ul li')[i]).css({
"background-color": "#02548b",
"color": "#fff"
});
}
}
4. Agar tampilannya menarik kita tambahkan script CSS di file " Style.css " .
body {
background-color: #ccc;
}
* {
margin: 0px;
padding: 0px;
}
.container {
margin: 0 auto;
height: 487px;
width: 421px;
background-color: #000;
box-shadow: 0 10px 20px 5px rgba(0, 0, 0, .2);
font-family: 'Raleway', sans-serif;
text-transform: uppercase;
}
.curr-month {
width: 100%;
height: 80px;
background-image: linear-gradient(to top, #3498DB 70px, #02548b 70px);
color: #fff;
font-size: 40px;
text-align: center;
line-height: 80px;
}
.all-days {
width: 100%;
height: 40px;
background-color: #fff;
float: left;
}
ul {
list-style: none;
display: block;
height: 30px;
width: 421px;
margin: 0 auto;
float: left;
}
ul li {
float: left;
width: 60px;
text-align: center;
/*padding:10px 0px;*/
line-height: 41px;
}
.all-date {
width: 100%;
height: 305px;
float: left;
}
.all-date li {
height: 60px;
width: 59px;
line-height: 60px;
border-top: 1px solid #fff;
border-left: 1px solid #fff;
background-color: #ccc;
}
.b-bottom {
border-bottom: 1px solid #fff;
}
.b-right {
border-right: 1px solid #fff;
}
.all-date li.monthdate:hover {
background-color: #02548b;
color: #fff;
}
F. Referensi
G. Hasil dan Kesimpulan
kalender adalah sebuah sistem untuk memberi nama pada sebuah periode waktu (seperti hari sebagai contohnya). Nama-nama ini dikenal sebagai tanggal kalender. Tanggal ini bisa didasarkan dari gerakan-gerakan benda angkasa seperti matahari dan bulan. Kalender juga dapat mengacu kepada alat yang mengilustrasikan sistem tersebut (sebagai contoh, sebuah kalender dinding).
Yak, itu tadi penjelasan singkat tentang cara membuat widget calender menggunakan javascript, jangan lupa untuk kunjungi terus blog saya untuk mengetahui kelanjutan materi ini Sekian Termiakasih
Wassalamu'alaikum Wr.Wb