Mobile Responsive Scheduler

dhtmlxScheduler unterstützt Touch-Geräte wie:

• iOS-Geräte (iPad, iPhone, iPod);
• Windows 10 Tablets und Touchscreen-Monitore;
• Android-Geräte.

Der Scheduler läuft auch auf Smartphones, aber aufgrund des begrenzten Bildschirms kann eine manuelle Anpassung erforderlich sein.

Hilfreiche Tipps!

• Die Touch-Unterstützung ist standardmäßig aktiviert und funktioniert in allen Scheduler-Modi.
• Für Apps, die auf Touch-Geräte abzielen, wird die Verwendung des 'material' Skin dringend empfohlen, da er größere, leicht zu bedienende Schaltflächen bietet.
• Wenn Sie mit mobilen Nutzern rechnen, ist das Hinzufügen von Quick Info in der Regel eine gute Wahl.
• Das Hinzufügen des folgenden Meta-Tags zu Ihrer Seite sorgt dafür, dass alle Scheduler-Elemente größer und leichter bedienbar werden:

<meta name="viewport" content="width=device-width, initial-scale=1">

Responsives Layout

Wenn Sie den Scheduler über die Header-Konfiguration initialisieren, können Sie ein Header-Layout wählen, das zur Bildschirmgröße des Clients passt. Dabei werden auch Stile angewendet, die die Größe von Elementen und Schriftarten für kleinere Bildschirme anpassen.

Header

Zum Beispiel können Sie den Header in mehrere Zeilen aufteilen:

Der obige Screenshot zeigt den Scheduler auf einem kleinen Bildschirm.

Diese Konfiguration kann dynamisch gewechselt werden, sodass Sie verschiedene Header-Konfigurationen für große und kleine Bildschirme definieren können:

// Konfigurationen definieren
const compactHeader = {
    rows: [
        { 
            cols: [
                "prev",
                "date",
                "next",
            ]
        },
        { 
            cols: [
                "day",
                "week",
                "month",
                "spacer",
                "today"
            ]
        }
    ]
};
 
const fullHeader = [
    "day",
    "week",
    "month",
    "date",
    "prev",
    "today",
    "next"
];
 
// Umschalter hinzufügen, um die passende Konfiguration je nach aktueller Bildschirmgröße zu wählen
 
function resetConfig(){
    let header;
    if (window.innerWidth < 1000) {
        header = compactHeader;
    } else {
        header = fullHeader;
 
    }
    scheduler.config.header = header;
    return true;
}
 
// Konfiguration initial und bei jedem Neuzeichnen oder Ändern der Größe des Schedulers anwenden:
 
resetConfig();
scheduler.attachEvent("onBeforeViewChange", resetConfig);
scheduler.attachEvent("onSchedulerResize", resetConfig);
 
scheduler.config.responsive_lightbox = true; // responsive Lightbox
 
scheduler.init("scheduler_here");

Related sample:  Responsive scheduler

Lightbox

Die Scheduler-API enthält die Option responsive_lightbox, um die Lightbox an verschiedene Bildschirmgrößen anzupassen.

scheduler.config.responsive_lightbox = true; //standardmäßig deaktiviert
//auf true setzen, um die Lightbox responsiv zu machen

So passt sich die Lightbox auf kleineren Bildschirmen an:

Related sample:  Responsive scheduler

Sie können das Aussehen der Lightbox im responsiven Modus anpassen. Sie erhält eine zusätzliche CSS-Klasse dhx_cal_light_responsive, die Sie in Ihren Styles gezielt ansprechen können.

Standardmäßig enthält diese Klasse Media Queries, die nur auf kleineren Bildschirmen (weniger als 1024px) angewendet werden, sodass Sie das Erscheinungsbild der Lightbox auf diesen Geräten anpassen können.

Touch-Konfigurationsoptionen

Nachfolgend finden Sie die Konfigurationsoptionen für mobile und responsive Unterstützung:

• header - steuert das header-layout
• touch - schaltet die touch-unterstützung im scheduler ein/aus
• touch_drag - legt die zeit in millisekunden fest, um einen langen touch von einem scrollen zu unterscheiden
• touch_tip - schaltet hinweisnachrichten in der oberen rechten ecke ein/aus
• touch_swipe_dates - schaltet wischgesten zum wechseln von daten ein/aus
• responsive_lightbox - aktiviert responsive styles für die lightbox (standardmäßig aus)

Touch-Gesten im Scheduler

• Doppeltippen – entspricht einem Doppelklick und öffnet die Event-Bearbeitung oder -Erstellung;
• Langes Tippen und Ziehen – wird zum Verschieben oder Erstellen von Events verwendet;
• Wischen – wechselt zur nächsten oder vorherigen Zeitspanne (standardmäßig deaktiviert).

'Quick info' Erweiterung

Um die Touch-Funktionalität zu verbessern, enthält die Bibliothek die "Quick Info" Erweiterung.

Diese Erweiterung ersetzt die Standard-Sidebar-Schaltflächen und das kleine Bearbeitungsformular (die auf Touch-Geräten schwer zu bedienen sein können) durch größere, benutzerfreundlichere Bedienelemente.

Um den Scheduler mit großen Schaltflächen zu aktivieren, fügen Sie die "Quick Info" Erweiterung zu Ihrer Seite hinzu:

<script>
    scheduler.plugins({
        quick_info: true
    });
    scheduler.init('scheduler_here',new Date(2019,5,30),"day");
      ...
<script>

Related sample:  Touch-oriented scheduler

Nach der Aktivierung ersetzt der Scheduler die Standard-Schaltflächen durch größere:

Die Erweiterung bietet:

• 3 Templates

• quick_info_content - definiert den inhalt des pop-up-bearbeitungsformulars
• quick_info_date - definiert das datum im pop-up-bearbeitungsformular
• quick_info_title - definiert den titel des pop-up-bearbeitungsformulars

• 1 Konfigurationsoption

• quick_info_detached - steuert, ob das event-formular seitlich oder in der nähe des ausgewählten events angezeigt wird

• 2 Methoden

• hideQuickInfo - blendet das pop-up-eventformular aus, falls es geöffnet ist
• showQuickInfo - zeigt das pop-up-eventformular für ein bestimmtes event an

• 2 Events

• onQuickInfo - wird ausgelöst, wenn das pop-up-bearbeitungsformular erscheint
• onAfterQuickInfo - wird ausgelöst, nachdem das pop-up-eventformular geschlossen wurde

Nach oben