Units-Ansicht

Info

Diese Ansicht ist ausschließlich in der Scheduler PRO-Version verfügbar.

Die Units-Ansicht organisiert die X-Achse basierend auf einer bestimmten Eigenschaft von Ereignissen, anstatt nur nach Zeit.

Initialisierung

Um die Units-Ansicht zum Scheduler hinzuzufügen, gehen Sie wie folgt vor:

1. Aktivieren Sie die Units-Erweiterung auf der Seite:

scheduler.plugins({
    units: true
});

2. Fügen Sie den Tab der Ansicht in das Scheduler-Markup ein:

<div id="scheduler_here" class="dhx_cal_container" ...>
    <div class="dhx_cal_navline">
       ...
       <div class="dhx_cal_tab" name="unit_tab"></div>
    </div>
    ...    
</div>

3. Setzen Sie die Beschriftung für den Tab:

//'unit_tab' ist der Name unseres div
scheduler.locale.labels.unit_tab = "Unit"

4. Erstellen Sie die Ansicht mit der createUnitsView-Methode:

scheduler.createUnitsView({
    name:"unit",
    property:"unit_id", // Die Ereigniseigenschaft, der Units zugeordnet werden
    list:[              // Definiert die in der Ansicht angezeigten Units
        {key:1, label:"Section A"},
        {key:2, label:"Section B"},
        {key:3, label:"Section C"}  
    ]
});

Units view

Daten in die Ansicht laden

Im Gegensatz zu Standardansichten wie Tag, Monat oder Jahr benötigen Mehrressourcen-Ansichten wie Units und Timeline ein zusätzliches Pflichtfeld in den Ereignissen:

• property - (string) Der Name der Dateneigenschaft, die verwendet wird, um Ereignisse bestimmten Units zuzuordnen

scheduler.createUnitsView({
    name:"unit",
    property:"unit_id", 
    list:[             
        {key:1, label:"Section A"},
        {key:2, label:"Section B"},
        {key:3, label:"Section C"}  
    ]
});

scheduler.init('scheduler_here');
scheduler.parse([
    {id:1, text:"Task1", start_date:"2019-09-17 12:00", end_date:"2019-09-18 21:00", 
    unit_id:"1"},
     {id:2, text:"Task2", start_date:"2019-09-17 09:00", end_date:"2019-09-17 21:00", 
    unit_id:"3"},
     {id:3, text:"Task3", start_date:"2019-09-17 15:00", end_date:"2019-09-18 15:00", 
    unit_id:"2"}
]);                                 

Ereignisse werden den Units zugeordnet, indem der Wert von unit_id mit dem entsprechenden list.key verglichen wird.

Units view

Bereiche dynamisch ändern

Um die Liste der Units in der Units-Ansicht dynamisch zu aktualisieren, können Sie die Methoden serverList und updateCollection verwenden.

Units für mehrere Tage anzeigen

Um Units über mehrere Tage hinweg anzuzeigen, nutzen Sie den days-Parameter:

scheduler.createUnitsView({
    name:"week_unit",
    property:"section_id",
    list:sections,
    days:3 /*!*/
});

Multiday Units view

Dadurch wird eine zweite horizontale Skala zur Anzeige der Tage hinzugefügt.

Um das Format dieser zweiten Skala anzupassen, verwenden Sie das Template scheduler.templates[name+"_second_scale_date"]:

scheduler.templates.units_second_scale_date = function(date) {
    return scheduler.templates.week_scale_date(date);
};

Beachten Sie:

1. Die erste Skala wird wie gewohnt mit dem scale_text_template definiert. Die Höhe kann mit scale_height angepasst werden.
2. Sie können unerwünschte Zeiteinheiten in der zweiten horizontalen Skala ausblenden, indem Sie wie in Ausblenden von Zeiteinheiten auf der X-Achse einer Ansicht beschrieben vorgehen.
3. Die Parameter size und step gelten nicht für mehrtägige Units.
4. Der PDF-Export wird nur mit dem neuen Service unterstützt, nicht mit den älteren Export-Tools.
5. Um den Starttag des angezeigten Intervalls anzupassen, verwenden Sie die Funktion scheduler.date.(units_name)_start:

scheduler.date.units_start = function (date) {
    return scheduler.date.week_start(date);
};

Ereignisse mehreren Units zuweisen

Ab Version 4.1 ist es möglich, Ereignisse gleichzeitig mehreren Units zuzuweisen.

So aktivieren Sie diese Funktion:

1. Aktivieren Sie die Multisection-Erweiterung auf der Seite
2. Setzen Sie die Eigenschaft multisection auf true
3. (Optional) Aktivieren Sie die "multiselect"-Erweiterung, um die Multiselect-Steuerung für einfacheres Umschalten zwischen Bereichen zu nutzen

<script src="codebase/dhtmlxscheduler.js"></script>
<link rel="stylesheet" href="codebase/dhtmlxscheduler.css" type="text/css">

<script>
    scheduler.plugins({
        multisection: true, /*!*/
        multiselect: true,
        units: true
    });
    scheduler.config.multisection = true; /*!*/
    scheduler.init('scheduler_here');
</script>

Anschließend können Sie mehrere Bereiche (standardmäßig durch ein Komma getrennt, siehe section_delimiter) in der zugehörigen Eigenschaft des Ereignisses angeben und das Ereignis wird in allen diesen Units angezeigt:

scheduler.createUnitsView({
    name: "unit",
    list: [
        {key: 1, label: "James Smith"},
        {key: 2, label: "John Williams"},
        {key: 3, label: "David Miller"},
        {key: 4, label: "Linda Brown"}],
    property: "section_id", /*!*/
    ...
});
scheduler.init('scheduler_here', new Date(2019, 5, 30), "unit");

scheduler.parse([
    { id:1, text:"Task A", section_id:'1',         ...},/*!*/
    { id:2, text:"Task B", section_id:'1,3',     ...},/*!*/
    { id:3, text:"Task C", section_id:'4',         ...},/*!*/
    { id:4, text:"Task D", section_id:'2,3,4',     ...}/*!*/
]);

Multisection events in Timeline and Units view

Daten für die X-Achsen-Bereiche

Die auf der X-Achse angezeigten Werte werden mit dem list-Parameter festgelegt:

scheduler.createUnitsView({
    name:"unit",
    ...
    list:[
        {key:1, label:"Section A"},
        {key:2, label:"Section B"},
        {key:3, label:"Section C"} 
    ]
});

Jedes Element in der list muss zwei erforderliche Eigenschaften haben:

• key - der eindeutige Bezeichner
• label - der Anzeigename

Daten für die X-Achsen-Bereiche vom Server

Um Bereichsdaten vom Server zu laden, verwenden Sie:

• Auf der Client-Seite - die Methode serverList:

scheduler.createUnitsView({
    name:"unit",
    property:"type_id",
    list:scheduler.serverList("units"),
    size:20,                                     
    step:1
});

wo serverList eine Liste namens 'units' zurückgibt.

• Auf der Server-Seite

Die Antwort für die Methode load sollte eine Collection mit dem Namen der Serverliste im folgenden JSON-Format enthalten:

{ 
   "data":[
      {
          "id":"1",
          "start_date":"2019-03-02 15:00:00",
          "end_date":"2019-03-04 16:00:00",
          "text":"Team meeting",
          "type_id":"1"
      },
      {
          "id":"2",
          "start_date":"2019-03-02 17:00:00",
          "end_date":"2019-03-04 18:00:00",
          "text":"Strategy meeting",
          "type_id":"2"
      }
   ], 
   "collections": {/*!*/
      "units":[/*!*/      
         {"value":"1","label":"Conference room 1"},/*!*/
         {"value":"2","label":"Conference room 2"},/*!*/
         {"value":"3","label":"Conference room 3"}/*!*/
      ]/*!*/
   }/*!*/
}

Alternativ können Sie auch den OptionsConnector Connector verwenden:

<?php
    include('connector-php/codebase/scheduler_connector.php');//Datei einbinden

    $res="mysql_connect(""localhost","root","");//Verbindung zum Server mit unserer DB
    mysql_select_db("sampleDB");//Verbindung zur DB. 'sampleDB' ist der Name der DB

    $list = new OptionsConnector($res, $dbtype);
    $list->render_table("types","type_id","type_id(value),name(label)");
    
    $scheduler = new schedulerConnector($res, $dbtype);
    //Wir verwenden denselben Namen wie auf der Client-Seite – 'units'
    $scheduler->set_options("units", $list); 
    $scheduler->render_table("events","id","start_date,end_date,text,type_id");
?>

Sie können eine Collection auch manuell ohne dhtmlxConnector erstellen. In diesem Fall aktualisieren Sie die Collection mit der Methode updateCollection:

scheduler.updateCollection("units", new_sections_array);

Loading Units sections from the server

Units scrollen

Wenn viele Units vorhanden sind, kann das horizontale Scrollen mit den Eigenschaften size und step aktiviert werden:

scheduler.createUnitsView({
    name:"unit",
    ...
    size:10, // Anzahl der gleichzeitig sichtbaren Units
    step:5   // Anzahl der Units, die pro Schritt gescrollt werden
});

Horizontal scrolling sections in Units view

Ereignisse überspringen, die zu keiner Unit gehören

Standardmäßig werden Ereignisse, die keiner definierten Unit zugeordnet sind, in der ersten Unit angezeigt. Seit Version 3.0 können Sie wählen, diese Ereignisse vollständig zu überspringen.

Um dies zu aktivieren, setzen Sie die Eigenschaft skip_incorrect:

scheduler.createUnitsView({
    name:"unit",
    ...
    skip_incorrect:true
});

Verwandte Anleitungen

• Allgemeine Konfigurationsanweisungen
• Units View Templates
• Daten laden
• Event-Objekt-Operationen
• Blockieren und Markieren von Daten
• Skins