Simple Daily Schedule Plugin with jQuery and jQuery UI - Schedule

Simple Daily Schedule Plugin with jQuery and jQuery UI - Schedule
File Size: 32.1 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

A simple to use jQuery plugin for rendering a draggable, resizable and ajax-enabled daily schedule from JavaScript objects.

Features:

  • Supports drag and drop events based on jQuery UI.
  • Resizable schedule.
  • AJAX support.

See also:

How to use it:

1. Include the needed jQuery and jQuery UI on the html 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 jQuery library.

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

3. Render a basic time schedule with custom events.

jQuery("#schedule").timeSchedule({
  rows : {
    '1' : {
      title : 'Title Area',
      schedule:[{
        start:'09:00',
        end:'12:00',
        text:'Text Area',
        data:{}
      },{
        start:'11:00',
        end:'14:00',
        text:'Text Area',
        data:{}
      }]
    },},
});

4. Customization options.

// scheduled events
rows : {},

// 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)
verticalScrollbar: 0,

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

5. Events.

init_data: null,
change: null,
click: null,
append: null,
time_click: null,
debug:""      // debug selecter

Changelog:

2019-01-20

  • add bundle move option

This awesome jQuery plugin is developed by ateliee. For more Advanced Usages, please check the demo page or visit the official website.