jquery.schedule

jq.Zeitplan

JQuery- und HTML-Zeitplankalender

• Drag-and-Drop-Unterstützung
• Größe des Zeitplans ändern
• Ajax Daten abrufen

installieren

Paket

 npm i jq.schedule --save

Demo

Probieren Sie die Demo aus

Wie zu verwenden

Kopf-CSS anhängen

 <link rel="stylesheet" type="text/css" href="./jquery.schedule/dist/css/style.min.css" />

Körper einsetzen

 <div id="schedule"></div>
<script type="text/javascript" src="./jquery.schedule/dist/js/jq.schedule.min.js"></script>
<script type="text/javascript">
    $(function(){
        var $sc = $("#schedule").timeSchedule({
            startTime: "07:00", // schedule start time(HH:ii)
            endTime: "21:00",   // schedule end time(HH:ii)
            widthTime:60 * 10,  // cell timestamp example 10 minutes
            timeLineY:60,       // height(px)
            verticalScrollbar:20,   // scrollbar (px)
            timeLineBorder:2,   // border(top and bottom)
            bundleMoveWidth:6,  // width to move all schedules to the right of the clicked time line cell
            rows : {
                '0' : {
                    title : 'Title Area',
                    subtitle : 'Description',
                    schedule:[
                        {
                            start:'09:00',
                            end:'12:00',
                            text:'Text Area',
                            data:{
                            }
                        },
                        {
                            start:'11:00',
                            end:'14:00',
                            text:'Text Area',
                            data:{
                            }
                        }
                    ]
                },
                '1' : {
                    title : 'Title Area',
                    schedule:[
                        {
                            start:'16:00',
                            end:'17:00',
                            text:'Text Area',
                            data:{
                            }
                        }
                    ]
                }
            },
            onChange: function(node, data){
                addLog('onChange', data);
            },
            onInitRow: function(node, data){
                addLog('onInitRow', data);
            },
            onClick: function(node, data){
                addLog('onClick', data);
            },
            onAppendRow: function(node, data){
                addLog('onAppendRow', data);
            },
            onAppendSchedule: function(node, data){
                addLog('onAppendSchedule', data);
            },
            onScheduleClick: function(node, time, timeline){
                addLog('onScheduleClick', time + ' ' + timeline);
            }
        });
    });
</script>

Optionen

Parameter

Schlüssel	Wert	Beschreibung
Klassenname	jq-Zeitplan	Elementklasse hinzufügen (Standard jq.schedule)
Startzeit	07:00	Startzeit planen (HH:ii)
Endzeit	21:00	Endzeit des Zeitplans (HH:ii)
widthTime	600	Beispiel für einen Zellenzeitstempel: 10 Minuten
timeLineY	60	Höhe (px)
vertikale Bildlaufleiste	20	Bildlaufleiste (px)
timeLineBorder	2	Rand (oben und unten)
bundleMoveWidth	6	Breite, um alle Zeitpläne rechts von der angeklickten Zeitlinienzelle zu verschieben
Reihen	{Objekt}	Zeitplandaten
ziehbar	{boolescher Wert}	Draggable aktivieren (Standard: true)
veränderbar	{boolescher Wert}	Größenänderung aktivieren (Standard: wahr)
resizableLeft	{boolescher Wert}	Aktivieren Sie die Größenänderung des linken Griffs (Standard: falsch).

Planen Sie Daten

Schlüssel	Typ	Beschreibung
Titel	Zeichenfolge	Zeilentitel planen
Untertitel	Zeichenfolge	Beschreibung der Zeitplanzeile
Zeitplan	Objekt[]	Zeitplanzeile des Arrays

Planen Sie Daten im Objekt

Schlüssel	Typ	Beschreibung
Start	Zeichenfolge	HH:ii
Ende	Zeichenfolge	HH:ii
Text	Zeichenfolge	Titel der Bar
Daten	Objekt	Daten binden

Rückrufmethoden

onChange(Knoten: Element, Daten: Objekt)

Rückruf in der Änderungsplanleiste

onInitRow(Knoten: Element, Daten: Objekt)

Daten initialisieren

onClick(Knoten: Element, Daten: Objekt)

Rückruf in der Klickleiste

onAppendRow(Knoten: Element, Daten: Objekt)

beim Hinzufügen eines Rückrufs für eine geplante Zeile

onSppendSchedule(Knoten: Element, Daten: Objekt)

beim Hinzufügen eines Rückrufs in der Zeitplanleiste

onScheduleClick(Knoten: Element, Zeit: Zeichenfolge, Daten: Objekt)

Beim Klicken Zeilenrückruf planen

Methoden

Zeilendaten abrufen

 var data = $("#schedule").timeSchedule('timelineData');

Zeitplandaten abrufen

 var data = $("#schedule").timeSchedule('scheduleData');

Alle Daten löschen

 $("#schedule").timeSchedule('resetData');

Alle Daten und Zeilen löschen

 $("#schedule").timeSchedule('resetRowData');

Zeile hinzufügen

 $("#schedule").timeSchedule('addRow', timeline, {
    title : 'Title Area',
    schedule:[
        {
            start:'09:00',
            end:'12:00',
            text:'Text Area',
            data:{
            }
        }
    ]
});

Daten hinzufügen

 $("#schedule").timeSchedule('addSchedule', timeline, {
    start: start,
    end: end,
    text:'Insert Schedule',
    data:{}
});

Schaltereinstellung

 $("#schedule").timeSchedule('setDraggable', true or false);

 $("#schedule").timeSchedule('setResizable', true or false);

Für Entwicklung

Führen Sie die Server-Browsersynchronisierung aus

 npm run serve