Dasar JavaScript Kalender

One of the things that you can do with Javascript is create a calendar that will automatically show the entire month, and highlight the current day of the month. Salah satu hal yang dapat Anda lakukan dengan Javascript adalah membuat kalender yang secara otomatis akan menampilkan seluruh bulan, dan menyoroti hari saat bulan. This may seem like a complicated task to do, but if we just break down what we need to have in order to make a monthly calendar it is not that hard of a task. Hal ini mungkin tampak seperti tugas yang rumit untuk melakukannya, tetapi jika kita sekadar memecah apa yang perlu kita miliki untuk membuat kalender bulanan itu tidak sulit tugas.

First, let's look at what variables are needed for the calendar. Pertama, mari kita lihat apa variabel yang diperlukan untuk kalender. We know we need the current month, day, and year. Kita tahu kita perlu bulan berjalan, hari, dan tahun. These are simple to get with date functions in JavaScript. Ini adalah sederhana untuk mendapatkan dengan fungsi tanggal dalam JavaScript. Here is how we would get those variables. Berikut adalah bagaimana kita akan mendapatkan variabel-variabel.

view plain copy to clipboard print ?

var current = new Date(); saat var Tanggal = baru ();
var month = current.getMonth(); var bulan = current.getMonth ();
var day = current.getDate(); var hari = current.getDate ();
var year = current.getFullYear(); var tahun = current.getFullYear ();

With this code we created a new variable called current, which contains the full date at the time the script is ran. Dengan kode ini kami menciptakan sebuah variabel baru yang disebut saat ini, yang berisi tanggal lengkap pada saat script berlari. We then use this variable to get the current month, day, and year. Kami kemudian menggunakan variabel ini untuk mendapatkan bulan berjalan, hari, dan tahun.
Now that we have the current date, we need to find a few other things out, like what day of the week does the first day of the month fall on. Sekarang bahwa kita memiliki tanggal saat ini, kita perlu mencari beberapa hal lainnya keluar, seperti apa hari dalam seminggu tidak hari pertama musim gugur bulan pada. We need to know this information so that we know where to start the first day in the calendar, if not then every month will have its first day of the week start on a Sunday, and we all know that is not correct. Kita perlu tahu informasi ini sehingga kita tahu di mana untuk memulai hari pertama dalam kalender, jika tidak maka setiap bulan akan memiliki hari pertama awal minggu pada hari Minggu, dan kita semua tahu bahwa tidak benar.
To get the day of the week that the month starts on, we need to set the date by using the variables we just created. Untuk mendapatkan hari minggu bulan itu dimulai pada, kita perlu menyetel tanggal dengan menggunakan variabel-variabel baru saja kita buat. But before we do that we have to add one additional variable that will allow us to get the correct month. Tapi sebelum kita melakukan itu kita harus menambahkan satu variabel tambahan yang akan memungkinkan kita untuk mendapatkan bulan yang benar.

view plain copy to clipboard print ?

tempMonth = month +1; tempMonth = bulan +1;

With JavaScript there are some very strange things that happen when working with dates. Dengan JavaScript ada beberapa hal yang sangat aneh yang terjadi ketika bekerja dengan tanggal. If we were to use just the month variable in the code we are about to create, it will make the start of the month begin on the wrong day of the week. Jika kita menggunakan hanya variabel bulan dalam kode kita akan membuat, itu akan membuat awal bulan dimulai pada hari yang salah dalam seminggu. With this new variable, we can now find out when the first day of the month is. Dengan variabel baru, kita sekarang dapat mengetahui kapan hari pertama bulan tersebut.

view plain copy to clipboard print ?

var tempDate = new Date(tempMonth +' 1 ,'+year); var tempDate Tanggal = baru (tempMonth + '1,' + tahun);
var tempweekday= tempDate.getDay(); var tempweekday = tempDate.getDay ();
var tempweekday2 = tempweekday; var tempweekday2 = tempweekday;

What we did was create a new date using the date function. Apa yang kita lakukan adalah membuat tanggal baru dengan menggunakan fungsi tanggal. As you can see we just used the tempMonth value, the number one, and the value for the year variable. Seperti yang Anda lihat kita hanya menggunakan nilai tempMonth, nomor satu, dan nilai untuk variabel tahun. We then use the tempDate to get the day of the week, with the JavaScript function getDay. Kami kemudian menggunakan tempDate untuk mendapatkan hari dalam seminggu, dengan getDay fungsi JavaScript. We also duplicated the variable tempweekday, because we will be working with two copies of this variable later on. Kami juga digandakan tempweekday variabel, karena kita akan bekerja dengan dua salinan dari variabel ini di kemudian hari.
We now need to get how many days there are in the month, that way when we create our loop we have a way to tell the JavaScript to stop the loop. Kita sekarang perlu untuk mendapatkan berapa hari ada di bulan, cara bahwa ketika kita membuat loop kami, kami memiliki cara untuk memberitahu JavaScript untuk menghentikan loop. We can do this with an array. Kita dapat melakukan ini dengan array. In the array we will have all the total days in a month, but this raises an issue. Dalam array kita akan memiliki semua total hari dalam sebulan, tapi ini menimbulkan masalah. February the number of days can change depending on if it is a leap year or not. Februari jumlah hari dapat berubah tergantung pada apakah itu adalah tahun kabisat atau tidak. This is an easy way to solve this issue. Ini adalah cara mudah untuk memecahkan masalah ini. To find out if it is a leap year, we just need to divide the year by four and check to see if there are any remainder.Untuk mengetahui jika itu adalah tahun kabisat, kita hanya perlu membagi tahun dengan empat dan memeriksa untuk melihat apakah ada sisa. Sounds simple enough, but we also have to remember that every 100 years if the year is not divisible by 400, then it is not a leap year. Kedengarannya cukup sederhana, namun kita juga harus ingat bahwa setiap 100 tahun jika tahun tidak habis dibagi oleh 400, maka itu bukanlah tahun kabisat. An example of this is the year 1900. Sebuah contoh dari hal ini adalah tahun 1900. It should have been a leap year, but since it was not divisible by 400, it was not a leap year where as 2000 was. Seharusnya tahun kabisat, tetapi karena tidak dibagi dengan 400, itu bukan tahun kabisat dimana tahun 2000. To get check for this type of leap year, we need to divide the year by 100, and if there is no remainder then divide the year by 400. Untuk mendapatkan cek untuk jenis tahun kabisat, kita perlu membagi tahun dengan 100, dan jika ada sisa tidak maka membagi tahun dengan 400. Once we get this information, we can then get create the array. Setelah kita mendapatkan informasi ini, kita kemudian bisa mendapatkan menciptakan array.

view plain copy to clipboard print ?

if (month == 1){ jika (bulan == 1) {
if ( (year%100!=0) && (year%4==0) || (year%400==0)){ jika ((tahun% 100 = 0) & & (tahun% 4 == 0) | | (tahun% 400 == 0)) {
totalFeb = 29; totalFeb = 29;
}else{ } Else {
totalFeb = 28; totalFeb = 28;
} }
} }
var totalDays = ["31", ""+totalFeb+"","31","30","31","30","31","31","30","31","30","31"]; var totalDays = ["31", "" + totalFeb +""," 31 "," 30 "," 31 "," 30 "," 31 "," 31 "," 30 "," 31 "," 30 " , "31"];

Now lets start to think about how to build the calendar in HTML. Sekarang mari kita mulai berpikir tentang bagaimana membangun kalender dalam HTML. If we look at a calendar, we can see that it is basically a table. Jika kita melihat kalender, kita dapat melihat bahwa pada dasarnya meja. It has rows and columns that the date and days of the week refer to. Ini memiliki baris dan kolom yang tanggal dan hari dalam seminggu lihat. With the variables we have now, we know what day of the week the calendar should start on, but the issue we have now, is how do we get the table to start on that day. Dengan variabel yang kita miliki sekarang, kita tahu apa hari dalam seminggu kalender harus mulai, tapi masalah yang kita miliki sekarang, adalah bagaimana kita mendapatkan meja untuk mulai pada hari itu. Well the value that the getDay function returns is a number between zero and six, or Sunday through Saturday. Nah nilai yang kembali fungsi getDay adalah nomor antara nol, dan enam atau hari Minggu sampai Sabtu. With this information we can create a loop which will add the extra cells for us. Dengan informasi ini kita dapat membuat loop yang akan menambahkan sel tambahan bagi kita.

view plain copy to clipboard print ?

var padding= ""; Padding var = "";
while (tempweekday > 0) sementara (tempweekday> 0)
padding += " Padding + = " "; tempweekday--; } "; Tempweekday -;}

Before the loop we create an empty variable named padding. Sebelum loop kita membuat sebuah bantalan yang bernama kosong variabel. The reason we do this, is so that when we run the loop in our calendar, we do not have an undefined message displayed on the page. Alasan kami melakukan ini, adalah agar ketika kita menjalankan loop dalam kalender kita, kita tidak memiliki pesan terdefinisi ditampilkan pada halaman. We then have the loop. Kami kemudian memiliki loop. The loop is adding empty HTML td tags to the padding variable until tempweekday is no longer greater then 0. Loop adalah menambahkan tag HTML kosong td ke variabel bantalan sampai tempweekday tidak lagi lebih besar maka 0. We are also subtracting one from tempweekday each time the loop is ran. Kami juga mengurangkan satu dari tempweekday setiap kali loop berlari.
Now we will use the array that we created, and the copy of tempweekday to create the rest of the calendar. Sekarang kita akan menggunakan array yang kita buat, dan salinan tempweekday untuk menciptakan sisa dari kalender.

view plain copy to clipboard print ?

dayAmount = totalDays[month]; dayAmount = totalDays [bulan];
i = "0"; i = "0";
while (i <= dayAmount){ sementara (i <= dayAmount) {
if (tempweekday2 > 6){ jika (tempweekday2> 6) {
tempweekday2 = 0; tempweekday2 = 0;
padding += "</tr><tr>"; Padding + = "</ tr> <tr>";
} }
if (i == day){ jika (i == hari) {
padding +="<td class='currentday'>"+i+"</td>"; Padding + = "<td class='currentday'>" + i + "</ td>";
}else{ } Else {
padding +="<td class='currentmonth'>"+i+"</td>"; Padding + = "<td class='currentmonth'>" + i + "</ td>";
} }
tempweekday2++; tempweekday2 + +;
i++; i + +;
} }

At first this looks very confusing, but it that confusing once we break it down. Pada awalnya ini terlihat sangat membingungkan, tetapi yang membingungkan sekali kita memecahnya. The first part of this section of code just gets the amount of days that are in the current month. Bagian pertama dari bagian kode hanya mendapatkan jumlah hari yang berada di bulan saat ini. We also create a variable just for counting. Kami juga membuat sebuah variabel hanya untuk menghitung. Then comes the while loop. Kemudian datang loop sementara. This loop will run until our counting variable (i) is equal to the number of days (dayAmount) in the month. Loop ini akan berjalan hingga variabel kita menghitung (i) adalah sama dengan jumlah hari (dayAmount) di bulan. If that was the only part of the loop, then our table would just be one large row of numbers, to actually make the table's rows, we also have to keep track of the day of the week that we are currently on. Kalau itu satu-satunya bagian dari loop, maka meja kami hanya akan menjadi satu baris besar nomor, untuk benar-benar membuat baris tabel, kita juga harus melacak hari minggu bahwa kita saat ini. That is where the first if statement comes into play in the loop. Itu adalah di mana yang pertama jika pernyataan datang ke dalam bermain dalam lingkaran. Tempweekday2 holds the current day of the week, and we know that in JavaScript the days of the week go from 0 (Sunday) to 6 (Saturday). Tempweekday2 memegang hari saat ini dalam seminggu, dan kita tahu bahwa dalam JavaScript hari dalam seminggu pergi dari 0 (Minggu) sampai 6 (Sabtu). With this, we can tell tempweekday2 to reset to zero when ever it's value is greater then 6. Dengan ini, kita dapat memberitahu tempweekday2 untuk me-reset ke nol ketika pernah, nilainya lebih besar maka 6. We also add the HTML tags to stop and create a new row to our padding variable. Kami juga menambahkan tag HTML untuk berhenti dan membuat baris baru untuk variabel bantalan kami.
The next if statement will is what actually displays the number for the days. Berikutnya jika pernyataan adalah apa yang sebenarnya akan menampilkan nomor untuk hari. In order to make the current day of the month stand out, we need this statement. Dalam rangka untuk membuat hari saat bulan menonjol, kita perlu pernyataan ini. What it is doing is checking to see if our counter (i) is equal to the current day that we got at the start of the script. Apa yang dilakukannya adalah memeriksa untuk melihat apakah counter kami (i) adalah sama dengan hari ini yang kita peroleh pada awal script. If so it is going to apply a different CSS class to that cell. Jika demikian itu akan menerapkan kelas CSS yang berbeda untuk sel tersebut. If the counter and day are not equal then we create a cell with a different CSS class. Jika counter dan hari tidak sama maka kita membuat sebuah sel dengan kelas CSS yang berbeda. At the end we add one to both the tempweekday2 and i values. Pada akhirnya kami menambahkan satu untuk kedua tempweekday2 dan saya nilai.
Now that we have the body of the calendar created, we need to create the header of the calendar. Sekarang bahwa kita memiliki tubuh kalender dibuat, kita perlu menciptakan header kalender. This will be simple to do, it is all HTML. Ini akan menjadi sederhana untuk dilakukan, itu semua HTML. In the calendar's header we want to display the name of the month, instead of a number. Dalam header kalender kita ingin menampilkan nama bulan, bukan nomor. To do this we will create an array. Untuk melakukan ini kita akan membuat sebuah array. Just like we did for the number of days in the month, we will use the month variable to pull the month name from the array. Sama seperti yang kita lakukan untuk jumlah hari dalam sebulan, kita akan menggunakan variabel bulan untuk menarik nama bulan dari array.

view plain copy to clipboard print ?

var monthNames = ["Jan","Feb","March","April","May","June","July","Aug","Sept","Oct","Nov", "Dec"]; monthNames var = ["Jan", "Februari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober", "November", "Desember "];
var calendarTable = "<table class='calendar'> <tr class='currentmonth'><th colspan='7'>"+monthNames[month]+" "+ year +"</th></tr>"; calendarTable var = "<table class='calendar'> <tr class='currentmonth'> <th colspan='7'>" + monthNames [bulan] + "" + tahun + "</ th> </ tr>" ;
calendarTable +="<tr class='weekdays'> <td>Sun</td> <td>Mon</td> <td>Tues</td> <td>Wed</td> <td>Thurs</td> <td>Fri</td> <td>Sat</td> </tr>"; calendarTable + = "<tr class='weekdays'> <td> Sun </ td> <td> Sen </ td> <td> Sel </ td> <td> Rabu </ td> <td> Kam </ td> <td> Jum </ td> <td> Sab </ td> </ tr> ";
calendarTable += "<tr>"; calendarTable + = "tr";

As you can see we created a table with the name of the month, and year at the top, then created a new row in the table with the days of the week. Seperti yang Anda lihat kita buat sebuah tabel dengan nama bulan, dan tahun di atas, kemudian menciptakan baris baru dalam tabel dengan hari dalam seminggu. We also started a third row. Kami juga mulai baris ketiga. This is where the loop that was filling in the table comes into play. Ini adalah di mana loop yang mengisi tabel datang ke dalam bermain. After creating this header we can add the padding value to the calendarTable variable to fill in the calendar, and then close the table. Setelah membuat header ini kita dapat menambahkan nilai padding untuk variabel calendarTable untuk mengisi kalender, dan kemudian tutup meja.

view plain copy to clipboard print ?

calendarTable += padding; calendarTable + = bantalan;
calendarTable += "</tr></table>" + month; calendarTable + = "</ tr> </ table>" + bulan;
document.getElementById("calendar").innerHTML=calendarTable; . document.getElementById ("kalender") innerHTML = calendarTable;

Along with finishing the table, we have also created a way to display the table where we would like on the page, but telling the JavaScript to write the contents of calendarTable in the HTML tag with an id of calendar. Seiring dengan finishing meja, kami juga menciptakan sebuah cara untuk menampilkan tabel dimana kita ingin pada halaman, tetapi mengatakan JavaScript untuk menulis isi calendarTable pada tag HTML dengan id dari kalender.
In the loop that we created to make fill in the calendar with the number of days in the month, we put the current day in a different CSS class then the other days of the month. Dalam loop yang kita buat untuk membuat mengisi kalender dengan jumlah hari dalam sebulan, kami menempatkan hari ini di kelas CSS yang berbeda maka hari-hari lain bulan. This was to distinguish the current day of the month, and make it stand out. Ini adalah untuk membedakan hari saat bulan, dan membuatnya menonjol. This is what that CSS looks like. Ini adalah apa yang terlihat seperti CSS.

view plain copy to clipboard print ?

<style> <style>
.currentmonth{ . Currentmonth {
color: blue; warna: biru;
text-align: center; text-align: center;
} }
.currentday{ . Currentday {
border: 1px solid black; border: 1px hitam pekat;
color: #00FF00; color: # 00FF00;
text-align: center; text-align: center;
} }
</style> </ Style>

Let's put all of the code together to see what it looks like. Mari kita meletakkan semua kode bersama-sama untuk melihat apa yang tampak seperti.

view plain copy to clipboard print ?

<style> .currentmonth{ color: blue; text-align: center; } .currentday{ border: 1px solid black; color: #00FF00; text-align: center; } </style> <script language="JavaScript"> function calendar(){ var current = new Date(); var month = current.getMonth(); var day = current.getDate(); var year = current.getFullYear(); tempMonth = month +1; var tempDate = new Date(tempMonth +' 1 ,'+year); var tempweekday= tempDate.getDay(); var tempweekday2 = tempweekday; if (month == 1){ if ( (year%100!=0) && (year%4==0) || (year%400==0)){ totalFeb = 29; }else{ totalFeb = 28; } } var totalDays = ["31", ""+totalFeb+"","31","30","31","30","31","31","30","31","30","31"]; var padding= ""; while (tempweekday > 0) padding += "<td class='premonth'></td>"; tempweekday--; } dayAmount = totalDays[month]; i = "0"; while (i <= dayAmount){ if (tempweekday2 > 6){ tempweekday2 = 0; padding += "</tr><tr>"; } if (i == day){ padding +="<td class='currentday'>"+i+"</td>"; }else{ padding +="<td class='currentmonth'>"+i+"</td>"; } tempweekday2++; i++; } var monthNames = ["Jan","Feb","March","April","May","June","July","Aug","Sept","Oct","Nov", "Dec"]; var calendarTable = "<table class='calendar'> <tr class='currentmonth'><th colspan='7'>"+monthNames[month]+" "+ year +"</th></tr>"; calendarTable +="<tr class='weekdays'> <td>Sun</td> <td>Mon</td> <td>Tues</td> <td>Wed</td> <td>Thurs</td> <td>Fri</td> <td>Sat</td> </tr>"; calendarTable += "<tr>"; } </script> <style> currentmonth {color: blue; text-align: center;}.. currentday {border: 1px solid hitam, warna: # 00FF00; text-align: center;} </ style> <script language="JavaScript"> fungsi kalender () {var sekarang = new Date (); var bulan = current.getMonth (); var hari = current.getDate (); var tahun = current.getFullYear (); tempMonth = bulan +1; var tempDate = baru Tanggal (tempMonth + '1,' + tahun); var tempweekday = tempDate.getDay (); var tempweekday2 = tempweekday, jika (bulan == 1) {if ((tahun% 100 = 0) & & (tahun% 4 =! = 0) | | (tahun% 400 == 0)) {totalFeb = 29;} else {totalFeb = 28;}} var totalDays = ["31", "" + totalFeb +""," 31 "," 30 " , "31", "30", "31", "31", "30", "31", "30", "31"]; var bantalan = ""; sementara (tempweekday> 0) bantalan + = " <td class='premonth'> </ td> "; tempweekday -;} dayAmount = totalDays [bulan]; i =" 0 ", sedangkan (i <= dayAmount) {if (tempweekday2> 6) {tempweekday2 = 0 ; bantalan + = "</ tr> <tr>";} if (i == hari) {padding + = "<td class='currentday'>" + i + "</ td>";} else {padding + = "<td class='currentmonth'>" + i + "</ td>";} tempweekday2 + +; i + +;} var monthNames = ["Jan", "Februari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober", "November", "Desember"]; var calendarTable = "<table class='calendar'> <tr class='currentmonth'> < colspan = '7 th '> "+ monthNames [bulan] +" "+ tahun +" </ th> </ tr> "; calendarTable + =" <tr class='weekdays'> <td> Sun </ td> <td> Sen </ td> <td> Sel </ td> <td> Rabu </ td> <td> Kam </ td> <td> Jum </ td> <td> Sab </ td> </ tr> "; calendarTable + =" tr ";} </ script>

In order for the calendar to be generated when the user loads the page we have put all of the JavaScript code into a function named calendar, and will use the onLoad event to run the script. Dalam rangka untuk kalender yang akan dihasilkan ketika pengguna load halaman kita telah menempatkan semua kode JavaScript ke sebuah fungsi bernama kalender, dan akan menggunakan event onLoad untuk menjalankan script. The onLoad will be added to the body tag of the HTML document. OnLoad akan ditambahkan ke tag tubuh dokumen HTML.
You can see an example of this code here . Anda dapat melihat contoh kode ini di sini . The example code has additional JavaScript applied to it that was from other tutorials on Code-Sucks. Contoh kode JavaScript tambahan telah diterapkan untuk itu yang dari tutorial lain di Kode-Sucks. Also, I have tested this code works in Firefox, and IE for Windows. Juga, saya telah diuji kode ini bekerja di Firefox, dan IE untuk Windows. It also works for Firefox on Linux, but Opera 9.50 Beta 1 (the 64-bit edition) has issues getting the correct day the month starts on. Ia juga bekerja untuk Firefox di Linux, tapi Opera 9.50 Beta 1 (edisi 64-bit) memiliki masalah mendapatkan hari yang benar dimulai pada bulan.

Kamis, 01 Maret 2012

java script

Dasar JavaScript Kalender

Tidak ada komentar:

Posting Komentar

Out Sponsor

translate to your countri

Categories

Mengenai Saya

Pengikut

Feedjit live traffic

Total Tayangan Halaman

Arsip Blog

Cari Blog Ini