Dieser Artikel behandelt dhtmlxScheduler Version 6.0 und früher. Für Versionen 7.0 und höher finden Sie Details hier.
Hier liegt der Fokus darauf, die Größe von Skalen-Einheiten und Ereignisboxen anzupassen. Es werden vier typische Szenarien behandelt:
Problem 3: Nach dem Ändern der Skalenhöhe muss der gestreifte Hintergrund entsprechend angepasst werden.
Sehen wir uns zunächst das Standardverhalten der Ereignisboxen an:
Wenn das Ziel ist, dass 30-minütige Ereignisse richtig zur Skala passen, gibt es zwei Möglichkeiten:
Die Höhe der Skalen-Einheiten kann mit der Konfigurationsoption scheduler.config.hour_size_px
angepasst werden.
Um beispielsweise die Einheitshöhe zu verdoppeln, stellen Sie diese wie folgt ein:
scheduler.config.hour_size_px = 88;
scheduler.init(...);
Damit beträgt die Skalenhöhe 88px, sodass ein 30-minütiges Ereignis 44px hoch ist und damit zur Skala passt.
Related sample: Changing the Y-Axis step
Um das Erscheinungsbild der Ereignisboxen zu verändern, verwenden Sie die Methode scheduler.renderEvent
. Damit können Sie eine eigene Vorlage für Ereignisse bereitstellen.
scheduler.renderEvent = function(container, ev) {
// Ihr Anpassungscode hier
}
Weitere Details finden Sie im Kapitel Benutzerdefiniertes Ereignisfeld.
Related sample: Custom event box
Um sicherzustellen, dass kurze Ereignisse getrennt angezeigt werden und sich nicht überlappen, aktivieren Sie die Option scheduler.config.separate_short_events
:
scheduler.config.separate_short_events = true;
Der Hintergrund des Schedulers wird über ein Bild gesteuert. Um ihn zu aktualisieren, überschreiben Sie die CSS-Klasse .dhx_scale_holder wie folgt:
<style>.dhx_scale_holder {
background-image: url("imgs/myNewImage.png");
}
</style>
Initialisieren Sie anschließend den Scheduler:
scheduler.init(...);
Um den Standard-Skalenabstand zu ändern, überschreiben Sie das Template scheduler.templates.hour_scale
. Für einen 30-minütigen Abstand kann das Template wie folgt angepasst werden:
var format = scheduler.date.date_to_str("%H:%i");
var step = 30;
scheduler.templates.hour_scale = function(date){
var html="";
for (var i=0; i<60/step; i++){
html+="<div style='height:22px;line-height:22px;'>"+format(date)+"</div>";
date = scheduler.date.add(date,step,"minute");
}
return html;
}
Zugehörige Beispiele:
Nach oben