Available only in PRO Edition
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.
Um die Units-Ansicht zum Scheduler hinzuzufügen, gehen Sie wie folgt vor:
scheduler.plugins({
units: true
});
<div id="scheduler_here" class="dhx_cal_container" ...>
<div class="dhx_cal_navline">
...
<div class="dhx_cal_tab" name="unit_tab" style="right:280px;"></div>
</div>
...
</div>
//'unit_tab' ist der Name unseres div
scheduler.locale.labels.unit_tab = "Unit"
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"}
]
});
Im Gegensatz zu Standardansichten wie Tag, Monat oder Jahr benötigen Mehrressourcen-Ansichten wie Units und Timeline ein zusätzliches Pflichtfeld in den Ereignissen:
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.
Um die Liste der Units in der Units-Ansicht dynamisch zu aktualisieren, können Sie die Methoden serverList und updateCollection verwenden.
Um Units über mehrere Tage hinweg anzuzeigen, nutzen Sie den days-Parameter:
scheduler.createUnitsView({
name:"week_unit",
property:"section_id",
list:sections,
days:3 });
Related sample: 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:
scheduler.date.units_start = function (date) {
return scheduler.date.week_start(date);
};
Ab Version 4.1 ist es möglich, Ereignisse gleichzeitig mehreren Units zuzuweisen.
So aktivieren Sie diese Funktion:
<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', ...}]);
Related sample: Multisection events in Timeline and Units view
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:
Um Bereichsdaten vom Server zu laden, verwenden Sie:
scheduler.createUnitsView({
name:"unit",
property:"type_id",
list:scheduler.serverList("units"),
size:20,
step:1
});
wo serverList eine Liste namens 'units' zurückgibt.
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);
Related sample: Loading Units sections from the server
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
});
Related sample: Horizontal scrolling sections in Units view
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
});