Erstellen eines mobilen Ereigniskalenders mit DHTMLX

() translation by (you can also view the original English article)

In diesem Tutorial wird beschrieben, wie Sie einen HTML5-basierten mobilen Kalender erstellen, um Konferenzen und Ereignisse zu verfolgen, die auf iOS- und Android-Telefonen mit einer mobilen Version von dhtmlxScheduler (Open Source, GPL) ausgeführt werden. Am Ende können Benutzer Ereignisse hinzufügen und bearbeiten, den Konferenzort in Google Maps auswählen und die Ereignisse in Tages-, Monats- oder Listenansichten anzeigen.

Projektübersicht

Die endgültige Demo enthält den Ereigniskalender (wir nennen ihn auch den Planer), der Ereignisse in drei Standardansichten anzeigt: Liste, Tag und Monat. Während der Endbenutzer Ereignisse hinzufügt, löscht oder bearbeitet, speichert die Kalender-App die Änderungen auf dem Server und aktualisiert die Datenbank. Die Demo erkennt auch automatisch das verwendete Gebietsschema und passt die Kalenderoberfläche entsprechend an. Der Endbenutzer kann den Ereignisort in Google Maps auf zwei Arten festlegen: durch Eingabe der Adresse oder durch Zeigen auf Google Maps.

1. Erste Schritte

Laden Sie zunächst das neueste Paket der mobilen Version von dhtmlxScheduler herunter. Es basiert auf dem DHTMLX Touch-Framework und wird unter einer Open Source-Lizenz (GNU GPL) vertrieben.

Der mobile DHTMLX-Scheduler verfügt über eine sogenannte Multiview-basierte Architektur. Es werden eine Reihe von Bildschirmen angezeigt, die untereinander wechseln. Jeder Bildschirm ist eine einzelne Ansicht, in der Sie beliebigen Inhalt hinzufügen können. Standardmäßig enthält der Scheduler die folgenden Ansichten:

Ereignisvorschau-Bildschirm (zeigt eine kurze Information über das Ereignis an)
Detailformular (zum Bearbeiten der Ereignisdetails)
Start / Ende-Bearbeitungsformular (integrierte Datumsauswahl zur Auswahl des Start- und Enddatums des Ereignisses)
Kalenderansichten: Liste (Agenda), Tag und Monat

Die vordefinierten Ansichten können angepasst werden (die Standarddefinitionen finden Sie in der Dokumentation). Es besteht auch die Möglichkeit, neue benutzerdefinierte Ansichten hinzuzufügen.

2. Rendern eines Ereigniskalenders auf einer Seite

Schritt 1

Wir beginnen mit den erforderlichen Codedateien, um den mobilen Scheduler auf einer Seite anzuzeigen: dhxscheduler_mobile.js und dhxscheduler_mobile.css.

Schritt 2

Fügen Sie Ihrer Seite den folgenden Code hinzu:

    dhx.ready(function(){
            dhx.ui.fullScreen();
            dhx.ui({
                view: "scheduler",
                id: "scheduler"
            });
     });

Folgendes tun diese Codezeilen:

Das Aufrufen der Funktion dhx.ready() garantiert, dass der darin platzierte Code aufgerufen wird, nachdem die Seite vollständig analysiert wurde, und schützt sie so vor möglichen Fehlern. Dies ist optional, aber ich empfehle Ihnen, es zu verwenden.
dhx.fullScreen() aktiviert den Vollbildmodus.
dhx.ui({}) ist ein Objektkonstruktor für den Scheduler (wird in der DHTMLX Touch-Bibliothek verwendet).
view: "scheduler" - Legt die zu rendernde Komponente fest ('Scheduler' ist der fest codierte Name des mobilen Schedulers).
id ist ein optionaler Parameter, der die Objekt-id festlegt. Wir haben diesen Parameter angegeben, da wir später auf dieses Objekt verweisen werden.

Nachdem wir die erforderlichen Dateien eingefügt und den obigen Code hinzugefügt haben, wird der Kalender auf einer Seite gerendert:

Der Scheduler verfügt über eine übersichtliche und einfache Benutzeroberfläche, sodass Sie ihn unverändert verwenden können. Es ist flexibel genug, sodass Sie das Erscheinungsbild so konfigurieren können, dass es Ihren Designanforderungen entspricht, wenn Sie möchten.

3. Laden und Speichern von Daten

Schritt 1

Um Daten in den Kalender zu laden, verwenden wir die load()-Methode. Da wir Daten vom Server laden, sollten wir den einzigen Parameter festlegen (den Pfad zum Serverskript).

Um Daten wieder auf dem Server speichern zu können, müssen wir im Objektkonstruktor einen weiteren Parameter definieren - save. Wir müssen auch dasselbe serverseitige Skript angeben, das wir in der load()-Methode angegeben haben.

    dhx.ui({
                  view: "scheduler",
                id: "scheduler",
                save:"data/data.php"
    });
    $$("scheduler").load("data/data.php");

Um über seine ID auf den Scheduler zu verweisen, verwenden wir den Datensatz $$("scheduler").

Um auf die Scheduler-Ansichten (oder View-Elemente) zu verweisen, sollten Sie eine vollständige Vererbungskette für Abhängigkeitseigenschaften schreiben: $$('scheduler"').$$('view_id').$$('viewElement_id')... Sie kann die Element-IDs in der zugehörigen Dokumentation überprüfen.

Schritt 2

Die Datei data.php enthält die Client-Server-Kommunikationslogik zur Integration in die Serverseite. Um die Logik zu definieren, verwenden wir einen speziellen Helfer dhtmlxConnector, der die gesamte Routine implementiert (es gibt Versionen für Java, .NET, PHP und ColdFusion, die kostenlos mit den Widgets der dhtmlx-Benutzeroberfläche verwendet werden können). Weitere Informationen zur Verwendung von dhtmlxConnector finden Sie hier.

Wir werden die PHP-Version verwenden und den folgenden Code in der Datei data.php erstellen:

    <?php
         include ('../connectors/scheduler_connector.php');                
         $res=mysql_connect("localhost","root","");
         mysql_select_db("schedulertest");                  
         $scheduler = new JSONSchedulerConnector($res);
         $scheduler->render_table("events_map","event_id","start_date,end_date,event_name,details,event_location,lat,lng");
    ?>

Die Zeilen des Codes führen Folgendes aus:

Die erste Zeile enthält die erforderliche Codedatei.
Die nächsten beiden Zeilen stellen eine Verbindung zum Server her und öffnen die angegebene SQL-Datenbank.
Die letzten beiden Zeilen erstellen ein Connector-Objekt ($scheduler) und konfigurieren die abzurufenden Daten.

Im angehängten Demopaket finden Sie die Dump-Datei der 'Schedulertest'-Datenbank.

Wenn wir diesen Schritt ausführen, haben wir einen Kalender mit unseren Demo-Daten:

Mobile Event Calendar - Loaded with Data

4. Lokalisierung

Schritt 1

Mit diesem Schritt können wir unseren Kalender an eine bestimmte Sprache und Region anpassen.

Zuerst müssen wir ein Gebietsschemaobjekt angeben (in der Bibliothek hat es den fest codierten Namen 'locales'), das alle im Kalender verwendeten Beschriftungen definiert.

Wir werden ein Objekt in einer separaten Datei erstellen, um die Haupt-HTML-Datei nicht zu "überfüllen". Die Datei sieht folgendermaßen aus:

1	var locales ={
2	"de": {...},
3	"en": {..},
4	...
5	}

Um die Vollversion des Objekts 'locales' anzuzeigen, öffnen Sie die Datei locales.js, die im Ordner 'codebase' des Download-Pakets enthalten ist. In unserer Demo haben wir als Beispiel die Gebietsschemas für nur zwei Sprachen (Englisch und Deutsch) aufgenommen. Bei Bedarf können Sie das Gebietsschema einer anderen Sprache in diese Datei einfügen.

Schritt 2

Dann fügen wir die Datei locales.js auf der Seite hinzu:

1	<script charset="utf-8" type="text/javascript" src="../mobile_scheduler/codebase/locales.js"></script>

Fügen Sie als Nächstes den folgenden Code zur HTML-Datei hinzu:

    //put this code at the very beginning of the page and not into the dhx.ready() function
    var locale = (navigator.language || navigator.systemLanguage || navigator.userLanguage ||'en').substr(0, 2).toLowerCase();
            if (!locales[locale])
                locale = 'en';

            scheduler.locale.labels=locales[locale];
            dhx.Date.Locale = locales[locale].calendar;

Die Zeilen des Codes führen Folgendes aus:

In der ersten Zeile wird die Sprachversion des Browsers angezeigt.
In den nächsten Zeilen wird das Gebietsschema abhängig vom Wert festgelegt, der von der ersten Zeile zurückgegeben wird.
scheduler.locale.labels legt das Gebietsschema für allgemeine Beschriftungen im Scheduler fest.
dhx.Date.Locale legt das Gebietsschema für die im Scheduler verwendeten Kalender fest.

Der Kalender mit einem deutschen Gebietsschema sieht folgendermaßen aus:

5. Anzeigen eines Ereignisorts in Google Maps

Wäre es nicht großartig, wenn Benutzer den Ort sehen könnten, an dem ein Ereignis stattfindet? Hier ist die Liste der Schritte, die erforderlich sind, um eine solche Gelegenheit in Ihrer App bereitzustellen:

Erstellen Sie eine separate Ansicht für Google Maps
Fügen Sie eine Schaltfläche hinzu. Durch Klicken darauf öffnet der Benutzer die Kartenansicht
Fügen Sie eine 'onclick'-Handlerfunktion hinzu, die für die Anzeige von Google Maps mit der entsprechenden Ereignismarkierung verantwortlich ist
Fügen Sie die Ereignisstandortinformationen zum Ereignisvorschau-Bildschirm hinzu

Schritt 1

Wir beginnen mit der Erstellung einer Kartenansicht. Für unseren ersten Schritt werden wir eine weitere Datei auf der Seite einfügen:

1	<script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=places&sensor=true"></script>

Dann müssen wir eine neue Ansicht hinzufügen, in der Google Maps angezeigt wird. Die DHTMLX Touch-Bibliothek verfügt über die Komponente 'googlemap', die die Integration in Google Maps ziemlich einfach macht (zugehörige Dokumentation).

Hier ist unsere Google Maps-Ansicht:

scheduler.config.views.push({
            id:"locationView",
            rows:[
                {
                    view:"toolbar",
                    css:"dhx_topbar",
                    elements:[
                        {
                            view:'button',
                            inputWidth: 100,
                            css:"cancel",
                            label: scheduler.locale.labels.icon_back,
                            click: "$$('scheduler').$$('views').back()"
                        }
                    ]
                },
                {     view:"googlemap",
                    id:"mymap"
                }
            ]
        });

Einige Erklärungen zum obigen Code:

Der Befehl scheduler.config.views.push fügt der vorhandenen Scheduler-Sammlung mit mehreren Ansichten eine neue Ansicht hinzu.
rows:[{}] ordnet Elemente vertikal an. Jedes Objekt ist eine separate Zeile. Die Ansicht besteht aus einer Symbolleiste und Google Maps.
$$('scheduler').$$('views') bezieht sich auf ein Objekt mit mehreren Ansichten. Die back()-Methode wechselt die Mehrfachansicht zur zuvor aktiven Ansicht.

Die Kartenansicht sieht folgendermaßen aus:

Schritt 2

Wir müssen jetzt eine Schaltfläche in der Symbolleiste hinzufügen. Die am besten geeignete Ansicht ist die, in der Details für das ausgewählte Ereignis angezeigt werden.

//place this code after the 'localization' block (step 4)
scheduler.config.selected_toolbar = [
            {view:'button', inputWidth:scheduler.xy.icon_back, css:"cancel", id:"back",align:"left",label:scheduler.locale.labels.icon_back},
            {view:'button',  width:100, id:"location",align:"right", label:scheduler.locale.labels.label_location, click:"showLocation"}, //our new new button
            {view:'button',  width:70, id:"edit",align:"right",label:scheduler.locale.labels.icon_edit}
        ];

Der obige Code ist die Standarddefinition der Symbolleiste (Sie finden sie in der Dokumentation der Bibliothek) und unserer neuen Schaltfläche mit dem Namen Speicherort.

Während wir unsere App lokalisieren, müssen alle von uns hinzugefügten Labels in irgendeiner Weise benannt und der Datei locales.js hinzugefügt werden. Zum Beispiel fügen wir jetzt eine Schaltfläche mit dem Namen 'Standort' hinzu. In der Datei locales.js fügen wir den Parameter label_location:"Location" hinzu und setzen dann die Attributbezeichnung der Schaltfläche auf den Wert scheduler.locale.labels.label_location.

Das click-Attribut legt den Namen einer Handlerfunktion fest, die bei Schaltflächenklicks aufgerufen wird.

So sollte der Bildschirm mit den Ereignisdetails jetzt aussehen, nachdem wir die Schaltfläche Standort hinzugefügt haben:

Schritt 3

Bevor Sie zum Hauptcode wechseln, fügen Sie der Seite eine Variable mit dem Namen "marker" hinzu und weisen sie der Google Maps-Markierungsinstanz zu. Wir definieren diese Variable als global, da wir nur eine Markierung auf der Seite haben müssen (unsere Ereignisse dürfen nur einen Ort haben).

1	//put this code at the very beginning of the page
2	var marker = new google.maps.Marker({});

Die ausführbare Funktion oder der 'onClick'-Handler enthält den folgenden Code:

function showLocation(){
            if (marker!=null){
                /*shows the view of multiview*/
                $$("scheduler").$$("locationView").show();
                /*necessary to resize google map*/
                $$("scheduler").$$("locationView").resize();

                /*event data*/
                var eventId = $$("scheduler").getCursor();
                var item = $$("scheduler").item(eventId);

                /*LatLng point*/
                var point = new google.maps.LatLng(item.lat,item.lng);

                var map = $$("scheduler").$$("mymap").map;
                map.setZoom(6);
                map.setCenter(point);
                google.maps.event.clearListeners(map, "click");

                marker.position= point;
                marker.map = map;
                marker.title = item.event_location;
                marker.setMap(map);
            }
        };

Lassen Sie mich noch einmal erklären, was diese Codezeilen bewirken:

Die ersten Zeilen zeigen die im ersten Unterschritt erstellte Ansicht und ändern die Größe, um den gesamten Bildschirm auszufüllen.
In den nächsten Zeilen wird das Objekt eines Ereignisses angezeigt, auf dem sich der Cursor gerade befindet. Beachten Sie, dass die DHTMLX-Bibliothek in ihrer inneren Logik eine Cursor-Konzeption verwendet. Um die korrekte Verarbeitung sicherzustellen, sollten Sie mit dem 'Cursor' arbeiten, während Sie das aktuell ausgewählte Element erhalten. In den meisten Fällen gibt die Methode getCursor() das aktuell ausgewählte Element zurück. Es gibt nur eine Ausnahme: Wenn Sie ein Ereignis löschen, entfernt der Scheduler die Auswahl, behält jedoch den Cursor bei und zeigt auf das nicht vorhandene Ereignis. Sei vorsichtig damit!
In der zweiten Zeile wird mithilfe der Google Maps-API ein Punkt basierend auf den angegebenen Koordinaten (den in der Datenbank gespeicherten Ereigniskoordinaten) erstellt. Erfahren Sie mehr über die Google Mas-API.
$$("scheduler").$$("mymap") bezieht sich auf die Ansicht "Googlemap". Die Eigenschaft "map" gibt das Objekt von Google Maps zurück.
Die letzten Linien zoomen, zentrieren die Karte und setzen die Markierung auf den angegebenen Punkt.

Schritt 4

Um dem Vorschaubildschirm Standortinformationen hinzuzufügen, sollten wir die Standardbildschirmvorlage neu definieren. Damit wir nicht die gesamte Vorlage (die ziemlich groß ist) neu schreiben müssen, verwenden wir einen Trick:

    var default_temp =  scheduler.templates.selected_event;

    scheduler.templates.selected_event = function(obj)
    {
        var html = default_temp(obj);
    if (html!=""){
        html = html.replace(/<\/div>$/,"");
        html += "<div class='event_title'>"+scheduler.locale.labels.label_location+"</div>";
        html += "<div class='event_text'>"+obj.event_location+"</div>";
        html += "</div>";
    }
    return html;
    };

Folgendes haben wir mit dem obigen Code getan:

Die Variable default_temp enthält die Standardvorlage des Bildschirms.
'wrapper' ist ein neues div-Element, das die Standortinformationen enthält.
'event_text' ist die vordefinierte CSS-Klasse, die in der Standardvorlage verwendet wird. Wir verwenden sie, um die angezeigten Ereignisinformationen einheitlich zu gestalten.
scheduler.locale.labels.label_location ist die Bezeichnung, die wir im vorherigen Schritt hinzugefügt haben ('Location' im englischen Gebietsschema).

Jetzt sieht der Vorschaubildschirm folgendermaßen aus (mit zusätzlichen Standortinformationen):

Mobile Event Calendar - Event Preview Screen

6. Festlegen eines Ereignisorts in Google Maps

Jetzt kann unsere App den Ort eines Ereignisses anzeigen. Aber was ist mit dem Bearbeiten des Veranstaltungsorts oder dem Festlegen des Standorts für neue Ereignisse?

Jetzt müssen wir den Benutzern erlauben, den Ereignisort festzulegen/zu bearbeiten und zwei verschiedene Möglichkeiten bereitzustellen, um die Adresse in die Texteingabe einzugeben und direkt auf die Karte zu zeigen. Folgendes müssen wir tun:

Fügen Sie dem Bearbeitungsformular Steuerelemente hinzu
Stellen Sie Handler bereit, die die eingehenden Daten verarbeiten

Schritt 1

Wir sollten dem Ereignisbearbeitungsformular mindestens zwei Steuerelemente hinzufügen: eines ist eine Texteingabe zum Eingeben der Ereignisadresse, und das zweite Steuerelement kann eine Schaltfläche sein, sodass der Benutzer durch Klicken darauf die Karte öffnen und den Punkt richtig einstellen kann auf der Karte.

Wir nehmen das Standard-Bearbeitungsformular und fügen dann die genannten Elemente hinzu (die Liste der verfügbaren Steuerelemente):

 scheduler.config.form = [
            {view:"text", label:scheduler.locale.labels.label_event, id:"text", name:'text'},
            {view:"text", label:scheduler.locale.labels.label_details, id:'details'},
            {view:"datetext", label:scheduler.locale.labels.label_start,    id:'start_date',name:'start_date', dateFormat:scheduler.config.form_date},
            {view:"datetext", label:scheduler.locale.labels.label_end,    id:'end_date',name:'end_date', dateFormat:scheduler.config.form_date},
            {view:"toggle", id:'allDay', label:"", options: [{value:"0",label:scheduler.locale.labels.label_time},{value:"1",label:scheduler.locale.labels.label_allday}], align: "right",value:"0"},
            //custom ‘location’ sections
            {view:"text", label:scheduler.locale.labels.label_location, id:"event_location"},
            {view:'button', id:"setLocation", label:scheduler.locale.labels.label_locate, click:"setLocation"},
            {view:"text", label:"Latitude", id:'lat', hidden:true},
            {view:"text", label:"Longitude", id:'lng', hidden:true}
];

Wir haben dem Bearbeitungsformular für Ereignisse gerade fünf neue Elemente hinzugefügt:

Ein Textfeld zum manuellen Eingeben der Adresse, ein Element mit der id:"event_location".
Eine Schaltfläche, mit der Benutzer Google Maps öffnen und einen Punkt festlegen (id:"setLocation"). Das Element verfügt über das Attribut 'click', mit dem wir ihm eine Ereignishandlerfunktion 'onclick' zuweisen können (wir haben es als "setLocation" bezeichnet).
Zwei versteckte Felder ('Breite' und 'Länge') zum Speichern der geografischen Punktkoordinaten. Ich sollte erwähnen, dass der mobile Scheduler Ereignisdaten automatisch speichert, wenn der Benutzer auf die Schaltfläche "Speichern" klickt. Der Scheduler entnimmt Daten für das Ereignis aus den im Bearbeitungsformular definierten Eingaben. Aus diesem Grund haben wir diese Felder hinzugefügt, aber ausgeblendet, da sie für die Endbenutzer keinen Wert haben und nur zur Visualisierung der gespeicherten Inhalte an DB-Speicherorten in Google Maps benötigt werden.
Ein 'Notizen'-Feld (id:"details"). Es ist ein völlig optionales Feld. Wir fügen es nur hinzu, um Benutzern die Möglichkeit zu geben, Notizen zu bevorstehenden Ereignissen hinzuzufügen. Das Feld enthält den zugehörigen vordefinierten Parameter im Gebietsschemaobjekt.

Jetzt haben wir ein Formular zum Hinzufügen/Bearbeiten von Ereignissen wie das folgende:

Schritt 2

Bevor wir die ausführbare Funktion für die Eingabe angeben, sollten wir ein Ereignis definieren, das ausgelöst wird und die Funktion aufruft. In der Bibliothek können integrierte Ereignisse oder native HTML-Ereignisse verwendet werden. Wir haben das Ereignis 'onFocusOut' ausgewählt, das auftritt, nachdem ein Element den Fokus verloren hat.

Um das Ereignis an die Eingabe anzuhängen, fügen wir der Funktion dhx.ready(function(){..} den folgenden Befehl hinzu:

1	dhx.event($$('scheduler').$$("event_location").$view, "focusout", setPlaceCoordinates);

dhx.event ist ein Helfer, der eine Ereignishandlerfunktion für ein HTML-Element anfügt.
$$('scheduler').$$("event_location") bezieht sich auf die Eingabe. $view gibt das Ansichtsobjekt zurück.
Die Funktion setPlaceCoordinates() nimmt eine vom Benutzer eingegebene Adresse, erkennt deren Koordinaten (zum Speichern in der Datenbank) und zeigt die Adressmarkierung auf der Karte an.

Die Funktion setPlaceCoordinates() hat die folgende Implementierung:

function setPlaceCoordinates(){
            if (marker!=null){
                var eventId = $$("scheduler").getCursor();

                var geocoder =  new google.maps.Geocoder();
                var address = $$('scheduler').$$("event_location").getValue();

                if (address !=""){
                     geocoder.geocode( { 'address': address}, function(results, status) {
                        if (status == google.maps.GeocoderStatus.OK) {
                            $$('scheduler').$$("lat").setValue(results[0].geometry.location.Xa);
                            $$('scheduler').$$("lng").setValue(results[0].geometry.location.Ya);
                        } else {
                            dhx.alert("Unfortunately,your location is not found.");
                            if ($$('scheduler').$$("lat")==""){
                                $$('scheduler').$$("lat").setValue(51.477840);
                                $$('scheduler').$$("lng").setValue(-0.001492);
                                $$('scheduler').$$("event_location").setValue("Blackheath Avenue London, Greenwich, Greater London SE10 8XJ, UK");
                            } else{
                                if (eventId!=null){
                                    var item = $$("scheduler").item(eventId);
                                    $$('scheduler').$$("event_location").setValue(item.event_location);
                                }
                            }
                        }
                     });
                }
            }
        };

Betrachten wir die Reihenfolge, in der der Interpreter den Handlercode durchläuft:

Mit dem Befehl $$("scheduler").getCursor() erhält der Interpreter das Objekt des Ereignisses, für das das Bearbeitungsformular geöffnet ist.
Aktiviert dann den Geokodierungsdienst (der Adressen wie "Berlin, Deutschland" in geografische Koordinaten konvertiert) und übernimmt die eingegebene Adresse aus der Eingabe (var address).

Der bedingte Root-if-else-Ausdruck überprüft den Wert des Textfelds "Location":

Wenn der Wert eine leere Zeichenfolge ist, wird die Suche übersprungen.
Wenn der Nutzer einen Wert eingegeben hat, wird dieser Wert an den Google Maps-Dienst übergeben.
Wenn eine Adresse gefunden wird, schreibt der Interpreter seine Koordinaten in die verborgenen Felder "Breite" und "Länge".
Wenn die eingegebene Adresse nicht vorhanden ist oder der Benutzer das Bearbeitungsformular schließt, bevor der Dienst die Suche beendet hat, benachrichtigt die App die Nachricht über nicht erfolgreiche Ergebnisse und speichert in den Eingaben die Koordinaten für das Ereignis in der Datenbank.
Der bedingte Ausdruck if ($$('Scheduler').$$("lat")==""){}else{} wird verwendet, um zu überprüfen, ob das betreffende Ereignis in der Datenbank gespeichert ist oder ob es sich um ein neues Ereignis handelt (denn wenn das Ereignis neu ist, konnte der Interpreter seine Koordinaten nicht von db übernehmen und es tritt ein Fehler auf). Falls die Veranstaltung neu ist und die Suche nicht abgeschlossen wurde, weist die App den Veranstaltungskoordinaten des Greenwich Royal Observatory zu.

Schritt 3

Die ausführbare Funktion oder ein 'onClick'-Handler, der auftritt, wenn der Benutzer auf die Schaltfläche 'Auf der Karte suchen' klickt, enthält diesen Code:

        function setLocation(){
            if (marker!=null){
                 /*shows the view of multiview*/
                $$("scheduler").$$("locationView").show();
                /*necessary to resize google map*/
                $$("scheduler").$$("locationView").resize();
                var point;
                var eventId = $$("scheduler").getCursor();

                 if (eventId!=null){
                     var item = $$("scheduler").item(eventId);
                    /*LatLng point*/
                     point = new google.maps.LatLng(item.lat,item.lng);
                    marker.title = item.event_location;
                 } else{
                    point = new google.maps.LatLng(51.477840, -0.001492); // the coordinates of the Greenwich Royal Observatory
                    marker.title = "Blackheath Avenue London, Greenwich, Greater London SE10 8XJ, UK";
            }

            var map = $$("scheduler").$$("mymap").map;
            map.setZoom(6);
            map.setCenter(point);

            marker.position= point;
            marker.map = map;
            marker.setMap(map);

            google.maps.event.addListener(map, "click", function (e) {

                    var request = {
                        location:e.latLng,
                        radius:'1'
                    };
                    service = new google.maps.places.PlacesService(map);
                    service.search(request, function(results, status){
                        if (status == google.maps.places.PlacesServiceStatus.OK) {
                            this.service.getDetails({ reference: results[0].reference }, function(details, status) {
                                if (status == google.maps.places.PlacesServiceStatus.OK) {
                                    $$('scheduler').$$("lat").setValue(details.geometry.location.Xa);
                                    $$('scheduler').$$("lng").setValue(details.geometry.location.Ya);

                                    marker.title = details.formatted_address;
                                    marker.position= e.latLng;
                                    marker.map = map;
                                    marker.setMap(map);
                                    $$('scheduler').$$("event_location").setValue(marker.title);
                                }
                            });
                        }
                    });

            });
}
    };

Die Zeilen des Codes führen Folgendes aus:

Die ersten Zeilen zeigen die Ansicht mit Google Maps im Vollbildmodus und rufen das Ereignisobjekt ab.
Der erste bedingte if-else-Ausdruck prüft, ob der Benutzer ein vorhandenes Ereignis bearbeitet oder ein neues erstellt. Diese Überprüfung wird durchgeführt, um die anfängliche Markierung auf der Karte zu setzen.
Wenn der Benutzer ein vorhandenes Ereignis bearbeitet, generiert der Code einen Punkt mit den Koordinaten aus der Datenbank.
Wenn der Benutzer ein neues Ereignis erstellt, weist der Code ihm die Koordinaten des Greenwich Royal Observatory zu.
$$("scheduler").$$("mymap") bezieht sich auf die Ansicht 'Googlemap'. Die Karteneigenschaft gibt das Objekt von Google Maps zurück.
Die nächsten Zeilen zoomen, zentrieren die Karte und setzen die Markierung auf den angegebenen Punkt.
Der Befehl google.maps.event.addListener() fügt eine Funktion zum Behandeln von Klicks hinzu, die der Benutzer auf der Karte vorgenommen hat. Weitere Informationen zur verwendeten API finden Sie in den Google Mas API-Webdiensten.

Noch ein Punkt zu erwähnen: In diesem Schritt fügen wir eine Funktion zum Behandeln von Kartenklicks hinzu. Falls der Benutzer jedoch nur den Ort eines Ereignisses anzeigt, sollte er keine Möglichkeit haben, es zu ändern (Schritt 5). Zusammen mit dem Hinzufügen des 'click'-Listeners in der setLocation-Funktion schalten wir ihn für den' Vorschau'-Modus (die showLocation-Funktion) aus.

Fügen Sie diesen Befehl dem vorhandenen Code der Funktion showLocation() hinzu:

1	function showLocation(){
2	google.maps.event.clearListeners(map, "click");
3	...
4	};

Das ist das Ende dieses Tutorials! Jetzt können Sie das endgültige Demopaket herunterladen, um zu sehen, wie alles funktioniert und in den von uns erstellten Veranstaltungskalender passt.

Schlussfolgerung

Mit der zunehmenden Nutzung von Mobiltelefonen muss nicht gesagt werden, wie wichtig es ist, eine mobile Version einer Website oder App zu haben. Wenn Sie einen Veranstaltungskalender benötigen, der online auf Telefonen angezeigt und bearbeitet werden kann, kann die mobile Version von dhtmlxScheduler viel Zeit sparen, da sie eine gebrauchsfertige Kalender-Benutzeroberfläche und eine Reihe grundlegender Funktionen bietet. Mit der Open-Source-GNU-GPL-Lizenz können Sie den Scheduler kostenlos auf Websites und internen Apps verwenden.