[Ajax] Drag and Drop Daily Time Schedule Plugin | jQuery.Schedule

Javascript Base Time Schedule Plugin – jQuery plugin is easy to use for displaying a draggable, resizable daily schedule, and Ajax-enabled JavaScript objects.

jquery scheduler open source, jquery scheduler example, jquery scheduler calendar, jquery scheduler plugin, jquery scheduler timeline, jquery weekly scheduler

Features:

  • Drag and Drop Support
  • Resize Schedule
  • Ajax Get Data

How to make use of it:

1. Include the needed jQuery and jQuery UI on the HTML web page.

<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>
<link rel="stylesheet"href="jquery-ui.css">

2. Include the jQuery schedule plugin’s stylesheet and JavaScript after the jQuery library.

<script src="jq.schedule.js"></script>
<link rel="stylesheet" href="style.css">

3. Render a primary time schedule with customized events.

jQuery("#schedule").timeSchedule({
  rows : {
    '1' : {
      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:{}
      }]
    },},
});

4. Customization choices.

// scheduled events
rows : {},

// classname
className: 'jq-schedule',

// schedule start time(HH:ii)
startTime: "07:00", 

// schedule end time(HH:ii)
endTime: "21:00",  

// width(px)
widthTimeX: 25,

// cell timestamp example 10 minutes
widthTime: 60 * 10,  

// height(px)
timeLineY: 60,    

// options for time slots
timeLineBorder:1,
timeBorder:1,   // border width
timeLinePaddingTop:0,
timeLinePaddingBottom:0, 
headTimeBorder:1, // time border width  

// data width
dataWidth:160,  

// scrollbar (px)
vertical<a href="#!">Scroll</a>bar: 0,

// width to move all schedules to the right of the clicked time cell
bundleMoveWidth: 1,

// draggable?
draggable: true,

// resizable?
resizable: true

5. Event handlers.

jQuery("#schedule").timeSchedule({
  onInitRow: : function(node, data){
    // do something
  },
  onChange: function(node, data){
    // do something
  },
  onClick: : function(node, data){
    // do something
  },
  onAppendRow: : function(node, data){
    // do something
  },
  onAppendSchedule: : function(node, data){
    // do something
  },
  onScheduleClick: : function(node, time, timeline){
    // do something
  }
});

6. API strategies.

// get row data
$("#schedule").timeSchedule('timelineData');

// get schedule data
$("#schedule").timeSchedule('scheduleData');

// clear all data
$("#schedule").timeSchedule('resetData');

// clear all data and rows
$("#schedule").timeSchedule('resetRowData');

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

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

// enable/disable draggable and resizable
$("#schedule").timeSchedule('setDraggable', true);
$("#schedule").timeSchedule('setResizable', false);

Simple Daily Schedule Plugin, jquery Schedule Plugin/Github, jquery time slot booking calendar


See Demo And Download

Official Website(ateliee): Click Here

This superior jQuery/javascript plugin is developed by ateliee. For extra Advanced Usage, please go to the official website.

Share