Wochenplaner

[Jackie_ds]

Hallo Leute!

Ich will einen Kalender erstellen, bei dem nicht der ganze Monat sondern nur die Wochen angezeigt werden, mit den Datum des Tages also zB "10, Mi". Also sowas wie ein Wochenplaner, bei dem man auch Termine eintragen kann.

Anzeigen der Zahlen und des Monats geht schon. Mein Problem liegt dabei, wenn ich den vorherigen Monat oder die Tage der letzten Woche anzeigen will.

Hier mal ein Screenshot, damit ihr ne Ahnung von der Struktur habt:



Links werden die Wochentage angezeigt, mit dem orangen Pfeil soll die vorherige/nächste Woche mit den richtigen Daten angezeigt werden und mein Monat genauso.

Mein Code für das Anzeigen der bisherigen Daten:

var month = ['Jänner', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'];

 function calendar() {
     var today = new Date();
     setText('label', month[today.getMonth()] + ' ' + (1900 + today.getYear()));

     var day = today.getDay();
     if (day !== 01) {                  // Only manipulate the date if it isn't Mon.
         today.setHours(-24 * (day - 1));   // Set the hours to day number minus 1, multiplied by negative 24

     }

     setText('Mo', today.getDate());
     setText('Di', today.getDate()+1);
     setText('Mi', today.getDate()+2);
     setText('Do', today.getDate()+3);
     setText('Fr', today.getDate()+4);
     setText('Sa', today.getDate()+5);

 };

 
 function setText(id, val) {
    if(val < 10){
        val = '0' + val;
    }
     document.getElementById(id).innerHTML = val;

 };

 window.onload = calendar;

Was ist die beste Methode um mit jedem Klick auf den Pfeil die Variablen eben eine Woche zurück/vor zu stellen?
Das gleiche Problem beim Monat. Ich bräuchte eine Schleife die mir bei jedem Klick auf den Pfeil +1 oder eben -1 geht, aber jeweils vom aktuellen Monat aus. Eine Variable um 1 höher/niedriger zu machen, wär nicht so schwer aber ich weiß nicht wie ich sozusagen den aktuell angezeigten Monat speichern kann, damit die Funktion von diesem aus weiter geht und nicht vom aktuellen Datumsmonat.

Ich bin leider ein ziemlicher Programmier-Neuling und bin für alle Vorschläge, Links, Beispiele, oder was auch immer dankbar!

LG Jackie

 

[Jackie_ds]

Hallo nocheinmal!


Also ich hab mir jetzt diesen Code zusammengestöpselt. Zugegeben, bin nicht alleine draufgekommen, sondern hab viel in Foren etc gesucht, aber wenigstens funktionierts jetzt und ich verstehs.

function calendar() {
    var today = new Date();
    var currYear = today.getFullYear();
    var currMonth = today.getMonth();
    var currWeek = today.getWeek();
 
    var firstDateOfMonth = new Date(currYear, currMonth, 1);
    var firstDayOfMonth = firstDateOfMonth.getDay();     // 0 (Sun) to 6 (Sat)
 
    var firstDateOfWeek = new Date(firstDateOfMonth);  
 
    firstDateOfWeek.setDate(                             // move the Date object
        firstDateOfWeek.getDate() +                      // forward by the number of
        (firstDayOfMonth ? 7 - firstDayOfMonth : 0)      // days needed to go to
    );                                                   // Sunday, if necessary
 
    firstDateOfWeek.setDate(                             // move the Date object
        firstDateOfWeek.getDate() +                      // forward by the number of
        7 * (currWeek-1)                                   // weeks required (week - 1)
    );
 
 
    var dateNumbersOfMonthOnWeek = [];                
    var datesOfMonthOnWeek = [];                      
 
    for (var i = 0; i < 7; i++) {                        // 7 days of week
 
        dateNumbersOfMonthOnWeek.push(                   // push the date number on
            firstDateOfWeek.getDate());                  // the end of the array
 
        datesOfMonthOnWeek.push(                         // push the date object on
            new Date(+firstDateOfWeek));                 // the end of the array
 
        firstDateOfWeek.setDate(
            firstDateOfWeek.getDate() + 1);              // move to the next day
 
    }
   
    setText('month-year', monthArray[currMonth] + " " + currYear);
 
    setText('Mo', dateNumbersOfMonthOnWeek[0]);
    setText('Di', dateNumbersOfMonthOnWeek[1]);
    setText('Mi', dateNumbersOfMonthOnWeek[2]);
    setText('Do', dateNumbersOfMonthOnWeek[3]);
    setText('Fr', dateNumbersOfMonthOnWeek[4]);
    setText('Sa', dateNumbersOfMonthOnWeek[5]);
    setText('So', dateNumbersOfMonthOnWeek[6]);
 
};
 
 
function setText(id, val) {
    if(val < 10){
        val = '0' + val;
    }
    document.getElementById(id).innerHTML = val;
 
};
 
 
window.onload = calendar;

Jetzt meine Frage: Wie kann ich die vorherige oder nächste Woche anzeigen????

Ich hab auf der index.html einen "<" Button. Mit Klick darauf soll die Methode aufgerufen werden, die die vorherige Woche anzeigt.

Kann mir jemand vielleicht einen Tipp geben, welche Parameter ich da übergeben muss und wie die Schleife aussehen soll, damit ich immer 1 Woche von aktuell angezeigten Datum zurück/vor gehe? Weil, klar kann man today.getWeek()-1 in die Methode schreiben, nur dann wird ja immer nur von der aktuellen Woche 1 abgezogen, und ich kann nicht mehr als 1 Woche zurückgehen.

Also, das ich mein Hauptproblem! Ich bin für jede Hilfe dankbar!

LG Jackie