Création d'un calendrier d'événements mobiles avec DHTMLX

Ce tutoriel explique comment créer un calendrier mobile basé sur HTML5 pour suivre les conférences et les événements organisés sur des téléphones iOS et Android à l'aide d'une version mobile de dhtmlxScheduler (open source, GPL). À la fin, les utilisateurs pourront ajouter et modifier des événements, sélectionner l'emplacement de la conférence sur Google Maps et voir les événements sous forme de vues par jour, par mois ou par liste..

---

Aperçu du projet

La démo finale inclut le calendrier des événements (nous l'appellerons également planificateur) qui affiche les événements dans trois vues standard: liste, jour et mois. Alors que l'utilisateur final ajoute, supprime ou édite des événements, l'application Calendrier enregistre les modifications apportées au serveur et met à jour la base de données. La démonstration détecte également automatiquement les paramètres régionaux utilisés et adapte l'interface du calendrier en conséquence. L’utilisateur final peut définir le lieu de l’événement sur Google Maps de deux manières: en tapant l’adresse ou en la pointant sur Google Maps..

---

1. Commencez

Tout d’abord, téléchargez le dernier package de la version mobile de dhtmlxScheduler. Il est basé sur le framework DHTMLX Touch et distribué sous une licence open source (GNU GPL).

Le planificateur DHTMLX mobile a une architecture dite multi-vues. Il affiche un ensemble d'écrans qui basculent entre eux. Chaque écran est une vue unique où vous pouvez ajouter n’importe quel contenu. Par défaut, le planificateur contient les vues suivantes:

• Écran de prévisualisation de l'événement (affiche une info courte sur l'événement)
• Formulaire de détails (utilisé pour éditer les détails de l'événement)
• Formulaire d'édition début / fin (sélecteurs de date intégrés pour choisir les dates de début et de fin de l'événement)
• Vues du calendrier: liste (agenda), jour et mois

Les vues prédéfinies sont personnalisables (vous pouvez trouver les définitions par défaut dans la documentation). En outre, il est possible d’ajouter de nouvelles vues personnalisées..

---

2. Rendu d'un calendrier d'événements sur une page

Étape 1

Commençons par les fichiers de code requis pour afficher le planificateur mobile sur une page: dhxscheduler_mobile.js et dhxscheduler_mobile.css.

Étape 2

Ajoutez le code suivant à votre page:

 dhx.ready (function () dhx.ui.fullScreen (); dhx.ui (vue: "ordonnanceur", id: "ordonnanceur"););

Voici ce que font ces lignes de code:

• appeler le dhx.ready () function garantit que le code placé à l'intérieur est appelé après l'analyse complète de la page, ce qui la protège des erreurs potentielles. C'est optionnel mais je vous encourage à l'utiliser.
• dhx.fullScreen () active le mode plein écran.
• dhx.ui () est un constructeur d'objet pour le planificateur (utilisé dans la bibliothèque DHTMLX Touch).
• vue: "ordonnanceur" - définit le composant à rendre ('ordonnanceur' est le nom codé en dur de l'ordonnanceur mobile).
• identifiant est un paramètre facultatif qui définit l'ID d'objet. Nous avons spécifié ce paramètre comme nous allons nous référer à cet objet plus tard.

Après avoir inclus les fichiers requis et ajouté le code ci-dessus, le calendrier est affiché sur une page:

Le planificateur a une interface utilisateur nette et simple pour que vous puissiez l'utiliser telle quelle. Il est suffisamment flexible pour que vous puissiez configurer son apparence pour répondre à vos besoins de conception, si vous le souhaitez..

---

3. Chargement et sauvegarde des données

Étape 1

Pour charger des données dans le calendrier, nous allons utiliser le charge() méthode. Comme nous allons charger les données du serveur, nous devrions définir le seul paramètre (le chemin du script du serveur)..

Pour permettre la sauvegarde des données sur le serveur, nous devons définir un paramètre supplémentaire dans le constructeur d'objet. - enregistrer. Nous devons également spécifier le même script côté serveur que celui spécifié dans charge() méthode.

 dhx.ui (view: "ordonnanceur", id: "ordonnanceur", enregistrer: "data / data.php"); $$ ("ordonnanceur"). load ("data / data.php");

Pour faire référence au planificateur par son identifiant, nous utilisons le $$ ("ordonnanceur") record.

Pour faire référence aux vues du planificateur (ou éléments de vues), vous devez écrire une chaîne d'héritage de propriété de dépendance complète: $$ ('ordonnanceur "'). $$ ('view_id'). $$ ('viewElement_id')… Vous pouvez vérifier les identifiants d'éléments dans la documentation associée.

Étape 2

le data.php Le fichier contient la logique de communication client-serveur à intégrer avec le côté serveur. Pour définir la logique, nous allons utiliser un assistant spécial, dhtmlxConnector, qui implémente toute la routine (il existe des versions pour Java, .NET, PHP et ColdFusion, et il est libre de l'utiliser avec les widgets de l'interface utilisateur dhtmlx). Vous pouvez obtenir plus de détails sur l’utilisation de dhtmlxConnector ici.

Nous allons utiliser la version PHP et créer le code suivant dans le data.php fichier:

 render_table ("events_map", "event_id", "start_date, end_date, event_name, details, location_event, lat, lng"); ?>

Les lignes du code font ce qui suit:

• La première ligne comprend le fichier de code requis.
• Les deux lignes suivantes établissent une connexion au serveur et ouvrent la base de données SQL spécifiée..
• Les deux dernières lignes créent un objet connecteur ($ scheduler) et configurent les données pour les récupérer..

Dans le package de démonstration ci-joint, vous pouvez trouver le fichier de vidage de la base de données 'schedulertest'.

À la fin de cette étape, nous avons un calendrier contenant nos données de démonstration:

---

4. Localisation

Étape 1

Avec cette étape, nous ferons en sorte que notre calendrier puisse s’adapter à une langue et à une région.

Tout d’abord, nous devons spécifier un objet de paramètres régionaux (dans la bibliothèque, il porte le nom codé en dur). - 'lieux') qui définira toutes les étiquettes utilisées dans le calendrier.

Nous allons créer un objet dans un fichier séparé pour ne pas "surcharger" le fichier .html principal. Le fichier ressemblera à ceci:

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

Pour voir la version complète du 'lieux' objet, ouvrez le locales.js fichier inclus dans le dossier 'codebase' du package de téléchargement. Dans notre démo, nous avons inclus les paramètres régionaux pour seulement deux langues (anglais et allemand) à titre d'exemple. Si nécessaire, vous pouvez ajouter les paramètres régionaux de toute autre langue dans ce fichier..

Étape 2

Ensuite, nous incluons le locales.js fichier sur la page:

Ensuite, ajoutez le code suivant au fichier html:

 // place ce code au tout début de la page et non dans la fonction dhx.ready () 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;

Les lignes du code font ce qui suit:

• La première ligne obtient la version linguistique du navigateur.
• Les quelques lignes suivantes définissent les paramètres régionaux en fonction de la valeur renvoyée par la première ligne..
• scheduler.locale.labels définit les paramètres régionaux pour les étiquettes communes dans le planificateur.
• dhx.Date.Locale définit les paramètres régionaux pour les calendriers utilisés dans le planificateur.

Le calendrier avec des paramètres régionaux allemands ressemble à ceci:

---

5. Affichage d'un lieu d'événement sur Google Maps

Ne serait-il pas formidable que les utilisateurs puissent voir l'endroit où se déroule un événement? Voici la liste des étapes nécessaires pour offrir une telle opportunité dans votre application:

• Créer une vue séparée pour Google Maps
• Ajouter un bouton, en cliquant dessus, l'utilisateur ouvrira la vue Cartes
• Ajoutez une fonction de gestionnaire "onclick" chargée d'afficher Google Maps avec le marqueur d'événement approprié.
• Ajouter les informations sur l'emplacement de l'événement dans l'écran de prévisualisation de l'événement

Étape 1

Nous commençons par créer une vue Cartes. Pour notre première étape, nous inclurons un fichier supplémentaire sur la page:

Ensuite, nous devons ajouter une nouvelle vue qui affichera Google Maps. La bibliothèque DHTMLX Touch possède le 'Google Map' composant qui facilite l'intégration avec Google Maps (documentation connexe).

Voici notre vue Google Maps:

 scheduler.config.views.push (id: "locationView", lignes: [vue: "barre d'outils", css: "dhx_topbar", éléments: [vue: 'bouton', entréeWidth: 100, css: "annuler" , étiquette: scheduler.locale.labels.icon_back, cliquez sur: "$$ ('ordonnanceur'). $$ ('vues'). back ()"], view: "googlemap", id: "mymap" ]);

Quelques explications sur le code ci-dessus:

• scheduler.config.views.push commande ajoute une nouvelle vue à la collection multi-vues du planificateur existante.
• lignes: [] organise les éléments verticalement. Chaque objet est une ligne séparée. La vue consiste en une barre d’outils et Google Maps.
• $$ ('ordonnanceur'). $$ ('vues') fait référence à un objet à vues multiples. La méthode back () bascule la vue multiple vers la vue précédemment active.

La vue Carte ressemblera à ceci:

Étape 2

Nous devons maintenant ajouter un bouton dans la barre d’outils. La vue la plus appropriée est celle qui affiche les détails de l'événement sélectionné..

 // place ce code après le bloc 'localisation' (étape 4) scheduler.config.selected_toolbar = [view: 'button', inputWidth: scheduler.xy.icon_back, css: "cancel", id: "back", aligner : "left", étiquette: scheduler.locale.labels.icon_back, view: 'button', width: 100, id: "location", aligner: "right", étiquette: scheduler.locale.labels.label_location, cliquez sur : "showLocation", // notre nouveau bouton view: 'button', largeur: 70, id: "edit", align: "right", label: scheduler.locale.labels.icon_edit];

Le code ci-dessus est la définition par défaut de la barre d’outils (vous le trouverez dans la documentation de la bibliothèque) et notre nouveau bouton nommé Emplacement.

Lorsque nous localisons notre application, tous les libellés que nous ajoutons doivent être nommés d’une manière ou d’une autre et ajoutés à la liste. locales.js fichier. Par exemple, nous allons maintenant ajouter un bouton portant le nom "Emplacement". Donc, dans le locales.js fichier on ajoute un paramètre label_location: "Lieu" puis définissez l'étiquette d'attribut du bouton sur scheduler.locale.labels.label_location valeur.

L'attribut click définit le nom d'une fonction de gestionnaire qui sera appelée lors d'un clic sur un bouton..

Voici à quoi devrait ressembler l’écran avec les détails de l’événement, maintenant que nous avons ajouté le paramètre Emplacement bouton:

Étape 3

Avant de passer au code principal, ajoutons à la page une variable nommée "marqueur" et affectons-la à l'instance de marqueur Google Maps. Nous définissons cette variable comme globale car nous n'avons besoin que d'un seul marqueur sur la page (nos événements ne doivent avoir qu'un seul emplacement)..

 // place ce code au tout début de la page var marker = new google.maps.Marker ();

La fonction exécutable, ou le gestionnaire 'onClick', contient le code suivant:

 function showLocation () if (marker! = null) / * affiche la vue multiview * / $$ ("ordonnanceur"). $$ ("locationView"). show (); / * nécessaire pour redimensionner google map * / $$ ("planificateur"). $$ ("locationView"). resize (); / * données d'événement * / var eventId = $$ ("ordonnanceur"). getCursor (); var item = $$ ("planificateur"). item (eventId); / * LatLng point * / var point = new google.maps.LatLng (item.lat, item.lng); var map = $$ ("ordonnanceur"). $$ ("mymap"). map; map.setZoom (6); map.setCenter (point); google.maps.event.clearListeners (map, "click"); marqueur.position = point; marker.map = map; marker.title = item.event_location; marker.setMap (carte); ;

Encore une fois, laissez-moi vous expliquer ce que font ces lignes de code:

• Les premières lignes montrent la vue créée sur la première sous-étape et la redimensionnent pour remplir tout l'écran..
• Les lignes suivantes obtiennent l’objet d’un événement sur lequel se trouve actuellement le curseur. Notez que la bibliothèque DHTMLX utilise une conception de 'curseur' dans sa logique interne. Donc, pour assurer le traitement correct, vous devez utiliser le "curseur" tout en obtenant l'élément actuellement sélectionné. Dans la plupart des cas, le getCursor () La méthode retourne l'élément actuellement sélectionné. Il existe une seule exception: lorsque vous supprimez un événement, le planificateur supprime la sélection mais conserve le curseur et pointe sur l'événement inexistant. Attention à ça!
• La deuxième ligne utilise l'API Google Maps pour créer un point basé sur les coordonnées spécifiées (les coordonnées de l'événement stockées dans la base de données). En savoir plus sur l'API Google Mas.
• $$ ("ordonnanceur"). $$ ("mymap") fait référence à la vue 'googlemap'. La propriété "map" renvoie l'objet de Google Maps.
• Les dernières lignes zooment, centrent la carte et placent le marqueur dans le point spécifié.

Étape 4

Pour ajouter des informations de localisation à l'écran de prévisualisation, nous devons redéfinir le modèle d'écran par défaut. Pour que nous n'ayons pas à réécrire le modèle entier (qui est plutôt volumineux), nous allons utiliser un truc:

 var default_temp = scheduler.templates.selected_event; scheduler.templates.selected_event = fonction (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 = [vue: "texte", libellé: scheduler.locale.labels.label_event, id: "texte", nom: 'texte', vue: "texte", libellé: scheduler.locale. labels.label_details, id: 'details', view: "datetext", libellé: scheduler.locale.labels.label_start, id: 'date_début', nom: 'date_début', dateFormat: scheduler.config.form_date,  view: "datetext", étiquette: scheduler.locale.labels.label_end, id: 'date_fin', nom: 'date_fin', dateFormat: scheduler.config.form_date, vue: "bascule", id: 'allDay', label: "", options: [valeur: "0", label: scheduler.locale.labels.label_time, valeur: "1", label: scheduler.locale.labels.label_allday], aligner: "droite" , valeur: "0", // sections 'view' personnalisées view: "text", libellé: scheduler.locale.labels.label_location, id: "event_location", view: 'button', id: "setLocation ", libellé: scheduler.locale.labels.label_locate, cliquez sur" setLocation ", view:" text ", libellé:" Latitude ", id:" lat ", caché: true, view:" text ", label: "Longitude", id: 'lng', caché: true];

 dhx.event ($$ ('ordonnanceur'). $$ ("emplacement_événement"). $ view, "focusout", setPlaceCoordinates);

 fonction setPlaceCoordinates () if (marqueur! = null) var eventId = $$ ("ordonnanceur"). getCursor (); var geocoder = new google.maps.Geocoder (); var address = $$ ('scheduler'). $$ ("event_location"). getValue (); if (adresse! = "") geocoder.geocode ('adresse': adresse, fonction (résultats, statut) si (statut == google.maps.GeocoderStatus.OK) $$ ('programmateur'). $$ ("lat"). setValue (résultats [0] .geometry.location.Xa); $$ ("ordonnanceur"). $$ ("lng"). setValue (résultats [0] .geometry.location.Ya ); else dhx.alert ("Malheureusement, votre position n’est pas trouvée."); if ($$ ('ordonnanceur'). $$ ("lat") == "") $$ ("ordonnanceur" ). $$ ("lat"). setValue (51.477840); $$ ("scheduler"). $$ ("lng"). setValue (-0.001492); $$ ("scheduler"). $$ ("event_location ") .setValue (" Avenue Blackheath Londres, Greenwich, Grand Londres SE10 8XJ, Royaume-Uni "); else if (eventId! = null) var item = $$ (" scheduler "). item (eventId); $$ ('ordonnanceur'). $$ ("emplacement_événement"). setValue (item.event_location);); ;

 function setLocation () if (marker! = null) / * affiche la vue multiview * / $$ ("ordonnanceur"). $$ ("locationView"). show (); / * nécessaire pour redimensionner google map * / $$ ("planificateur"). $$ ("locationView"). resize (); var point; var eventId = $$ ("scheduler"). getCursor (); if (eventId! = null) var item = $$ ("ordonnanceur"). 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); // les coordonnées de l'observatoire royal de Greenwich marker.title = "Blackheath Avenue London, Greenwich, Grand Londres SE10 8XJ, UK";  var map = $$ ("ordonnanceur"). $$ ("mymap"). map; map.setZoom (6); map.setCenter (point); marqueur.position = point; marker.map = map; marker.setMap (carte); google.maps.event.addListener (map, "click", function (e) var request = emplacement: e.latLng, radius: '1'; service = new google.maps.places.PlacesService (map); service.search (demande, fonction (résultats, statut) if (statut == google.maps.places.PlacesServiceStatus.OK) this.service.getDetails (référence: résultats [0] .reference, fonction (détails, status) if (status == google.maps.places.PlacesServiceStatus.OK) $$ ('ordonnanceur'). $$ ("lat"). setValue (details.geometry.location.Xa); $$ (' planificateur '). $$ ("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);););); ;

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