Wochenplaner navigieren

[Jacqueline Scheidl]

Hallo!

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));   

     }

     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

[paulchen]

Hallo!

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

wäre schön wenn außer dem Script noch etwas CSS und HTML zu sehen wäre.

[Jacqueline Scheidl]

Hallo!

Keine Ahnung wie ich von meinem Rechner hier Bilder hochladen kann?! Ganz ehrlich, ich hab den Screenshot gemacht, auf hochladen geklickt und ihn ausgewählt aber nee... nix da.

Jedenfalls, hab ich mir mittlerweile schonen einen funktionierden 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???? Aufbauend auf der Funktion, die ich hier schon hab?!

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

[quincunx]

Hallo Jackie!

Keine Ahnung wie ich von meinem Rechner hier Bilder hochladen kann?! Ganz ehrlich, ich hab den Screenshot gemacht, auf hochladen geklickt und ihn ausgewählt aber nee... nix da.

per drag&drop siehe am unteren Rad dieses Formularfelds (Bilder hierher ziehen oder klicken, um sie hochzuladen. Beachten Sie die Nutzungsbedingungen.)

Jetzt meine Frage: Wie kann ich die vorherige oder nächste Woche anzeigen???? Aufbauend auf der Funktion, die ich hier schon hab?!

Hier kannst du dir eine Version aus meinen Demo-Bestand ansehen, vielleicht hilft sie dir ja weiter.

http://selfhtml.quincunx.eu/examples/calendar/

gruesse quincunx

[Jacqueline Scheidl]

Hallo quincunx!

per drag&drop siehe am unteren Rad dieses Formularfelds (Bilder hierher ziehen oder klicken, um sie hochzuladen. Beachten Sie die Nutzungsbedingungen.)

Hab ich gemacht, ist nix passiert.

Aber deine Demo-Version hat mir wirklich sehr weitergeholfen, danke! Könntest du mir noch ein paar Dinge erklären?

1. Was genau macht die vnt-Funktion und wofür steht "vnt"?
2. Wofür steht der 3. Parameter "d" in der setText() Funktion?
3. Was genau macht diese Codezeile?

weekday.forEach(function(item, ix) {
                setText(item.slice(0, 2).toLowerCase(), today.getDate(), ix);
            });
            vnt.add(document, 'click', setBrowse);

Also wofür steht das ix und was genau macht vnt.add() ?

Nur eine kurze Beschreibung, damit ich mich auskenn wäre nett, mach dir keine großen Umstände. Danke sehr!

LG Jackie

[Matthias Apsel]

Hallo Jacqueline Scheidl,

per drag&drop siehe am unteren Rad dieses Formularfelds (Bilder hierher ziehen oder klicken, um sie hochzuladen. Beachten Sie die Nutzungsbedingungen.)

Hab ich gemacht, ist nix passiert.

Was?

• Bilder hierher ziehen (damit sind eigentlich Dateinamen gemeint)?
• geklickt und ausgewählt?

Bis demnächst
Matthias

[quincunx]

Hallo Jackie

1. Was genau macht die vnt-Funktion und wofür steht "vnt"?

vnt = event ohne Vokale ;-)

Mit dieser Funktion belausche ich die Events (click, load, mousemove, keypress etc.…).

Die Demo-Seite wurde aktualisiert und etwas spielerisch erweitert.

Mit der Mouse herumfahren und irgendwohin klicken, eine beliebige Taste drücken und oben rechts schaun was geschieht wenn stop event geklickt wird, also ausprobieren.

2. Wofür steht der 3. Parameter "d" in der setText() Funktion?

Da war ich etwas schlampig. d = index, online jetzt geändert.

3. Was genau macht diese Codezeile?

weekday.forEach(function(item, ix) {
    setText(item.slice(0, 2).toLowerCase(), today.getDate(), ix);
});

Im Grunde macht sie dass, nur sparsamer (eleganter).

setText ('mo', 15, 0);
setText ('di', 15, 1);
setText ('mi', 15, 2);
setText ('do', 15, 3);
setText ('fr', 15, 4);
setText ('sa', 15, 5);
setText ('so', 15, 6);

mit forEach wird weekday = ['Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag', 'Sonntag'] durchlaufen.

Da die Wochentage ausgeschrieben sind müssen sie umgewandelt werden (stutzen & kleinschreiben).

item.slice(0, 2) extrahiert die ersten beiden (0, 2) Buchstaben, so wird aus 'Montag' 'Mo' und mit 'Mo'.toLowerCase() wird 'mo' kleingeschrieben.

Jetzt habe ich die 'ID's der Tabellen-Zelle (<td id="mo"></td>) und forEach durchläuft das Array bis 'Sonntag' = 'so'.

Die forEach Schleife wird im Wiki ausführlich erklärt.

   vnt.add(document, 'click', setBrowse);

In der vnt Funktion habe ich die EventListener Methoden gekapselt.

Im Beispiel lausche ich auf das 'click' Event im document und binde es an die Funktion setBrowse.

Siehe auch:

JavaScript: Fortgeschrittene Ereignisverarbeitung

Kapselung mit privatem Funktions-Scope

gruesse quincunx

[Matthias Apsel]

Hallo quincunx,

Hier kannst du dir eine Version aus meinen Demo-Bestand ansehen, vielleicht hilft sie dir ja weiter.

http://selfhtml.quincunx.eu/examples/calendar/

Falls du an einem Bugreport interessiert bist und du diese Version noch verbessern möchtest, …

• die erste Kalenderwoche eines Jahres ist die, die den ersten Donnerstag enthält.
• dieselbe Regelung würde ich auch bei den Monatswechseln anwenden

Bis demnächst
Matthias

[quincunx]

Hallo Matthias

Falls du an einem Bugreport interessiert bist und du diese Version noch verbessern möchtest, …

Klar bin ich interessiert auf Bugs aufmerksam gemacht zu werden.

Aktualisierte Version

• die erste Kalenderwoche eines Jahres ist die, die den ersten Donnerstag enthält.

Habe ich verstanden und entsprechend abgeändert.

• dieselbe Regelung würde ich auch bei den Monatswechseln anwenden

Erweiterte Version

gruesse quincunx