jquery.schedule

jq.Jadwal

kalender jadwal jquery dan html

• Dukungan Seret dan Lepas
• Ubah Ukuran Jadwal
• Ajax Dapatkan Data

memasang

kemasan

 npm i jq.schedule --save

Demo

Coba Demo

Cara menggunakan

tambahkan kepala css

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

masukkan tubuh

 <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>

Pilihan

Parameter

Kunci	Nilai	Keterangan
nama kelas	jq-jadwal	tambahkan kelas elemen (jq.jadwal default)
Waktu mulai	07:00	jadwal waktu mulai (HH:ii)
waktu akhir	21:00	jadwal waktu berakhir (HH:ii)
lebarWaktu	600	contoh stempel waktu sel 10 menit
garis waktuY	60	tinggi (px)
vertikalScrollbar	20	bilah gulir (px)
batas garis waktu	2	perbatasan (atas dan bawah)
bundelMoveWidth	6	lebar untuk memindahkan semua jadwal ke kanan sel garis waktu yang diklik
baris	{obyek}	data jadwal
dapat diseret	{boolean}	aktifkan draggable (defaultnya benar)
dapat diubah ukurannya	{boolean}	aktifkan pengubahan ukuran (default benar)
dapat diubah ukurannyaKiri	{boolean}	aktifkan pegangan kiri yang dapat diubah ukurannya (default salah)

Data Jadwal

Kunci	Jenis	Keterangan
judul	rangkaian	Judul Baris Jadwal
subjudul	rangkaian	Deskripsi Baris Jadwal
jadwal	obyek[]	menjadwalkan baris array

Jadwalkan Data di Objek

Kunci	Jenis	Keterangan
awal	rangkaian	HH:ii
akhir	rangkaian	HH:ii
teks	rangkaian	Judul Batang
data	obyek	mengikat data

Metode Panggilan Balik

onChange(simpul: Elemen, data: Objek)

pada panggilan balik bilah jadwal perubahan

onInitRow(simpul: Elemen, data: Objek)

inisialisasi data

onClick(simpul: Elemen, data: Objek)

pada panggilan balik bilah klik

onAppendRow(simpul: Elemen, data: Objek)

pada panggilan balik baris jadwal tambahan

onSppendSchedule(simpul: Elemen, data: Objek)

pada tambahkan panggilan balik bilah jadwal

onScheduleClick(simpul: Elemen, waktu: string, data: Objek)

pada panggilan balik baris jadwal klik

Metode

mendapatkan data baris

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

mendapatkan data jadwal

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

hapus semua data

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

hapus semua data dan baris

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

tambahkan baris

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

menambahkan data

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

pengaturan sakelar

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

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

Untuk Pembangunan

jalankan sinkronisasi browser server

 npm run serve