Wochenplaner

Jacky222

Grünschnabel
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.

Im Anhang hab ich einen Screenshot hochgeladen, damit ihr eine ungefähre Ahnung von der Sturktur habt.

Links werden die Wochentage angezeigt, mit Klick auf einen 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:

Code:
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 für alle Vorschläge, Links, Beispiele, oder was auch immer dankbar!

LG Jackie
 

Anhänge

  • Unbenannt.JPG
    Unbenannt.JPG
    37,7 KB · Aufrufe: 16
Hi
schau mal hier: http://www.w3schools.com/jsref/jsref_obj_date.asp
resp. MDN Link: https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Date

Ich würde mit dem Date Objekt arbeiten. Sprich dein today auf den Anfang der Woche setzen in dem du deinen Kalender gerade anzeigen willst. So kannst du deine Funktionen für jede Woche gleich verwenden.

Das könnte für dich auch noch interessant sein (Berechnung der Kalenderwoche): http://techblog.procurios.nl/k/news...ate-iso-8601-week-and-year-in-javascript.html

greez
 
Danke für den Tipp!

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.

Code:
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
 
Ich bin jetzt deinen Code nicht bis ins letzte Detail durchgegangen, aber vielleicht hilft dir dies weiter: Wenn du auf einzelne Komponenten des Date--Objektes etwas aufaddierst oder subtrahierst, berücksichtigt der Interpreter automatisch z. B. einen Sprung in den nächsten Monat. Probiere z. B. mal dieses aus:
Code:
var d = new Date();
console.log(d);
d.setDate(d.getDate() + 30);
console.log(d);
Wenn Du um eine Woche weiterschalten willst, musst du natürlich 7 Tage aufaddieren.
Und was den Klick auf den Button betrifft: Informiere dich über Eventlistener, so einen brauchst Du dafür:
http://wiki.selfhtml.org/wiki/JavaScript/Objekte/DOM/event/addEventListener
 

Neue Beiträge

Zurück