Avatar billede mireigi Novice
08. december 2008 - 10:24 Der er 2 kommentarer og
1 løsning

Problemer med JS kalender

Hej eksperter.

Jeg har, med hjælp fra nogle af jer herinde, udviklet min egen JS kalender, og den fungerer fint... Lige bortset fra at visse måneder vises helt forkert.

Normalt vises månederne som:
FF FD FD FD FD FD FD
DD DD DD DD DD DD DD
DD DD DD DD DD DD DD
DD DD DD DD DD DD DD
DD DN DN DN DN DN DN
DN DN DN DN DN DN DN

FF = Forrige måneds dage; gråtonet tekst
FD = Forrige eller Denne måneds dage; hhv. gråtonet og sort tekst
DD = Denne måneds dage; sort tekst
DN = Denne eller Næste måneds dage; hhv. sort og gråtonet tekst

Problemer er så, at nogle gange vises én eller flere måneder i træk som udelukkende gråtonet tekst, og det første ugenummer for den pågældende måned er 1 bagud (fx uge 21 i stedet for uge 22). Ligeledes er der nogle gange vist 7 uger i stedet for 6 uger.

Jeg poster den relevante kode i det efterfølgende indlæg.

Her er nogle billeder af kalenderen.

Korrekt:
http://www.humyo.com/F/6451231-277075529

Forkert:
http://www.humyo.com/F/6451231-277075533

For mange uger:
http://www.humyo.com/F/6451231-277075545
Avatar billede mireigi Novice
08. december 2008 - 10:25 #1
<script language="javascript" type="text/javascript">
Date.prototype.getWeek = function (dowOffset) {
    /*getWeek() was developed by Nick Baicoianu at MeanFreePath: http://www.meanfreepath.com */

    dowOffset = typeof(dowOffset) == 'number' ? dowOffset : 0; //default dowOffset to zero
    var newYear = new Date(this.getFullYear(),0,1);
    var day = newYear.getDay() - dowOffset; //the day of week the year begins on
    day = (day >= 0 ? day : day + 7);
    var daynum = Math.floor((this.getTime() - newYear.getTime() - (this.getTimezoneOffset()-newYear.getTimezoneOffset())*60000)/86400000) + 1;
    var weeknum;
    //if the year starts before the middle of a week
    if(day < 4)
    {
        weeknum = Math.floor((daynum+day-1)/7) + 1;
        if(weeknum > 52)
        {
            nYear = new Date(this.getFullYear() + 1,0,1);
            nday = nYear.getDay() - dowOffset;
            nday = nday >= 0 ? nday : nday + 7;
            /*if the next year starts before the middle of
            the week, it is week #1 of that year*/
            weeknum = nday < 4 ? 1 : 53;
        }
    }
    else
    {
        weeknum = Math.floor((daynum+day-1)/7);
    }
    return weeknum;
};

    function DaysInMonth(year, month)
    {
        return 32 - new Date(year, month, 32).getDate();
    }
   
    /*getFirstDayInWeek was developed by OleBole at Eksperten : http://www.eksperten.dk */
    function getFirstDayInWeek(nWeek, nYear)
    {
        var nDayCoeff = 24*60*60*1000;
        nYear = typeof nYear=="number" ? nYear : new Date().getFullYear();
        var oTestDate = new Date(nYear, 0, 1);
       
        return new Date( (oTestDate.getTime()-((oTestDate.getDay()-1)*nDayCoeff))+((nWeek-1)*(7*nDayCoeff)) );
    }
   
    function checkForActiveDate(date)
    {
        for (var i = 0; i < activeDays.length; i++)
        {
            if (activeDays[i].getTime() == date.getTime())
                return true;
        }
        return false;
    }

    var today = new Date();
    var curYear = today.getFullYear();
    var curMonth = today.getMonth();

    var months = new Array();
    months[0] = "Januar";
    months[1] = "Februar";
    months[2] = "Marts";
    months[3] = "April";
    months[4] = "Maj";
    months[5] = "Juni";
    months[6] = "Juli";
    months[7] = "August";
    months[8] = "September";
    months[9] = "Oktober";
    months[10] = "November";
    months[11] = "December";
   
    var activeDays = new Array();
    activeDays[0] = new Date(2008, 9, 12);
    activeDays[1] = new Date(2009, 0, 1);
   
    function ViewDays(year, month)
    {
        var datoNu = new Date(year, month, 1);
        var datoDenne = new Date(datoNu.getFullYear(), datoNu.getMonth(), 1);
        var datoForrige = new Date(datoNu.getFullYear(), datoNu.getMonth(), 0);
        var datoNaeste = new Date(datoNu.getFullYear(), datoNu.getMonth(), (DaysInMonth(datoDenne.getFullYear(), datoDenne.getMonth())+1));
        var output = "";
       
        document.getElementById("previous").innerHTML = "<a style='cursor:pointer;' onclick='ViewDays(" + datoForrige.getFullYear() + ", " + datoForrige.getMonth() + ")'>&lt;&lt;</a>";
        document.getElementById("current").innerHTML = "<a style='cursor:pointer;' onclick='ViewMonths(" + datoDenne.getFullYear() + ")'>" + months[datoDenne.getMonth()] + " " + datoDenne.getFullYear() + "</a>";
        document.getElementById("next").innerHTML = "<a style='cursor:pointer;' onclick='ViewDays(" + datoNaeste.getFullYear() + ", " + datoNaeste.getMonth() + ")'>&gt;&gt;</a>";
       
        output += "<table width='180' border='0' cellspacing='0' cellpadding='0'>";
            output += "<tr align='right' valign='middle' height='17'>";
                output += "<td width='22'>&nbsp;</td>"
                output += "<td width='22' style='border-bottom:solid 1px black; padding-right:3px;'>M</td>";
                output += "<td width='22' style='border-bottom:solid 1px black; padding-right:3px;'>T</td>";
                output += "<td width='22' style='border-bottom:solid 1px black; padding-right:3px;'>O</td>";
                output += "<td width='22' style='border-bottom:solid 1px black; padding-right:3px;'>T</td>";
                output += "<td width='22' style='border-bottom:solid 1px black; padding-right:3px;'>F</td>";
                output += "<td width='22' style='border-bottom:solid 1px black; padding-right:3px;'>L</td>";
                output += "<td width='22' style='border-bottom:solid 1px black; padding-right:3px;'>S</td>";
        var count = 0;
        var dateArray = new Array();
        var monthArray = new Array();
        var yearArray = new Array();
        var forrigeStartDag = 1;
        var forrigeSlutDag = 1;
       
        if(datoForrige.getWeek(1) == datoDenne.getWeek(1))
        {
            forrigeStartDag = getFirstDayInWeek(datoDenne.getWeek(1), datoDenne.getFullYear()).getDate();
            forrigeSlutDag = DaysInMonth(datoForrige.getFullYear(), datoForrige.getMonth());
        }
        else
        {
            forrigeStartDag = getFirstDayInWeek(datoForrige.getWeek(1), datoForrige.getFullYear()).getDate();
            forrigeSlutDag = DaysInMonth(datoForrige.getFullYear(), datoForrige.getMonth());
        }
       
        var denneStartDag = 1;
        var denneSlutDag = DaysInMonth(datoDenne.getFullYear(), datoDenne.getMonth());
       
        for (var i = forrigeStartDag; i <= forrigeSlutDag; i++)
        {
            dateArray[count] = i;
            monthArray[count] = datoForrige.getMonth();
            yearArray[count] = datoForrige.getFullYear();
            //alert(dateArray[count] + "-" + (monthArray[count]+1) + "-" + yearArray[count]);
            count++;
        }
       
        for (var i = denneStartDag; i <= denneSlutDag; i++)
        {
            dateArray[count] = i;
            monthArray[count] = datoDenne.getMonth();
            yearArray[count] = datoDenne.getFullYear();
            count++;
        }
       
        for (var i = 1; count < 42; i++)
        {
            dateArray[count] = i;
            monthArray[count] = datoNaeste.getMonth();
            yearArray[count] = datoNaeste.getFullYear();
            count++;
        }
       
        count = 7;
        previousMonth = false;
        nextMonth = false;
        if (dateArray[0] != 1)
            previousMonth = true;
       
        for (var i = 0; i < dateArray.length; i++)
        {
           
            if (dateArray[i] == 1)
                previousMonth = false;
            if (dateArray[i] == 1 && i > 7)
                nextMonth = true;
           
            var dato = new Date(yearArray[i], monthArray[i], dateArray[i]);
            var isActiveDate = checkForActiveDate(dato);
           
            var isToday = false;
            if (today.getFullYear() == dato.getFullYear() && today.getMonth() == dato.getMonth() && today.getDate() == dato.getDate())
                isToday = true;
           
            if (count == 7)
            {
                var datoUge = new Date(yearArray[i], monthArray[i], dateArray[i]);
                var udUge = "" + datoUge.getWeek(1);
                if (udUge.length == 1)
                    udUge = "&nbsp;&nbsp;" + udUge;
                output +="</tr><tr align='right' valign='middle' height='17'>";
                output += "<td style='border-right:solid 1px black; cursor:default;'>" + udUge + "</td>";
                if (previousMonth || nextMonth)
                    if (isActiveDate)
                        if (isToday)
                            output += "<td style='cursor:default; border:solid 1px #AA0000; padding-right:2px;'><a style='cursor:pointer; font-weight:bold;' onclick='java script:alert(" + dateArray[i] + ")'>" + dateArray[i] + "</a></td>";
                        else
                            output += "<td style='cursor:default; border:solid 1px #FFFFFF; padding-right:2px;'><a style='cursor:pointer; font-weight:bold;' onclick='java script:alert(" + dateArray[i] + ")'>" + dateArray[i] + "</a></td>";
                    else
                        if (isToday)
                            output += "<td style='color:#BABABA; cursor:default; border:solid 1px #AA0000; padding-right:2px;'>" + dateArray[i] + "</td>";
                        else
                            output += "<td style='color:#BABABA; cursor:default; border:solid 1px #FFFFFF; padding-right:2px;'>" + dateArray[i] + "</td>";
                else
                    if (isActiveDate)
                        if (isToday)
                            output += "<td style='cursor:default; border:solid 1px #AA0000; padding-right:2px;'><a style='cursor:pointer; font-weight:bold;' onclick='java script:alert(" + dateArray[i] + ")'>" + dateArray[i] + "</a></td>";
                        else
                            output += "<td style='cursor:default; border:solid 1px #FFFFFF; padding-right:2px;'><a style='cursor:pointer; font-weight:bold;' onclick='java script:alert(" + dateArray[i] + ")'>" + dateArray[i] + "</a></td>";
                    else
                        if (isToday)
                            output += "<td style='cursor:default; border:solid 1px #AA0000; padding-right:2px;'>" + dateArray[i] + "</td>";
                        else
                            output += "<td style='cursor:default; border:solid 1px #FFFFFF; padding-right:2px;'>" + dateArray[i] + "</td>";
                count = 0;
            }
            else
            {
                if (previousMonth || nextMonth)
                    if (isActiveDate)
                        if (isToday)
                            output += "<td style='cursor:default; border:solid 1px #AA0000; padding-right:2px;'><a style='cursor:pointer; font-weight:bold;' onclick='java script:alert(" + dateArray[i] + ")'>" + dateArray[i] + "</a></td>";
                        else
                            output += "<td style='cursor:default; border:solid 1px #FFFFFF; padding-right:2px;'><a style='cursor:pointer; font-weight:bold;' onclick='java script:alert(" + dateArray[i] + ")'>" + dateArray[i] + "</a></td>";
                    else
                        if (isToday)
                            output += "<td style='color:#BABABA; cursor:default; border:solid 1px #AA0000; padding-right:2px;'>" + dateArray[i] + "</td>";
                        else
                            output += "<td style='color:#BABABA; cursor:default; border:solid 1px #FFFFFF; padding-right:2px;'>" + dateArray[i] + "</td>";
                else
                    if (isActiveDate)
                        if (isToday)
                            output += "<td style='cursor:default; border:solid 1px #AA0000; padding-right:2px;'><a style='cursor:pointer; font-weight:bold;' onclick='java script:alert(" + dateArray[i] + ")'>" + dateArray[i] + "</a></td>";
                        else
                            output += "<td style='cursor:default; border:solid 1px #FFFFFF; padding-right:2px;'><a style='cursor:pointer; font-weight:bold;' onclick='java script:alert(" + dateArray[i] + ")'>" + dateArray[i] + "</a></td>";
                    else
                        if (isToday)
                            output += "<td style='cursor:default; border:solid 1px #AA0000; padding-right:2px;'>" + dateArray[i] + "</td>";
                        else
                            output += "<td style='cursor:default; border:solid 1px #FFFFFF; padding-right:2px;'>" + dateArray[i] + "</td>";
            }
            count++
        }
        output +="</tr></table>";
        document.getElementById("daysInMonth").innerHTML = output;
        document.getElementById("daysInMonth").style.display = "block";
        document.getElementById("monthsInYear").style.display = "none";
        document.getElementById("yearsInDecade").style.display = "none";
    }
</script>
Avatar billede mireigi Novice
08. december 2008 - 12:31 #2
Jeg fik endelig sporet problemet til dette sted:

if(datoForrige.getWeek(1) == datoDenne.getWeek(1))
        {
            forrigeStartDag = getFirstDayInWeek(datoDenne.getWeek(1), datoDenne.getFullYear()).getDate();
            forrigeSlutDag = DaysInMonth(datoForrige.getFullYear(), datoForrige.getMonth());
        }
        else
        {
            forrigeStartDag = getFirstDayInWeek(datoForrige.getWeek(1), datoForrige.getFullYear()).getDate();
            forrigeSlutDag = DaysInMonth(datoForrige.getFullYear(), datoForrige.getMonth());
        }


Det har jeg så nu erstattet med følgende:

if(datoForrige.getWeek(1) == datoDenne.getWeek(1))
        {
            var offSet = (datoForrige.getDay() - 1);
            if (offSet > 0)
                offSet *= -1;
            forrigeStartDag = datoForrige.getDate() + offSet;
            forrigeSlutDag = DaysInMonth(datoForrige.getFullYear(), datoForrige.getMonth());
        }
        else
        {
            var offSet = (datoDenne.getDay() - (7 - datoForrige.getDay()));
            if (offSet > 0)
                offSet *= -1;
            forrigeStartDag = (datoForrige.getDate() + offSet);
            forrigeSlutDag = DaysInMonth(datoForrige.getFullYear(), datoForrige.getMonth());
        }


Men er der nogen som lige vil tage et kig på det, og sige om det er en god og sikker nok måde at finde dagsnummeret (fx 14 eller 22) for den første dag (Mandag) i en uge?

MiReiGi
Avatar billede mireigi Novice
09. december 2008 - 12:05 #3
Det lader til at ovenstående virker, så jeg lukker spørgsmålet.
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester