dhtmlxScheduler in Windows Store Apps

dhtmlxScheduler funktioniert problemlos in Windows Store Apps, die mit JavaScript und HTML erstellt wurden.

Eine spezielle Version von dhtmlxScheduler steht hier zum Download bereit: https://dhtmlx.com/x/download/regular/dhtmlxScheduler_windows.zip.

Für einen einfachen Einstieg gibt es ein Schritt-für-Schritt-Tutorial – Basic Windows 8 app with dhtmlxScheduler.

Einzubindende Dateien

Um mit dhtmlxScheduler zu starten, binden Sie diese 4 Dateien ein:

//core files
<script src="/lib/dhtmlxscheduler.js"></script>
<link href="/lib/dhtmlxscheduler.css" rel="stylesheet" />

Initialisierung

Die Einrichtung des Schedulers erfolgt wie gewohnt:

• Zuerst definieren Sie auf der Hauptseite der App (meist default.html) die Standard-div-Container für die Scheduler-Elemente:

<div id="scheduler_here" class="dhx_cal_container" style='width:100%; height:100%;'>
        <div class="dhx_cal_navline">
            <div class="dhx_cal_prev_button">&nbsp;</div>
            <div class="dhx_cal_next_button">&nbsp;</div>
            <div class="dhx_cal_today_button"></div>
            <div class="dhx_cal_date"></div>
            <div class="dhx_cal_tab" name="day_tab" style="right:204px;"></div>
            <div class="dhx_cal_tab" name="week_tab" style="right:140px;"></div>
            <div class="dhx_cal_tab" name="month_tab" style="right:76px;"></div>
        </div>
        <div class="dhx_cal_header">
        </div>
        <div class="dhx_cal_data">
        </div>       
</div>

• Danach initialisieren Sie den Scheduler (dies kann innerhalb der ready-Funktion im app.onactivated-Event-Handler erfolgen):

app.onactivated = function (args) {
    if (args.detail.kind === activation.ActivationKind.launch) {
        if (args.detail.previousExecutionState !== 
            activation.ApplicationExecutionState.terminated) {
 
                WinJS.Utilities.ready(function(){ 
                     scheduler.init('scheduler_here'); 
            }, true);
 
        } else { }
        args.setPromise(WinJS.UI.processAll());
    }
};

Scheduler-Konfiguration

Auch die Konfiguration des Schedulers erfolgt wie gewohnt:

WinJS.Utilities.ready(function(){ 
      scheduler.config.multi_day = true;
      scheduler.config.details_on_create = true;
      scheduler.config.details_on_dblclick = true;
      scheduler.init('scheduler_here', new Date(2012, 10, 1), "month");
}, true);

Daten laden

Um Daten in den Scheduler zu laden, verwenden Sie die parse-Methode:

var storeItems = [
     { text:"Friday",  start_date:"11.04.2012 00:00",end_date:"11.05.2012 17:00" },
     { text:"New Year",start_date:"11.05.2012 14:00",end_date:"10.05.2012 17:00" },
     { text:"Birthday",start_date:"11.06.2012 16:00",end_date:"11.06.2012 17:00" }
];
 
WinJS.Utilities.ready(function(){ 
      scheduler.init('scheduler_here');
      scheduler.parse(storeItems, "json");
}, true);

Erforderliche Dateneigenschaften

Jedes Datenelement muss folgende Eigenschaften haben:

• start_date – Wann die Aufgabe beginnt, formatiert wie in date_format angegeben
• end_date – Wann die Aufgabe endet, formatiert wie in date_format angegeben
• text – Die Aufgabenbeschreibung

Verfügbare Formate

• JSON
• XML
• iCal

Verwaltung von Create/Update/Delete-Operationen

Normalerweise übernimmt DataProcessor die CRUD-Operationen im Scheduler, ist aber nicht mit Windows 8 Apps kompatibel. In diesen Apps müssen Sie CRUD-Operationen daher manuell über Events verwalten.

• onConfirmedBeforeEventDelete – wird ausgelöst, nachdem der Benutzer das Löschen eines Ereignisses bestätigt hat
• onEventChanged – wird ausgelöst, nachdem ein Ereignis bearbeitet und gespeichert wurde
• onEventAdded – wird ausgelöst, wenn ein neues Ereignis hinzugefügt wurde
• Beachten Sie, dass beim Erstellen eines neuen Ereignisses eine automatisch generierte id vergeben wird. Nach dem Speichern in Ihrer Datenquelle kann diese id durch die id aus Ihrer Datenquelle ersetzt werden. Wenn sich die id des Ereignisses ändert, verwenden Sie changeEventId, um den Scheduler entsprechend zu aktualisieren.

scheduler.attachEvent("onConfirmedBeforeEventDelete", function(id, event){
       // Ihr benutzerdefinierter Code
});
 
scheduler.attachEvent("onEventChanged", function (id, event) {
       // Ihr benutzerdefinierter Code
});
 
scheduler.attachEvent("onEventAdded", function (id, event) {
       // Ihr benutzerdefinierter Code
});

Beispiel für CRUD-Logik mit der IndexedDB-Datenbank

Hier sehen Sie ein allgemeines Beispiel für die Implementierung der 'insert'-Operation. Die Operationen 'delete', 'update' und 'read' können auf ähnliche Weise umgesetzt werden.

//Verbindung zu indexedDb herstellen und Callback bei Erfolg ausführen
function connect(callback){
    try{
        var db = null;
 
        var req = window.indexedDB.open("SchedulerApp", 1);
        req.onsuccess = function (ev) {
            db = ev.target.result;
            if(callback)//Callback bei Verbindung ausführen
                callback(db);
        }
 
        req.onupgradeneeded = function(e){
            //Das Event wird beim Verbinden mit der neuen Datenbank oder 
            //beim Ändern der Version ausgelöst.
            //Hier wird die Datenbankstruktur (object stores) definiert
            var db = ev.target.result;
 
            if (!db.objectStoreNames.contains("events")) {
                //Datenspeicher erstellen, 'id' als autoincrement Schlüssel setzen
                var events = db.createObjectStore(
                    "events", 
                    { keyPath: "id", autoIncrement: true }
                );
            }
        }
    }catch(e){
    }
}
 
//js-Objekt zur Datenbank hinzufügen und Callback bei Erfolg ausführen
function insertEvent(data, callback) {
    connect(function (db) {
        var store = db.transaction("events", "readwrite").objectStore("events");
        var updated = store.add(data);
        updated.onsuccess = function (res) {
            callback(res.target.result);
        }
    });
}
 
// Verwendet alles oben Definierte mit dhtmlxScheduler
// Wenn der Benutzer ein Ereignis zum Scheduler hinzufügt, wird es in der Datenbank gespeichert
scheduler.attachEvent("onEventAdded", function (id) {
    var ev =copyEvent(scheduler.getEvent(id));//copyEvent – Funktion für Deep Copy
    delete ev.id;//die echte id wird von der Datenbank vergeben
 
    insertEvent(ev, function (newId) {
        scheduler.changeEventId(id, newId);//Ereignis-id in der App aktualisieren
    });
    return true;
});

Nicht unterstützte Funktionen

Einige Funktionen, die im Standard-Scheduler verfügbar sind, werden in Windows Store Apps nicht unterstützt:

• DataProcessor
• Map-Ansicht
• Export als PDF

Nach oben