หน้าแรก>ซอร์สโค้ด ASP>หมวดหมู่อื่นๆ
ดาวน์โหลด

jq.กำหนดการ

ปฏิทินกำหนดการ jquery และ html

  • ลากและวางการสนับสนุน
  • ปรับขนาดกำหนดการ
  • อาแจ็กซ์รับข้อมูล

ติดตั้ง

บรรจุุภัณฑ์ 

 npm i jq.schedule --save

การสาธิต

ลองสาธิต

วิธีใช้

ต่อท้าย head 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-กำหนดการ เพิ่มคลาสองค์ประกอบ (ค่าเริ่มต้น jq.schedule)
เวลาเริ่มต้น 07:00 น กำหนดเวลาเริ่มต้น (HH:ii)
เวลาสิ้นสุด 21:00 น เวลาสิ้นสุดกำหนดการ (HH:ii)
ความกว้างเวลา 600 ตัวอย่างการประทับเวลาของเซลล์ 10 นาที
ไทม์ไลน์Y 60 ความสูง(พิกเซล)
แนวตั้งScrollbar 20 แถบเลื่อน (px)
timeLineBorder 2 เส้นขอบ (บนและล่าง)
มัด MoveWidth 6 width เพื่อย้ายกำหนดการทั้งหมดไปทางขวาของเซลล์เส้นเวลาที่คลิก
แถว {วัตถุ} ข้อมูลกำหนดการ
ลากได้ {บูลีน} เปิดใช้งานการลากได้ (ค่าเริ่มต้นเป็นจริง)
ปรับขนาดได้ {บูลีน} เปิดใช้งานการปรับขนาดได้ (ค่าเริ่มต้นเป็นจริง)
ปรับขนาดได้ซ้าย {บูลีน} เปิดใช้งานการปรับขนาดที่จับด้านซ้าย (ค่าเริ่มต้นเป็นเท็จ)

ข้อมูลกำหนดการ

สำคัญ พิมพ์ คำอธิบาย
ชื่อ เชือก กำหนดการชื่อแถว
คำบรรยาย เชือก กำหนดการคำอธิบายแถว
กำหนดการ วัตถุ[] กำหนดเวลาแถวของอาร์เรย์

กำหนดเวลาข้อมูลในออบเจ็กต์

สำคัญ พิมพ์ คำอธิบาย
เริ่ม เชือก ฮช:ii
จบ เชือก ฮช:ii
ข้อความ เชือก ชื่อบาร์
ข้อมูล วัตถุ ผูกข้อมูล

วิธีการโทรกลับ

onChange (โหนด: องค์ประกอบ, ข้อมูล: วัตถุ)

ในการเปลี่ยนแปลงการโทรกลับของแถบกำหนดการ

onInitRow (โหนด: องค์ประกอบ ข้อมูล: วัตถุ)

เริ่มต้นข้อมูล

onClick (โหนด: องค์ประกอบ, ข้อมูล: วัตถุ)

เมื่อคลิกบาร์โทรกลับ

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
ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด