• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Javascript Kalender: Aktueller Tag soll Border haben

A

Adroxxx

Neues Mitglied
Hallo,

ich habe hier einen Kalender und will, dass in der Tabelle um den aktuellen Tag ein Border erscheint.

Das ist meine .js Datei mit den Funktionen.
Code: 
(function($) { 
   
    function calendarWidget(el, params) { 
        
        var now   = new Date();
        var thismonth = now.getMonth();
        var thisyear  = now.getYear() + 1900;
        
        var opts = {
            month: thismonth,
            year: thisyear 
        };
        
        $.extend(opts, params);
        
        var monthNames = ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'];
        var dayNames = ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'];
        month = i = parseInt(opts.month);
        year = parseInt(opts.year);
        var m = 0;
        var table = '';
        
            if (month == 11) {
                var next_month = '<a href="?month=' + 1 + '&amp;year=' + (year + 1) + '" title="' + monthNames[0] + ' ' + (year + 1) + '">' + monthNames[0] + ' ' + (year + 1) + '</a>';
            } else {
                var next_month = '<a href="?month=' + (month + 2) + '&amp;year=' + (year) + '" title="' + monthNames[month + 1] + ' ' + (year) + '">' + monthNames[month + 1] + ' ' + (year) + '</a>';
            }
                
            if (month == 0) {
                var prev_month = '<a href="?month=' + 12 + '&amp;year=' + (year - 1) + '" title="' + monthNames[11] + ' ' + (year - 1) + '">' + monthNames[11] + ' ' + (year - 1) + '</a>';
            } else {
                var prev_month = '<a href="?month=' + (month) + '&amp;year=' + (year) + '" title="' + monthNames[month - 1] + ' ' + (year) + '">' + monthNames[month - 1] + ' ' + (year) + '</a>';
            }        
                
            table += ('<h3 id="current-month">'+monthNames[month]+' '+year+'</h3>');
            table += ('<table class="calendar-month " ' +'id="calendar-month'+i+' " cellspacing="0">');    
        
            table += '<tr>';
            
            for (d=0; d<7; d++) {
                table += '<th class="weekday">' + dayNames[d] + '</th>';
            }
            
            table += '</tr>';
        
            var days = getDaysInMonth(month,year);
            var firstDayDate=new Date(year,month,1);
            var firstDay=firstDayDate.getDay();
            
            var prev_days = getDaysInMonth(month,year);
            var firstDayDate=new Date(year,month,1);
            var firstDay=firstDayDate.getDay();
            
            var prev_m = month == 0 ? 11 : month-1;
            var prev_y = prev_m == 11 ? year - 1 : year;
            var prev_days = getDaysInMonth(prev_m, prev_y);
            firstDay = (firstDay == 0 && firstDayDate) ? 7 : firstDay;
    
            var i = 0;
            for (j=0;j<42;j++){
              
              if ((j<firstDay)){
                table += ('<td class="other-month"><span class="day">'+ (prev_days-firstDay+j+1) +'</span></td>');
              } else if ((j>=firstDay+getDaysInMonth(month,year))) {
                i = i+1;
                table += ('<td class="other-month"><span class="day">'+ i +'</span></td>');             
              }else{
                table += ('<td class="current-month day'+(j-firstDay+1)+'"><span class="day">'+(j-firstDay+1)+'</span></td>');
              }
              if (j%7==6)  table += ('</tr>');
            }
            
            table += ('</table>');

        el.html(table);
    }
    
    function getDaysInMonth(month,year)  {
        var daysInMonth=[31,28,31,30,31,30,31,31,30,31,30,31];
        if ((month==1)&&(year%4==0)&&((year%100!=0)||(year%400==0))){
          return 29;
        }else{
          return daysInMonth[month];
        }
    }
 
    $.fn.calendarWidget = function(params) {    
        calendarWidget(this, params);        
        return this; 
    }; 
})(jQuery);

Eingebunden wird der Kalender so (und es funktioniert auch):
HTML: 
<html>
<head>
<title>Kalender</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="kalender.js"></script>
<script type="text/javascript">
$(function() {
    $('#calendar').calendarWidget({month: 1,year: 2012});
});
</script>

<style type="text/css">
td, th {
    border-left: 1px solid #999;
    border-bottom: 1px solid #999;
    width: 40px;
    padding: 10px 0;
    text-align: center;
}

table {
    border-right: 1px solid #999;
    border-top: 1px solid #999;
}

th {
    background: #666;
    color: #fff;
}

.other-month {
    background: #eee;
}

#calendar {
    
}
</style>
</head>

<body></body>
</html>

2s1qiyd.jpg


Kann mir jemand helfen? ^^
 
Füge im onload-Script das hier hinzu:

Code: 
    var now = new Date();
    var day = now.getDate();
    $('.day' + day).addClass('today');

Die Klasse kannst du dann ganz normal im CSS formatieren.
 
Ah, vielen Dank. Funktioniert prima.

Eine Frage noch: Kannst du mir sagen, was ich ändern muss, damit Montag der erste Tag der Woche ist statt dem Sonntag?

Bin dann auch nicht mehr lästig. :D
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben