Membuat kalender event Mobile dengan DHTMLX

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

Tutorial ini menjelaskan bagaimana membangun HTML5 berbasis kalender mobile untuk melacak konferensi, dan event yang berjalan pada iOS dan Android ponsel menggunakan versi mobile dari dhtmlxScheduler (open source, GPL). di akhir, pengguna akan dapat menambahkan dan mengedit event, pilih lokasi konferensi di Google Maps, dan melihat peristiwa seharian, bulan, atau daftar dilihat.

Overview aplikasi projek

Demo akhir termasuk kalender event (kami akan juga menyebutnya scheduler) yang menampilkan acara dalam tiga view standar: list, hari dan bulan. Sementara pengguna menambah, menghapus, atau mengedit event aplikasi kalender menyimpan perubahan ke server dan Update database. Demo juga secara otomatis mendeteksi lokal digunakan dan menyesuaikan antarmuka kalender yang sesuai. Pengguna akhir dapat mengatur lokasi event di Google Maps dengan dua cara: mengetik alamat atau menunjuk di Google Maps.

1. memulai

Pertama, Unduh paket terbaru versi mobile dari dhtmlxScheduler. Berdasarkan framework DHTMLX Touch dan didistribusikan di bawah sebuah lisensi open source (GNU GPL).

DHTMLX mobile scheduler memiliki arsitektur yang disebut multiview-based. Ini akan menampilkan satu set layar yang berganti antara satu sama lain. Setiap layar adalah view tunggal di mana Anda dapat menambahkan konten. Secara default, scheduler berisi view berikut:

Event preview layar (Menampilkan sekilas tentang event)
Rincian form (digunakan untuk mengedit keterangan event)
Mulai/Akhiri edit form (built-in datepickers untuk memilih tanggal awal dan akhir dari event)
Kalender views: List (Agenda), hari dan bulan

View standar disesuaikan (Anda dapat menemukan definisi standar dalam dokumentasi). Juga, ada kemungkinan untuk menambahkan view kustom baru.

2. Merender kalender event pada halaman

Langkah 1

Kita akan mulai dengan file kode yang dibutuhkan untuk menampilkan mobile scheduler pada halaman: dhxscheduler_mobile.js dan dhxscheduler_mobile.css.

Langkah 2

Tambahkan kode berikut ke halaman Anda:


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

Berikut adalah apa dilakukan baris kode berikut:

memanggil fungsi dhx.ready() yang menjamin bahwa kode ditempatkan di dalam dipanggil setelah halaman telah telah benar-benar diurai, melindungi dari kesalahan potensial. Ini opsional tapi saya mendorong Anda untuk menggunakannya.
dhx.fullScreen() mengaktifkan modus layar penuh.
dhx.UI({}) adalah objek constructor untuk scheduler (digunakan di Perpustakaan DHTMLX Touch).
view: "scheduler" - set komponen untuk membuat ('scheduler' adalah nama hardcoded mobile scheduler).
id adalah parameter opsional yang menetapkan id objek. Kami menetapkan parameter ini seperti yang kita akan lihat objek ini nanti.

Setelah kami memasukan file yang dibutuhkan dan menambahkan kode di atas, kalender merender pada halaman:

Scheduler memiliki UI yang rapi dan sederhana sehingga Anda dapat menggunakannya seperti itu. Ini cukup fleksibel sehingga Anda dapat mengkonfigurasi dengan tampilan dan nuansa untuk mencocokkan kebutuhan desain Anda, jika Anda ingin.

3. Memuat dan menyimpan Data

Langkah 1

Untuk memuat data ke kalender, kami akan menggunakan metode load(). Seperti yang kita akan memuat data dari server, kita harus menetapkan satu parameter (path ke server script).

Untuk memberikan kemampuan untuk menyimpan data kembali ke server, kita perlu mendefinisikan satu parameter lain dalam objek constructor - save. Kita juga perlu untuk menentukan script di sisi server yang sama yang kita telah tetepkan dalam metode load().


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

Merujuk kepada scheduler melalui id nya, kami menggunakan recprd $$("scheduler").

Merujuk ke scheduler view (atau view element), Anda harus menulis ketergantungan penuh bahwa properti inherintace chain: $$('scheduler"').$$('view_id').$$('viewElement_id')... Anda dapat memeriksa id elemen dalam dokumentasi terkait.

Langkah 2

cata.php file berisi klien-server komunikasi logika untuk diintegrasikan dengan sisi server. Untuk mendefinisikan logika, kita akan menggunakan dhtmlxConnector helper khusus yang menerapkan semua rutin (ada versi Java, .NET, PHP, ColdFusion, dan ini bebas digunakan dengan dhtmlx UI widget). Anda bisa mendapatkan rincian lebih lanjut tentang penggunaan dhtmlxConnector di sini.

Kita akan menggunakan versi PHP dan membuat kode berikut dalam data.php file:


    <?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");
    ?>

Baris kode lakukan hal berikut:

Baris pertama berisi file kode yang dibutuhkan.
Barus dua menyambung ke server dan membuka database SQL tertentu.
Dua baris terakhir membuat konektor objek ($scheduler) dan mengkonfigurasi data untuk diambil.

Dalam paket demo yang terlampir, Anda dapat menemukan berkas dump database 'schedulertest'.

Seperti kita menyelesaikan langkah ini kita memiliki kalender diisi dengan data demo kami:

Mobile Event Calendar - Loaded with Data

4. lokalisasi

Langkah 1

Dengan langkah ini, kita akan membuat kalender kami mampu beradaptasi dengan bahasa tertentu dan wilayah.

Pertama, kita perlu menentukan objek lokal (di Perpustakaan ini memiliki nama hardcoded - 'locales') yang akan mendefinisikan semua label yang digunakan dalam kalender.

Kita akan menciptakan sebuah objek dalam file terpisah tidak untuk "membuat sesak" file .html utama. File akan terlihat seperti ini:

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

Untuk melihat versi lengkap dari objek 'locales', buka file locales.js yang disertakan dalam folder 'codebas' paket download. Dalam demo kami, kami telah menyertakan locales untuk hanya dua bahasa (Inggris dan Jerman) sebagai contoh. Jika diperlukan, Anda dapat menambahkan lokal bahasa lainnya dalam file ini.

Langkah 2

Kemudian kami menyertakan file locales.js pada halaman:

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

Selanjutnya tambahkan kode berikut ke html file:


    //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;

Baris kode lakukan melakukan hal berikut:

Baris pertama mendapat versi bahasa browser.
Beberapa baris berikutnya mengatur lokal tergantung pada nilai kembalian oleh baris pertama.
scheduler.locale.labels set lokal untuk label umum dalam scheduler.
dhx.date.locale set lokal untuk kalender yang digunakan dalam scheduler.

Kalendar dengan lokal Jerman terlihat seperti ini:

5. Menampilkan lokasi event di Google Maps

Bukankah akan menjadi indah jika pengguna bisa melihat tempat dimana suatu event terjadi? Berikut adalah daftar langkah-langkah yang diperlukan untuk memberikan kesempatan tersebut di app:

Membuat view terpisah untuk Google Maps
Tambahkan tombol, dengan mengklik di atasnya pengguna akan membuka view peta
Tambahkan fungsi handler 'onclick' yang akan bertanggung jawab untuk menampilkan Google Maps dengan penanda sesuai event di atasnya
Tambahkan info lokasi event ke layar preview

Langkah 1

Kita mulai dengan menciptakan map view. Untuk langkah pertama kami, kami akan memasukkan satu file pada halaman:

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

Kemudian kita perlu menambahkan view baru yang akan menampilkan Google Maps. DHTMLX Touch Perpustakaan memiliki komponen 'googlemap' yang membuat integrasi dengan Google Maps cukup mudah (terkait dokumentasi).

Berikut adalah Google Maps View kami:


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"
                }
            ]
        });

Beberapa penjelasan tentang kode di atas:

scheduler.config.views.push perintah menambah view baru ke scheduler multi-View koleksi yang ada.
rows: [{}] mengatur elemen-elemen vertikal. Setiap objek adalah baris terpisah. Tampilan terdiri dari toolbar dan Google Maps.
$$('scheduler').$$('views') mengacu pada multi-View objek. Metode back() mengganti multi-View ke tampilan sebelumnya yang aktif.

Tampilan peta akan terlihat seperti ini:

Langkah 2

Kita sekarang perlu untuk menambahkan tombol pada toolbar. Tampilan yang paling sesuai adalah salah satu yang menampilkan rincian event yang dipilih.


//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}
        ];

Kode di atas merupakan definisi standar toolbar (Anda dapat menemukannya dalam perpustakaan dokumentasi) dan tombol kami baru dinamau sebagai Location.

Seperti kita pelokalan aplikasi kami, Semua label kita menambahkan harus bernama dalam beberapa cara dan ditambahkan ke locales.js file. Sebagai contoh, sekarang kita akan menambahkan sebuah tombol dengan bernama 'Location'. Jadi, dalam locales.js file kita menambahkan parameter label_location: "Location" dan kemudian tetapkan tombol atribut label nilai scheduler.locale.labels.label_location.

Atribut klik menetapkan nama fungsi handler yang akan dipanggil pada klik tombol.

Ini adalah bagaimana layar dengan rincian event harus terlihat bahwa kami menambahkan tombol Location:

Langkah 3

Sebelum pergi ke kode utama, mari kita tambahkan ke halaman variabel bernama 'marker' dan menetapkannya ke Google Maps Marker instance. Kita mendefinisikan variabel ini sebagai global karena kita perlu memiliki hanya satu marker pada halaman (event kami harus memiliki hanya satu lokasi).

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

Eksekusi fungsi, atau 'onClick' handler, berisi kode berikut:


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);
            }
        };

Sekali lagi, biarkan saya menjelaskan apa yang dilalkukan baris kode ini:

Baris pertama menunjukkan view yang dibuat pada langkah pertama sub dan mengubah ukuran untuk mengisi seluruh layar.
Baris berikutnya mendapatkan objek dari suatu event yang pada kursor saat ini. Catatan, Perpustakaan DHTMLX menggunakan konsepsi 'cursor' dengan inner logic. Jadi, untuk memastikan proses yang benar, Anda harus beroperasi dengan 'cursor' sementara mendapatkan item yang saat ini dipilih. Dalam kebanyakan kasus, metode getCursor() mengembalikan item yang saat ini dipilih. Ada satu pengecualian: ketika Anda menghapus event, scheduler menghilangkan pemilihan namun tetap kursor dan mengarahkannya ke event yang tidak ada. Berhati-hati dengan ini!
Baris kedua menggunakan Google Maps API untuk membuat titik berdasarkan koordinat tertentu (event koordinat yang disimpan dalam database). Pelajari lebih lanjut tentang Google Map API.
$$("scheduler").$$("mymap") merujuk pada view 'googlemap'. "map" properti mengmbalikan objek dari Google Maps.
Baris terakhir zoom, menengahkan peta, dan mengatur penanda di titik tertentu.

Langkah 4

Untuk menambahkan informasi lokasi ke layar, kita harus mendefinisikan kembali template layar default. Sehingga kita tidak perlu menulis ulang seluruh template (yang agak besar), kami akan menggunakan trik:


    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;
    };

Berikut adalah apa yang telah kami lakukan dengan potongan kode di atas:

default_temp variabel memegang template layar default.
'wrapper' adalah div element baru untuk menahan informasi lokasi.
'event_text' adalah class CSS standar yang digunakan dalam default template, kita menggunakannya untuk menyediakan keseragaman informasi event yang ditampilkan.
scheduler.locale.labels.label_location adalah label yang ditambahkan pada langkah sebelumnya ('Location', dalam bahasa Inggris lokal).

Sekarang layar terlihat seperti ini (dengan info lokasi ditambahkan):

Mobile Event Calendar - Event Preview Screen

6. pengaturan location event di Google Maps

Sekarang app kita dapat menampilkan lokasi event. Tetapi bagaimana mengedit lokasi event atau menetapkan lokasi event baru?

Sekarang kita perlu untuk memungkinkan pengguna untuk mengatur/edit lokasi event dan memberikan dua cara berbeda untuk mengetik alamat input teks dan langsung menunjuk pada peta. Ini adalah apa yang perlu kita lakukan:

Tambahkan ke edit form
Memberikan handler yang memproses data yang masuk

Langkah 1

Kita harus menambahkan setidaknya dua kontrol untuk event edit form: salah satu masukan untuk mengetik alamat event di teks dan kontrol kedua bisa jadi tombol, sehingga dengan mengkliknya pengguna dapat membuka peta dan mengatur titik pada peta.

Kita akan mengambil edit fiorm default dan kemudian menambahkan item (daftar kontrol yang tersedia):


 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}
];

Kami baru saja menambahkan lima item baru ke event edit form:

Kolom teks secara manual mengetik alamat, item dengan id: "event_location".
Tombol yang digunakan pengguna untuk membuka Google Maps dan mengatur titik (id: "setLocation"). Item yang memiliki atribut 'click' yang memungkinkan kita untuk menetapkan untuk itu event 'onclick' event handler (kami namai sebagai "setLocation").
Dua bidang tersembunyi ('Latitude' dan 'Longitude') untuk menyimpan Koordinat titik geografis. Saya harus menyebutkan bahwa scheduler ponsel akan secara otomatis menyimpan data event ketika pengguna mengklik tombol 'Save'. Scheduler mengambil data untuk event dari input yang didefinisikan dalam form edit. Itulah sebabnya kami menambahkan bidang ini tapi menyembunyikan mereka, karena mereka benar-benar tidak memiliki nilai apapun untuk pengguna dan diperlukan untuk memvisualisasikan konten yang tersimpan di lokasi DB di Google Maps.
Bidang 'notes' (id: "details"). Ini adalah bidang yang sepenuhnya opsional. Kami menambahkan hanya untuk memberi pengguna kemungkinan untuk menambahkan catatan tentang event mendatang. Bidang memiliki parameter standar terkait dalam objek lokal.

Jadi sekarang kita memiliki form add/edit event seperti ini:

Langkah 2

Sebelum menentukan fungsi eksekusi untuk input, kita harus mendefinisikan sebuah event, yang dijalankan yang akan memanggil fungsi. Perpustakaan memungkinkan kita untuk menggunakan built-in event atau salah satu event HTML native. Kami memilih event 'onFocusOut' yang terjadi setelah elemen kehilangan fokus.

Untuk melampirkan event ke inputan, kami akan menambahkan perintah berikut ke dhx.ready(function() {.} fungsi:

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

dhx.event adalah helper yang menempel fungsi event hadnler untuk elemen HTML.
$$('scheduler').$$("event_location") mengacu pada input.$view mengembalikan view objek.
fungsi setPlaceCoordinates() akan mengambil alamat yang diketik oleh pengguna, mendeteksi Koordinat (untuk menyimpan dalam DB), dan menampilkan penanda alamat pada peta.

Fungsi setPlaceCoordinates() memiliki implementasi berikut:


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);
                                }
                            }
                        }
                     });
                }
            }
        };

Mari kita pertimbangkan urutan di mana interpreter langkah melalui kode handler:

Menggunakan perintah $$("scheduler").getCursor(), interpreter mendapat objek dari event yang mengedit form yang dibuka.
Kemudian, mengaktifkan layanan geocoding (yang mengubah alamat, seperti "Berlin, Jerman", ke koordinat geografis) dan mengambil alamat dari input (var address).

root if-else condition expression mengecek nilai bidang teks "Location":

Jika nilai string kosong, pencarian akan diabaikan.
Jika pengguna memasukkan beberapa nilai, nilai ini dimasuken ke layanan Google Maps.
Jika beberapa alamat ditemukan, penafsir menulis koordinat ke 'Latitude' dan 'Longitude' bidang tersembunyi.
Jika alamat yang diketik tidak ada atau pengguna menutup form yang diedit sebelum layanan telah menyelesaikan pencarian, app peringatan pesan yang memberitahu tentang hasil gagal dan dalam input terus koordinat disimpan untuk event di database.
if($$ ('scheduler'). $$ ("lat") == "") {} else {} conditional expression digunakan untuk memeriksa apakah event tersebut disimpan dalam DB atau apakah itu event baru (karena jika event baru, penerjemah tidak dapat mengambil koordinatnya dari db dan kesalahan akan terjadi). Dalam kasus event ini baru dan pencarian tidak selesai, aplikasi akan menetapkan ke koordinat event Greenwich Royal Observatory.

Langkah 3

Fungsi executable, atau sebuah handler 'onClick' yang terjadi ketika pengguna mengklik tombol 'Locate on the map', berisi kode ini:


        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);
                                }
                            });
                        }
                    });

            });
}
    };

Baris kode melakukan hal berikut:

Baris pertama menunjukkan tampilan dengan Google Maps dalam modus layar penuh dan mendapatkan objek event.
Ekspresi pertama if-else bersyarat memeriksa apakah pengguna mengedit peristiwa yang ada atau jika dia menciptakan yang baru. Cek ini dibuat untuk set awal marker pada peta.
Jika pengguna mengedit event yang ada, kode menghasilkan titik dengan koordinat dari DB.
Jika pengguna menciptakan event baru, kode menetapkan koordinat Greenwich Royal Observatory itu.
$$("scheduler").$$("mymap") merujuk pada tampilan 'googlemap'. Properti peta mengembalikan objek dari Google Maps.
Baris berikutnya zoom, menengahkan peta, dan mengatur penanda di titik tertentu.
google.maps.event.addListener() perintah melampirkan fungsi untuk menangani klik yang dibuat oleh pengguna pada peta. Lihat rincian api digunakan dalam layanan Web API Mas Google.

Satu hal lagi untuk disinggung: pada langkah ini kita akan menambahkan fungsi untuk menangani klik peta. Tetapi dalam kasus pengguna hanya melihat lokasi event, ia tidak memiliki kemungkinan untuk mengubahnya (langkah 5). Jadi, dengan menambahkan 'click' listener dalam fungsi setLocation, kita akan mengganti untuk 'preview' mode (showLocation fungsi).

Tambahkan perintah ini ke kode yang sudah ada fungsi showLocation():


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

Itu adalah akhir tutorial ini! Sekarang Anda dapat men-download paket akhir demo untuk melihat bagaimana semuanya bekerja dan cocok bersama dalam event kalender yang telah kita bangun.

Kesimpulan

Dengan meningkatnya penggunaan ponsel, ada tidak perlu untuk mengatakan betapa pentingnya untuk memiliki versi mobile dari situs web atau aplikasi. Jika Anda membutuhkan kalender event yang dapat dilihat dan diedit secara online di ponsel, maka versi mobile dari dhtmlxScheduler dapat menghemat waktu yang besar karena menawarkan ready-to-use kalender UI dan satu set fitur dasar. Lisensi GNU GPL open source yang memungkinkan Anda untuk menggunakan scheduler secara gratis di situs web dan aplikasi internal.