Takvim Kodunu paylaşacağım.
Head kodu arasına eklenecek kısım
<style>
.prevmonth{
color: gray;
text-align: center;
}
.currentmonth{
color: blue;
text-align: center;
}
.currentday{
border: 1px solid black;
color: #00FF00;
background: #0000FF;
text-align: center;
}
.calendar td{
padding: 2px;
width: 50px;
}
.currentmonth th{
background-color: #000000;
color: #FFFFFF;
text-align: center;
}
.startdays{
background: #0000FF;
color: #FFFFFF;
text-align: center;
}
</style>
<script>
var mydate = new Date();
var day = mydate.getDate();
var year = mydate.getFullYear();
var monthNames = ["Ocak","Şubat","Mart","Nisan","Mayıs","Haziran","Temmuz","Ağustos","Eylül","Ekim","Kasım", "Aralık"];
function calendar(month){
var daysinWeek = 7;
var calendarbuild;
if (month){
mynewdate = new Date(month + day + year);
}else{
mynewdate = new Date();
}
var tempyear = mynewdate.getFullYear();
var tempdate = new Date((mynewdate.getMonth()+1) +' 1 ,'+tempyear);
var startday = tempdate.getDay();
var w = startday;
var tempmonth = tempdate.getMonth();
var mynewmonth = mynewdate.getMonth();
var mynewyear = mynewdate.getFullYear();
if ((tempyear%100!=0) && (tempyear%4==0) || (tempyear%400==0)){
var totalFeb = 29;
}else{
var totalFeb = 28;
}
var totalDays = ["31", ""+totalFeb+"","31","30","31","30","31","31","30","31","30","31"]
calendarbuild = "<table class='calendar'>";
calendarbuild += "<tr class='currentmonth'><th class='month'><span onclick='calendar(mydate.setMonth(mydate.getMonth()-1))' title='Previous Month' alt='Previous Month'><< </span></th>";
calendarbuild += "<th class='calendar_month' colspan='5'>"+monthNames[mynewmonth]+" "+mynewyear+"</th>";
calendarbuild += "<th><span onclick='calendar(mydate.setMonth(mydate.getMonth()+1))'> >></span></th></tr>";
calendarbuild += "<tr class='startdays'> <td>Pazar</td> <td>Paztesi</td> <td>Salı</td> <td>Çar</td> <td>Per</td> <td>Cum</td> <td>Cum</td> </tr>";
calendarbuild += "<tr>";
var prevMonth = (mynewdate.getMonth()-1);
var prevMonthdays = totalDays[prevMonth];
if (prevMonth < 0){
var prevMonthreverse = 31 - startday +1;
}else{
var prevMonthreverse = prevMonthdays - startday + 1;
}
var nextMonth = 1;
if (startday != 0){
while (startday > 0){
calendarbuild += "<td class='prevmonth'>"+prevMonthreverse+" </td>";
prevMonthreverse++;
startday --;
}
}
var d = 1
while (d <=totalDays[mynewdate.getMonth()]){
if (w > 6){
w = 0;
calendarbuild += "</tr><tr>";
}
if (d == day){
calendarbuild += "<td class='currentday' onMouseover='this.style.background=\"#00FF00\"; this.style.color=\"#0000FF\"' onMouseOut='this.style.background=\"#0000FF\"; this.style.color=\"#00FF00\"'>"+d+"</td>";
}else{
calendarbuild += "<td class='currentmonth' onMouseOver='this.style.background=\"#0000FF\"; this.style.color=\"#FFFFFF\"' onMouseOut='this.style.background=\"#FFFFFF\"; this.style.color=\"#0000FF\"'>"+d+"</td>";
}
d++;
w++;
}
while (w <= 6){
calendarbuild += "<td class='prevmonth'>"+nextMonth+"</td>";
nextMonth++;
w ++;
}
calendarbuild += "</tr></table>";
document.getElementById('calendar').innerHTML = calendarbuild;
}
</script>
html kodları
<div id="calendar"> </div>
<script type="text/javascript">calendar()</script>
kodların açıklaması
<script>
var mydate = new Date(); // şimdiki tarih
var day = mydate.getDate(); // şimdiki tarihi çekiyoruz.
var year = mydate.getFullYear(); şimdiki Yılı çekiyoruz.
var monthNames = ["Ocak","Şubat","Mart","Nisan","Mayıs","Haziran","Temmuz","Ağustos","Eylül","Ekim","Kasım", "Aralık"]; //şimdiki Ayların isimlerini listeliyoruz.
function calendar(month){ //takvimin ayları ile ilgili fonksiyonu başlatıyoruz.
var daysinWeek = 7; //haftanın 7 gün olduğunu belirtiyoruz.
var calendarbuild;
if (month){ //eğer ay
mynewdate = new Date(month + day + year);
}else{
mynewdate = new Date();
}
var tempyear = mynewdate.getFullYear();
var tempdate = new Date((mynewdate.getMonth()+1) +' 1 ,'+tempyear);
var startday = tempdate.getDay();
var w = startday;
var tempmonth = tempdate.getMonth();
var mynewmonth = mynewdate.getMonth();
var mynewyear = mynewdate.getFullYear();
if ((tempyear%100!=0) && (tempyear%4==0) || (tempyear%400==0)){
var totalFeb = 29;
}else{
var totalFeb = 28;
}
var totalDays = ["31", ""+totalFeb+"","31","30","31","30","31","31","30","31","30","31"]
calendarbuild = "<table class='calendar'>";
calendarbuild += "<tr class='currentmonth'><th class='month'><span onclick='calendar(mydate.setMonth(mydate.getMonth()-1))' title='Previous Month' alt='Previous Month'><< </span></th>";
calendarbuild += "<th class='calendar_month' colspan='5'>"+monthNames[mynewmonth]+" "+mynewyear+"</th>";
calendarbuild += "<th><span onclick='calendar(mydate.setMonth(mydate.getMonth()+1))'> >></span></th></tr>";
calendarbuild += "<tr class='startdays'> <td>Pazar</td> <td>Paztesi</td> <td>Salı</td> <td>Çar</td> <td>Per</td> <td>Cum</td> <td>Cum</td> </tr>";
calendarbuild += "<tr>";
var prevMonth = (mynewdate.getMonth()-1);
var prevMonthdays = totalDays[prevMonth];
if (prevMonth < 0){
var prevMonthreverse = 31 - startday +1;
}else{
var prevMonthreverse = prevMonthdays - startday + 1;
}
var nextMonth = 1;
if (startday != 0){
while (startday > 0){
calendarbuild += "<td class='prevmonth'>"+prevMonthreverse+" </td>";
prevMonthreverse++;
startday --;
}
}
var d = 1
while (d <=totalDays[mynewdate.getMonth()]){
if (w > 6){
w = 0;
calendarbuild += "</tr><tr>";
}
if (d == day){
calendarbuild += "<td class='currentday' onMouseover='this.style.background=\"#00FF00\"; this.style.color=\"#0000FF\"' onMouseOut='this.style.background=\"#0000FF\"; this.style.color=\"#00FF00\"'>"+d+"</td>";
}else{
calendarbuild += "<td class='currentmonth' onMouseOver='this.style.background=\"#0000FF\"; this.style.color=\"#FFFFFF\"' onMouseOut='this.style.background=\"#FFFFFF\"; this.style.color=\"#0000FF\"'>"+d+"</td>";
}
d++;
w++;
}
while (w <= 6){
calendarbuild += "<td class='prevmonth'>"+nextMonth+"</td>";
nextMonth++;
w ++;
}
calendarbuild += "</tr></table>";
document.getElementById('calendar').innerHTML = calendarbuild;
}
</script>
Hiç yorum yok:
Yorum Gönder