RTL (Rechts-nach-links) Modus

Der Scheduler unterstützt den RTL-Modus (Rechts-nach-links), den Sie mithilfe der rtl Konfigurationsoption aktivieren können.

scheduler.config.rtl = true;

Sobald der RTL-Modus aktiviert ist, werden die Kalenderelemente standardmäßig von rechts nach links angezeigt, mit Ausnahme der Header-Elemente des Schedulers.

Related sample:  Basic initialization

Um die Reihenfolge der Header-Elemente des Schedulers anzupassen, müssen Sie deren CSS-Klassen wie folgt anpassen:

<style type="text/css" >
    html, body{
        margin:0px;
        padding:0px;
        height:100%;
        overflow:hidden;
    }   
 
    .dhx_cal_prev_button{right: auto !important; left: 16px !important;}
    .dhx_cal_next_button{right: auto !important; left: 148px !important;}
    .dhx_cal_today_button{right: auto !important; left: 57px !important;}
    .dhx_cal_tab[name="day_tab"]{left: auto !important; right: 16px !important;}
    .dhx_cal_tab[name="week_tab"]{left: auto !important; right: 103px !important;}
    .dhx_cal_tab[name="month_tab"]{left: auto !important; right: 192px !important;}
    .dhx_cal_container_rtl  .dhx_cal_tab {
        border-right-style: solid;
        border-right-width: 1px;
    }
</style>

Beispiele für den RTL-Modus

Monatsansicht im RTL-Modus

So sieht die Monatsansicht im RTL-Modus aus. Die Ereignistitel und -details sind jetzt am rechten Rand jedes Ereignisfeldes ausgerichtet.

Ereignisfenster im RTL-Modus

Das folgende Bild zeigt, wie sich das Detailfenster eines Ereignisses optisch anpasst, wenn der RTL-Modus aktiviert ist.

Zeitleiste im RTL-Modus

Im RTL-Modus werden Zeitleisten automatisch von rechts nach links innerhalb des Schedulers angeordnet.

Anpassung von Elementen im RTL-Modus

Zusätzliche CSS-Klassen stehen zur Verfügung, um bestimmte Elemente im RTL-Modus individuell zu gestalten.

Folgende Klassen können Sie verwenden:

• dhx_cal_container_rtl – richtet sich an den gesamten Scheduler-Container
• dhx_tooltip_rtl – richtet sich an das Tooltip-Element
• dhx_quick_info_rtl – richtet sich an das 'Quick Info' Popup
• dhx_cal_light_rtl – richtet sich an die Lightbox

Beispiel:

.dhx_cal_container_rtl .dhx_cal_event{
    margin-right: -5px;
}

Damit werden alle Scheduler-Ereignisse innerhalb des Containers um 5px nach rechts verschoben.

Nach oben