Kalender basierend auf Javascript und SQL(php))

S

Schrödi

Mitglied
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 :google: schon sehr lange gequält aber nichts passendes gefunden :confused:.

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
 
Zuletzt bearbeitet von einem Moderator:
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
 
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
 
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
 
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^^
 
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
 
Zuletzt bearbeitet von einem Moderator:
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.

Code: 
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
 
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.
 
Zuletzt bearbeitet:
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
 
Zuletzt bearbeitet von einem Moderator:
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:
HTML: 
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.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück