Creazione di un calendario eventi mobile con DHTMLX

Questo tutorial descrive come creare un calendario mobile basato su HTML5 per tenere traccia di conferenze ed eventi eseguiti su telefoni iOS e Android utilizzando una versione mobile di dhtmlxScheduler (open source, GPL). Alla fine, gli utenti saranno in grado di aggiungere e modificare eventi, selezionare la posizione della conferenza su Google Maps e vedere gli eventi nelle visualizzazioni giorno, mese o lista.

---

Panoramica del progetto

La demo finale include il calendario degli eventi (lo chiameremo anche lo schedulatore) che visualizza gli eventi in tre visualizzazioni standard: elenco, giorno e mese. Mentre l'utente finale aggiunge, elimina o modifica gli eventi, l'app di calendario salva le modifiche sul server e aggiorna il database. La demo rileva automaticamente anche le impostazioni locali in uso e adatta l'interfaccia del calendario di conseguenza. L'utente finale può impostare la posizione dell'evento su Google Maps in due modi: digitando l'indirizzo o puntandolo su Google Maps.

---

1. Inizia

Innanzitutto, scarica l'ultimo pacchetto della versione mobile di dhtmlxScheduler. Si basa sul framework DHTMLX Touch e viene distribuito sotto una licenza open source (GNU GPL).

Lo scheduler mobile DHTMLX ha una cosiddetta architettura multiview. Visualizza una serie di schermate che si alternano tra loro. Ogni schermata è una vista singolare in cui è possibile aggiungere qualsiasi contenuto. Per impostazione predefinita, lo scheduler contiene le seguenti viste:

• Schermata di anteprima dell'evento (visualizza una breve informazione sull'evento)
• Modulo Dettagli (utilizzato per modificare i dettagli dell'evento)
• Modulo di modifica inizio / fine (datepicker incorporati per scegliere le date di inizio e di fine dell'evento)
• Visualizzazioni del calendario: elenco (agenda), giorno e mese

Le viste predefinite sono personalizzabili (è possibile trovare le definizioni predefinite nella documentazione). Inoltre, c'è la possibilità di aggiungere nuove viste personalizzate.

---

2. Rendering di un calendario di eventi su una pagina

Passo 1

Inizieremo con i file di codice richiesti per visualizzare lo scheduler mobile su una pagina: dhxscheduler_mobile.js e dhxscheduler_mobile.css.

Passo 2

Aggiungi il seguente codice alla tua pagina:

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

Ecco cosa fanno queste righe di codice:

• chiamando il dhx.ready () la funzione garantisce che il codice posto all'interno venga chiamato dopo che la pagina è stata completamente analizzata, proteggendola da potenziali errori. Questo è facoltativo, ma ti incoraggio ad usarlo.
• dhx.fullScreen () attiva la modalità a schermo intero.
• dhx.ui () è un costruttore di oggetti per lo scheduler (utilizzato nella libreria DHTMLX Touch).
• visualizza: "scheduler" - imposta il componente da rendere ('scheduler' è il nome hardcoded dello scheduler mobile).
• id è un parametro facoltativo che imposta l'id dell'oggetto. Abbiamo specificato questo parametro poiché in seguito ci riferiremo a questo oggetto.

Dopo aver incluso i file richiesti e aggiunto il codice sopra, il calendario viene visualizzato su una pagina:

Lo scheduler ha un'interfaccia utente pulita e semplice che puoi usare così com'è. È abbastanza flessibile in modo da poter configurare il suo aspetto grafico per soddisfare le esigenze di progettazione, se lo si desidera.

---

3. Caricamento e salvataggio dei dati

Passo 1

Per caricare i dati nel calendario, useremo il caricare() metodo. Dato che stiamo per caricare i dati dal server, dovremmo impostare l'unico parametro (il percorso per lo script del server).

Per fornire la possibilità di salvare i dati sul server, è necessario definire un altro parametro nel costruttore di oggetti - salvare. Dobbiamo anche specificare lo stesso script sul lato server che abbiamo specificato nel file caricare() metodo.

 dhx.ui (view: "scheduler", id: "scheduler", salva: "data / data.php"); $$ ( "scheduler") Carico ( "Dati / data.php.");

Per fare riferimento allo scheduler attraverso il suo id, usiamo il $$ ( "scheduler") disco.

Per fare riferimento alle visualizzazioni dello scheduler (o agli elementi delle viste), è necessario scrivere una catena di ereditarietà delle proprietà di dipendenza completa: $$ ( 'scheduler " '). $$ (' view_id '). $$ (' viewElement_id') ... È possibile controllare gli id ​​degli elementi nella relativa documentazione.

Passo 2

Il data.php il file contiene la logica di comunicazione client-server per l'integrazione con il lato server. Per definire la logica, useremo un helper speciale dhtmlxConnector che implementa tutta la routine (ci sono versioni per Java, .NET, PHP e ColdFusion, ed è gratuito da usare con i widget UI dhtmlx). Puoi ottenere maggiori dettagli sull'uso di dhtmlxConnector qui.

Useremo la versione di PHP e creeremo il seguente codice nel data.php file:

 render_table ( "events_map", "event_id", "data_inizio, data_finale, event_name, dettagli, event_location, lat, lng"); ?>

Le linee del codice eseguono le seguenti operazioni:

• La prima riga include il file di codice richiesto.
• Le due righe successive stabiliscono una connessione al server e aprono il database SQL specificato.
• Le ultime due righe creano un oggetto connettore ($ scheduler) e configurano i dati da recuperare.

Nel pacchetto demo allegato, è possibile trovare il file di dettagli del database 'schedulertest'.

Mentre completiamo questo passaggio, abbiamo un calendario popolato con i nostri dati demo:

---

4. Localizzazione

Passo 1

Con questo passo renderemo il nostro calendario in grado di adattarsi a una particolare lingua e regione.

Per prima cosa, dobbiamo specificare un oggetto locale (nella libreria ha il nome hardcoded - 'locali') che definirà tutte le etichette utilizzate nel calendario.

Creeremo un oggetto in un file separato non per "sovraffollare" il file .html principale. Il file sarà simile a questo:

 var locales = "de": ..., "en": ..., ...

Per vedere la versione completa del 'locali' oggetto, apri il locales.js file incluso nella cartella 'codebase' del pacchetto di download. Nella nostra demo, abbiamo incluso le lingue per solo due lingue (inglese e tedesco) come esempio. Se necessario, è possibile aggiungere le impostazioni locali di qualsiasi altra lingua in questo file.

Passo 2

Quindi includiamo il locales.js file sulla pagina:

Quindi aggiungere il seguente codice al file html:

 // inserisci questo codice all'inizio della pagina e non nella funzione dhx.ready () var locale = (navigator.language || navigator.systemLanguage || navigator.userLanguage || 'en'). substr (0, 2) .tolowercase (); if (! locales [locale]) locale = 'en'; scheduler.locale.labels = locali [locale]; dhx.Date.Locale = locales [locale] .calendar;

Le linee del codice eseguono le seguenti operazioni:

• La prima riga ottiene la versione della lingua del browser.
• Le righe successive impostano le impostazioni internazionali in base al valore restituito dalla prima riga.
• scheduler.locale.labels imposta le impostazioni locali per le etichette comuni nello scheduler.
• dhx.Date.Locale imposta le impostazioni locali per i calendari utilizzati nello scheduler.

Il calendario con una locale tedesca si presenta così:

---

5. Visualizzazione di una posizione dell'evento su Google Maps

Non sarebbe bello se gli utenti potessero vedere il luogo in cui si verifica un evento? Ecco l'elenco dei passaggi necessari per fornire questa opportunità nella tua app:

• Crea una vista separata per Google Maps
• Aggiungi un pulsante, facendo clic su di esso l'utente aprirà la visualizzazione di Maps
• Aggiungi una funzione di gestore "onclick" che sarà responsabile della visualizzazione di Google Maps con l'indicatore di evento appropriato su di esso
• Aggiungi le informazioni sulla posizione dell'evento nella schermata di anteprima dell'evento

Passo 1

Iniziamo creando una visualizzazione di Maps. Per il nostro primo passo includeremo un altro file nella pagina:

Quindi dobbiamo aggiungere una nuova vista che mostrerà Google Maps. La libreria DHTMLX Touch ha il 'Google Map' componente che rende l'integrazione con Google Maps abbastanza semplice (documentazione correlata).

Ecco la nostra vista di Google Maps:

 scheduler.config.views.push (id: "locationView", righe: [view: "toolbar", css: "dhx_topbar", elementi: [view: 'button', inputWidth: 100, css: "cancel" , etichetta: scheduler.locale.labels.icon_back, fare clic su: "$$ ('scheduler'). $$ ('views'). back ()"], view: "googlemap", id: "mymap" ]);

Alcune spiegazioni sul codice di cui sopra:

• scheduler.config.views.push comando aggiunge una nuova vista alla raccolta multi-view dello scheduler esistente.
• righe: [] sistema gli elementi verticalmente. Ogni oggetto è una riga separata. La visualizzazione è composta da una barra degli strumenti e da Google Maps.
• $$ ( 'scheduler'). $$ ( 'vista') si riferisce all'oggetto a più viste. Il metodo back () cambia visualizzazione multipla alla vista precedentemente attiva.

La vista Mappa sarà simile a questa:

Passo 2

Ora dobbiamo aggiungere un pulsante sulla barra degli strumenti. La vista più appropriata è quella che visualizza i dettagli per l'evento selezionato.

 // posiziona questo codice dopo il blocco 'localization' (passaggio 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", // il nostro nuovo nuovo pulsante view: 'button', width: 70, id: "edit", align: "right", label: scheduler.locale.labels.icon_edit];

Il codice sopra è la definizione predefinita della barra degli strumenti (la puoi trovare nella documentazione della biblioteca) e il nostro nuovo pulsante denominato come Posizione.

Mentre localizziamo la nostra app, tutte le etichette che aggiungiamo devono essere nominate in qualche modo e aggiunte al locales.js file. Ad esempio, ora aggiungeremo un pulsante con il nome "Posizione". Quindi, nel locales.js file aggiungiamo parametro label_location: "Location" e quindi impostare l'etichetta dell'attributo del pulsante su scheduler.locale.labels.label_location valore.

L'attributo click imposta il nome di una funzione di gestore che verrà invocata sui clic del pulsante.

Ecco come dovrebbe apparire lo schermo con i dettagli dell'evento ora che abbiamo aggiunto il Posizione pulsante:

Passaggio 3

Prima di passare al codice principale, aggiungiamo alla pagina una variabile denominata come "indicatore" e assegnala all'istanza dell'indicatore di Google Maps. Definiamo questa variabile come globale perché abbiamo bisogno di avere un solo marker sulla pagina (i nostri eventi devono avere una sola posizione).

 // inserisci questo codice all'inizio della pagina var marker = new google.maps.Marker ();

La funzione eseguibile o il gestore 'onClick' contiene il seguente codice:

 function showLocation () if (marker! = null) / * mostra la vista di multiview * / $$ ("scheduler"). $$ ("locationView"). show (); / * necessario per ridimensionare google map * / $$ ("scheduler"). $$ ("locationView"). resize (); / * dati evento * / 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 (punto); google.maps.event.clearListeners (map, "click"); marker.position = point; marker.map = map; marker.title = item.event_location; marker.setMap (mappa); ;

Ancora una volta, lascia che ti spieghi cosa fanno queste righe di codice:

• Le prime linee mostrano la vista creata sulla prima sottofase e la ridimensionano per riempire l'intero schermo.
• Le righe successive ottengono l'oggetto di un evento su cui il cursore è attualmente attivo. Nota, la libreria DHTMLX usa una concezione 'cursore' nella sua logica interna. Pertanto, per garantire l'elaborazione corretta, è necessario operare con il "cursore" mentre si ottiene l'elemento attualmente selezionato. Nella maggior parte dei casi, il GetCursor () metodo restituisce l'elemento attualmente selezionato. Esiste una sola eccezione: quando si elimina un evento, lo scheduler rimuove la selezione ma mantiene il cursore e punta all'evento inesistente. Stai attento con questo!
• La seconda riga utilizza l'API di Google Maps per creare un punto in base alle coordinate specificate (le coordinate dell'evento che sono memorizzate nel database). Ulteriori informazioni sull'API di Google Mas.
• $$ ( "scheduler"). $$ ( "myMap") si riferisce alla vista 'googlemap'. La proprietà "map" restituisce l'oggetto di Google Maps.
• Le ultime linee eseguono lo zoom, centrano la mappa e impostano il marker nel punto specificato.

Passaggio 4

Per aggiungere informazioni sulla posizione alla schermata di anteprima, dovremmo ridefinire il modello di schermata predefinito. In modo che non dobbiamo riscrivere l'intero modello (che è piuttosto grande), useremo un trucco:

 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 + = "
"+ Scheduler.locale.labels.label_location +"
"; html + ="
"+ Obj.event_location +"
"; html + ="

 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", etichetta: scheduler.locale.labels.label_start, id: 'start_date', nome: 'start_date', dateFormat: scheduler.config.form_date,  view: "datetext", label: scheduler.locale.labels.label_end, id: 'end_date', nome: 'end_date', dateFormat: scheduler.config.form_date, view: "toggle", id: 'allDay', label: "", opzioni: [valore: "0", etichetta: scheduler.locale.labels.label_time, valore: "1", etichetta: scheduler.locale.labels.label_allday], allinea: "right" , value: "0", // sezioni 'location' personalizzate visualizza: "testo", etichetta: scheduler.locale.labels.label_location, id: "event_location", view: 'button', id: "setLocation ", label: scheduler.locale.labels.label_locate, fare clic su:" setLocation ", view:" text ", etichetta:" Latitude ", id:" lat ", hidden: true, view:" text ", etichetta: "Longitudine", id: "lng", nascosto: vero];

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

 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 ('indirizzo': indirizzo, funzione (risultati, stato) if (stato == google.maps.GeocoderStatus.OK) $$ ('scheduler'). $$ ("lat"). setValue (risultati [0] .geometry.location.Xa); $$ ('scheduler'). $$ ("lng"). setValue (risultati [0] .geometry.location.Ya ); else dhx.alert ("Sfortunatamente, la tua posizione non è stata trovata."); 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, Regno Unito "); else if (eventId! = null) var item = $$ (" scheduler "). item (eventId); $$ ('scheduler'). $$ ("event_location"). setValue (item.event_location);); ;

 function setLocation () if (marker! = null) / * mostra la vista di multiview * / $$ ("scheduler"). $$ ("locationView"). show (); / * necessario per ridimensionare google map * / $$ ("scheduler"). $$ ("locationView"). resize (); punto var; 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); // le coordinate dell'Osservatorio Reale di Greenwich marker.title = "Blackheath Avenue London, Greenwich, Greater London SE10 8XJ, UK";  var map = $$ ("scheduler"). $$ ("mymap"). map; map.setZoom (6); map.setCenter (punto); marker.position = point; marker.map = map; marker.setMap (mappa); google.maps.event.addListener (mappa, "clic", funzione (e) var request = posizione: e.latLng, raggio: '1'; service = new google.maps.places.PlacesService (mappa); service.search (request, function (results, status) if (status == google.maps.places.PlacesServiceStatus.OK) this.service.getDetails (reference: results [0] .reference, function (dettagli, stato) 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 (mappa ; $$ ('scheduler'). $$ ("event_location"). setValue (marker.title);););); ;

 function showLocation () google.maps.event.clearListeners (map, "click"); ...;