# Kalender basierend auf Javascript und SQL(php))



## Schrödi (18. September 2007)

Hallo Leute,

ich bin gerade dabei eine Seite für einen Sportverein zu gestalten. Ich brauche einen Kalender, der von einer SQL Datenbank gefüttert wird (php), soll aber nicht per php gesteuert werden. D.H. das Weiterblättern auf den nächsten Monat bzw. das nächste Jahr soll per Javascript geschehen, da die Seite nicht jedes mal neu geladen werden soll. 

Der Kalender soll in der Monatsansicht dargestellt sein und soll nur ein kleines Fleckchen der dargestellten Seite einnehmen. 

Termine, Events, etc. sollten gekennzeichnet sein und  beim Überfahren mit der Maus unter dem Kalender angezeigt werden. 

Habe  schon sehr lange gequält aber nichts passendes gefunden .

Vielleicht kennt jemand solches ein Tool, oder eines das leicht anzupassen ist. 
Bin in php einigermaßen fit, jedoch nicht in Javascript.

Ich hoffe ich habe bei meiner Recherche hier im Forum nicht einen ähnlichen Beitrag übersehen.

MfG

Schrodi


----------



## Quaese (19. September 2007)

Hi,

such mal nach dem Begriff *AJAX*.

Damit könntest du zum Beispiel Informationen als GET-Request zum gewünschten Monat an ein PHP-Script schicken. Dieses erstellt dir den neuen Kalender und sendet dir diesen zurück. Nun kannst du den alten Kalender durch den neuen ersetzen, indem du die *innerHTML*-Eigenschaft eines Platzhalterelementes änderst.

Ciao
Quaese


----------



## Schrödi (19. September 2007)

Hi Quaese,

Danke für deine Antwort.

Habe mich mal über innerHTML etwas belesen. Nach meinen Infos gibt es damit noch ein paar Probleme mit den verschiedenen Browsern, u.a. auch Firefox. 

Ich denke ich werde den Kalender jetzt auf php Basis programmieren, wie du es geschieben hast und ihn dann per iframe einbinden. Auch so muss nicht die ganze Seite neu geladen werden und ist eigentlich auch eine recht einfache Lösung.

Vielleicht gibst du mir noch einen kleinen Request über meine Lösung und auch eventuelle Nachteile.

Danke und freundliche Grüße 

Schrodi


----------



## Schrödi (22. September 2007)

Hi.

Bin schon wieder auf ein Problem gestoßen. 
Mitlerweile bin ich soweit, dass der php - Teil des Kalenders steht und auch funktioniert.

Wie oben schon beschrieben soll bei onmouseover und onmoueout die einzelnen Infos zu an den entsprechenden Tagen eingeblendet und auch wieder ausgeblendet werden. 

Hier liegt nun das Problem (oder auch nicht?). Wenn ich meinen Kalender in seiner extra Datei öffne, funktioniert das auch, include ich ihn aber via php, funktioniert das onmouseout nicht mehr. Das onmouseover jedoch schon. 
Ich kann dazusagen, dass der script richtig ist weil: Wenn ich das onmouseout in ein onclick ändere funktioniert das Ausblenden auch wieder. 
Bin nun etwas ratlos und kann mir das nicht erklären.

Hätte vielleicht jemand einen Rat oder Vorschlag?

Gruß schrodi


----------



## Chaosengel_Gabriel (22. September 2007)

Einen Rat hab ich dazu vermutlich wohl^^
Mach das mit dem zeigen der Termine mit php, da du sonst die Informationen vorher an den Client schicken müsstest um das zu ändern, was den Seiten aufbau bremsen könnte, da zuviele Daten aufm Client ankommen^^

Ich würde darauf tippen, dass der Befehl onmouseout falsch ist... In irgendeiner Weise^^


----------



## Schrödi (22. September 2007)

Hey,
danke für deine schnelle Antwort. 

Der Seitenaufbau sollte kein problem darstellen, da mein Kalender nur die Monatsansicht hat. d.h. 30-31 Tage. 
Ich habe die Lösung gewählt und nicht die über php (obwohl es für mich um einiges einfacher gewesen wäre), weil der Kalender nur ein kleiner Teil einer ganzen Seite mit vielen Informationen ist. Ich wollte nicht jedes Mal die ganze Seite neu laden müssen, um ein Event anzeigen zu lassen, ausserdem macht es mit mouseover und mousedown auch vielmehr her ;-).
Zu onmouseout: Ich habe das Problem gefunden, auch wenn nur durch Zufall.
Ich hatte mir schon ein fertiges Script aus dem Netz geladen (hide_focus.js). Vielleicht kennt es einer. Es lässt die dünne gestrichelte Linie um Links/Verweise verschwinden, wenn man auf diese klickt. Es macht dadruch die Seite etwas ansehnlicher. 
Vielleicht kennt noch jemand ein anderes Script das das selbe Ergebnis aufweist, jedoch ohne die onmouseout Funktion dabei auszuhebeln.

Gruß Schrodi


----------



## Schrödi (19. Oktober 2007)

Hallo Leute,

stehe schon wieder vor einem Problem mit dem Kalender. Der Kalender ist jetzt soweit fast fertig.
Ich habe ihn jetzt doch mit Ajax und InnerHTML geschrieben.
Nun möchte ich aber, dass eine Art Preloader das nächste Kalenderblatt einleitet.


```
function ajax_url(cal_timer){
        var month = new Date(cal_timer).getMonth();
        var year = new Date(cal_timer).getFullYear();
        
        var ajax = new Ajax.Request(
            "content/home/calendar_php.php?month="+month+"&year="+year,
            {
                onComplete:    zeigeAlles,
                onFailure:    zeigeFehler    
            }
        )
    }
    
    var zeigeAlles = function(r)
    {    $("cal_box").innerHTML = r.responseText;        }
    
    var zeigeFehler = function(r)
    {    $("cal_box").innerHTML = Fehler;                }
```

Oben seht ihr meinen Quellcode mit Ajax.Request und innerHTML.
Gibt es für das Ajax.Request vielleicht eine Methode "onLoad" oder ähnliches?
Oder lässt sich mein Problem anders lösen?

Gruß Schrodi


----------



## hans jörg (21. Oktober 2007)

Hi,
preloaden könntest du zum Beispiel ganz leicht, wenn du dir sobald du ein Kalenderblatt anzeigen lässt, du im hintergrund per asynchronem request den Inhalt vom nächsten Kalenderblatt holst und in einer oder mehreren Variablen speicherst.
Solltest du mit Preloader eine Ladestatusanzeige gemeint haben solltest du wissen wie das mit dem Http Request bei ajax ungefähr funktioniert:
- wenn du einen Request asynchron absetzt gibt es einen Event bei dem du regelmäßig den Status deines Requests abfragen kannst: (variablefuerdeinenrequest.onreadystatechange); diesem event musst du eine Funktion zuweisen in der du den Status überprüfst zb.: variablefuerdeinenrequest.onreadystatechange = function()
{
  if (variablefuerdeinenrequest.readyState == 4)
  {
    if (variablefuerdeinenrequest.status == 200)
    {
       mach das was du tun sollst wenn du eine antwort bekommen hast;
     }
    else
    {
       mach das was du tun sollst wenn du keine antwort bekommen hast;
     }
  }
}
die genauen Prozentangaben über den Ladezustand zu erfahren ist allerdings unmöglich, du kannst nur wenn du den Request abschickst deinen Usern mittels einer Grafik, Text usw mitteilen, dass etwas geladen wird und sobald die Antwort vom Server gekommen ist dies wieder mitteilen. Bzw wenn du sie genau informieren willst kannst du ja immer den 
aktuellen status der anfrage wiedergeben.
Ich weiß nicht welches Framework du verwendest, aber es stellt dir diese Informationen sicher auch zur verfügung.


----------



## Schrödi (21. Oktober 2007)

Hi hans jörg,

irgendwie stehe ich ziemlich auf dem Schlauch. Ich kriege das einfach nicht hin. Könntest du mir vielleicht zeigen, wie ich deine Andeutung in mein Script einbauen kann?

Es soll sehr einfach gehalten werden. Während dem Laden soll einfach nur eine gif angezeigt werden.
Zur Zeit ist es so, dass es etwa ein bis zwei Sekunden dauert, bis er das nächste Kalenderblatt anzeigt. Diee Zeit soll mit der gif überbrückt werden, dass der User sieht, dass sich auch was tut und nicht wieder und wieder klickt.

An welchem Punkt fange ich das readyState ab? 
Es wird doch erst onComplete rausgeschickt, habe leider keinen anderen Eventhandler gefunden. Mit onCreate gehts jedenfalls nicht.

Gruß Schrodi


----------



## hans jörg (21. Oktober 2007)

Hi,
wie gesagt, ich kenne dein Ajax Framework nicht, aber von dem von dir gezeigten Codeschnipseln nehme ich an musst du den code zum Einblenden bzw. Ausblenden deines "Ladegifs" an den folgenden stellen einbauen:

```
function ajax_url(cal_timer){
        var month = new Date(cal_timer).getMonth();
        var year = new Date(cal_timer).getFullYear();
        
       ->hier den code einfügen der das Lade gif zeigt
       
           var ajax = new Ajax.Request(
            "content/home/calendar_php.php?month="+month+"&year="+year,
            {
                onComplete:    zeigeAlles,
                onFailure:    zeigeFehler    
            }
        )
    }
    
    var zeigeAlles = function(r)
    {    $("cal_box").innerHTML = r.responseText;  ->hier den code einfügen der das Lade gif verschwinden lässt  }
    
    var zeigeFehler = function(r)
    {    $("cal_box").innerHTML = Fehler;     ->hier auch den code einfügen der das Lade gif verschwinden lässt               }
```

zum Anzeigen des gifs hast du mehrere Möglichkeiten zB:
- du platzierst das gif an der richtigen Stelle und lässt es über die style Eigensachften display:none; oder visibility:hidden unsichtbar und blendest es dann ein indem du seine style Eigenschaften auf display:block (bzw. inline) oder visibility:visible änderst
- oder du erzeugst überhaupt mit document.createElement('img') ein neues Element welches du elternelemnt.appendChild() an der Richtigen Stelle platzierst und über elternelement.removeChild() wieeder verschwinden lässt.
Ich finde die beste Lösung wenn man während einem Request verhindern will, dass ein User weitere Funktionen ausführen kann ist, einen halbtransparenten div mit färbigem Hintergrund über die Seite zu spannen und nochmals darüber die Ladegrafik einzublenden.


----------



## Schrödi (21. Oktober 2007)

Mir ist jetzt nicht ganz klar was du mit Framework meinst.
Der Restliche Jacascript Code dient nur zu Datumsberechnen (Monat rauf und Monat runter)
Im Header sind die aktuellen Ajax Bibliotheken eingebunden (zur Zeit noch alle). Ich werde diejenigen dann rausnehmen, die ich nicht brauche. Der Rest des Codes ist HTML und PHP.

Die zwei Codeschnippsel sind alles, was zum einfügen des Kalenders dient. Das einzige was da gefehlt hat war das DIV mit id="cal_box".

Und danke für deine Antwort. Das GIF wird jetzt angezeigt, wenn man einen Monat vor oder zurück will. Ich hatte mir alles mal wieder viel zu kompliziert vorgestellt und wollte das mit einem Eventhandler oder mit .readyState lösen.

Gruß


----------



## hans jörg (21. Oktober 2007)

Hi noch mal,
ich vermutete, dass du ein Ajax Framework benutzt, weil:

```
var ajax = new Ajax.Request(
            "content/home/calendar_php.php?month="+month+"&year="+year,
            {
                onComplete:    zeigeAlles,
                onFailure:    zeigeFehler    
            }
```
wird glaube ich ohne eine Ajax Klasse die irgendwo definiert wurde nicht funktionieren oder?(würd mich freuen wenn ich sonst was dazulernen könnte, dann könnt ich nämlich meinen code um etliche Zeilen reduzieren ) )
wie auch immer, dass wichtigste ist, dass du für dein Problem eine Lösung hast!
lg


----------



## Schrödi (22. Oktober 2007)

Gut. Jetzt habe ich verstanden was du mit Framework meinst. Ich benutze das Prototype-Framework, das, soweit ich weiß, eine Bündel aus allen Ajax - Frameworks ist. 

Ich habe ein Video2Brain, indem die Klassen den einzelnen Frameworks zugewiesen werden. Ich kann dir ja mal eine Liste machen, wenn dir das weiterhilft.

Gruß Schrodi


----------

