Scheduler-Markup

So sieht das Standard-Markup des Schedulers aus:

<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" data-tab="day"></div>
        <div class="dhx_cal_tab" data-tab="week"></div>
        <div class="dhx_cal_tab" data-tab="month"></div>
    </div>
    <div class="dhx_cal_header"></div>
    <div class="dhx_cal_data"></div>       
</div>

Positionierung der Tabs

Ab Version 7.0 verwendet das Element .dhx_cal_navline ein Flex-Layout, und die Tabs werden anhand der CSS-Eigenschaft order angeordnet.

Versionen 6.0 und älter

Standard-Skin ('terrace')

Im Standard-Skin ('terrace') werden CSS-Eigenschaften wie style="right:204px;" beim Positionieren der Tabs ignoriert. Stattdessen werden die Tabs nach den internen Regeln des Schedulers platziert: Die Standardansichten erscheinen als segmentierte Button-Gruppe links, während zusätzliche Ansichten als separate Buttons rechts angezeigt werden.

Um die Tab-Positionierung manuell zu steuern (z. B. direkt im Markup), setzen Sie den Parameter fix_tab_position auf false, um das Standardverhalten zu deaktivieren, und geben Sie dann die Tab-Koordinaten per CSS an:

scheduler.config.fix_tab_position = false;
...
scheduler.init('scheduler_here',new Date(2013,05,11),"week");

Sie können diese CSS-Klassen verwenden, um einen segmentierten Button-Effekt zu erzeugen:

• dhx_cal_tab_last – rundet den rechten Rand ab
• dhx_cal_tab_first – rundet den linken Rand ab
• dhx_cal_tab_standalone – rundet beide Ränder ab

Um beispielsweise einen segmentierten 'day'-'week'-'month'-Button im Standard-Skin manuell zu setzen, verwenden Sie folgendes Markup:

<div class="dhx_cal_tab dhx_cal_tab_first" data-tab="day" style="left:14px;"></div>
<div class="dhx_cal_tab" data-tab="week"  style="left: 75px;"></div>
<div class="dhx_cal_tab dhx_cal_tab_last" data-tab="month" style="left:136px"></div>

Hinzufügen/Löschen von Ansichts-Tabs

Hinzufügen eines Tabs

Um einen neuen Tab zur Kopfzeile hinzuzufügen, fügen Sie einfach ein div mit der Klasse "dhx_cal_tab" innerhalb des Elements "dhx_cal_navline" ein:

<div class="dhx_cal_navline">
    ...
    <div class="dhx_cal_tab" data-tab="day"></div>
    <div class="dhx_cal_tab" data-tab="week"></div>
    <div class="dhx_cal_tab" data-tab="timeline"></div>
    <div class="dhx_cal_tab" data-tab="month"></div>
</div>

Das data-tab-Attribut gibt die Ansicht an, die beim Klick auf den Tab geöffnet wird, im Format {viewName}.

Löschen eines Tabs

Um einen Tab aus der Kopfzeile zu entfernen, löschen Sie einfach das entsprechende div im Markup:

Entfernen des 'month'-Tabs aus der Kopfzeile

<div class="dhx_cal_navline">
    ...
    <div class="dhx_cal_tab" data-tab="day"></div>
    <div class="dhx_cal_tab" data-tab="week"></div>
</div>

Navigationselemente ausblenden

Um die Navigationselemente in der Kopfzeile des Schedulers auszublenden, setzen Sie 'display:none' für die jeweiligen divs wie folgt:

Navigationselemente in der Kopfzeile ausblenden

<style>
    .dhx_cal_prev_button, .dhx_cal_next_button{
        display:none;
    }
</style>
 
<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>
    <div class="dhx_cal_header"></div>
    <div class="dhx_cal_data"></div>       
</div>

Kopfzeile des Schedulers ausblenden

Um die gesamte Kopfzeile des Schedulers auszublenden, setzen Sie 'display:none' auf die navline:

<style>
    .dhx_cal_navline{
        display:none;
    }
</style>

Nach oben