jquery.schedule

jq.Schedule

jquery وhtml جدول التقويم

• دعم السحب والإفلات
• تغيير حجم الجدول الزمني
• اياكس الحصول على البيانات

ثَبَّتَ

طَرد

 npm i jq.schedule --save

تجريبي

جرب العرض التوضيحي

كيفية الاستخدام

إلحاق رأس CSS

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

أدخل الجسم

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

خيارات

المعلمات

مفتاح	قيمة	وصف
اسم الفئة	jq-schedule	إضافة فئة العنصر (jq.schedule الافتراضي)
startTime	07:00	جدول وقت البدء (HH:ii)
endTime	21:00	جدول وقت الانتهاء (HH:ii)
widthTime	600	مثال على الطابع الزمني للخلية 10 دقائق
timeLineY	60	الارتفاع (بكسل)
VerticalScrollbar	20	شريط التمرير (بكسل)
timeLineBorder	2	الحدود (أعلى وأسفل)
packageMoveWidth	6	width لنقل جميع الجداول الزمنية إلى يمين خلية الخط الزمني التي تم النقر عليها
صفوف	{هدف}	بيانات الجدول الزمني
قابلة للسحب	{منطقي}	تمكين السحب (صحيح افتراضي)
يمكن تغيير حجمه	{منطقي}	تمكين تغيير الحجم (صحيح افتراضي)
resizableLeft	{منطقي}	تمكين تغيير حجم المقبض الأيسر (خطأ افتراضي)

جدولة البيانات

مفتاح	يكتب	وصف
عنوان	خيط	جدولة عنوان الصف
العنوان الفرعي	خيط	وصف صف الجدول
جدول	هدف[]	جدول صف المصفوفة

جدولة البيانات في الكائن

مفتاح	يكتب	وصف
يبدأ	خيط	سمو:ثانيا
نهاية	خيط	سمو:ثانيا
نص	خيط	عنوان الشريط
بيانات	هدف	ربط البيانات

طرق رد الاتصال

onChange (العقدة: العنصر، البيانات: الكائن)

عند تغيير رد اتصال شريط الجدول الزمني

onInitRow (العقدة: العنصر، البيانات: الكائن)

تهيئة البيانات

عند النقر (العقدة: العنصر، البيانات: الكائن)

عند رد اتصال شريط النقر

onAppendRow (العقدة: العنصر، البيانات: الكائن)

عند إضافة رد اتصال لصف الجدول الزمني

onSpendSchedule (العقدة: العنصر، البيانات: الكائن)

عند إضافة رد اتصال بشريط الجدول الزمني

onScheduleClick (العقدة: العنصر، الوقت: السلسلة، البيانات: كائن)

عند النقر فوق رد اتصال صف الجدول الزمني

طُرق

الحصول على بيانات الصف

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

الحصول على بيانات الجدول الزمني

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

مسح كافة البيانات

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

مسح كافة البيانات والصف

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

إضافة صف

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

إضافة البيانات

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

إعداد التبديل

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

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

من أجل التنمية

قم بتشغيل مزامنة متصفح الخادم

 npm run serve