this is base on jq.Schedule! if you interested in it, you can reference orginal jq.Schedule!
Drag and Drop Support
Resize Schedule Support
Ajax Support(Callback Event Option)
Add schedule Support
Add multiple Support
Time width adjust Schedule Support
Weekday schedule Support
Business hours Support (fixed)
Configurable Delete schedule Support
Toggle click to add event Support
Toggle Drag and Drop Support (re-added from original)
Toggle Resize Support (re-added from original)
Row Subtitle (re-added from original)
Custom EventCard content Support
Example Sample Demo
Please Download jQuery.Schedule.Plus v2.3
include jquery.jsandjquery.ui.js before jq.schedule.plus
<script src="jquery-1.10.2.js" type="text/javascript" language="javascript"></script>
<script src="jquery-ui-1.10.4.js" type="text/javascript" language="javascript"></script>
<script type="text/javascript" src="../js/jq.schedule.plus.js"></script>
<link rel="stylesheet" type="text/css" href="../css/style.css" />
<!-- If using Bootsrap (v3) and has issues with the appeareance, please also include this -->
<link rel="stylesheet" type="text/css" href="../css/fix-bootstrap.css" />init scripts
<script type="text/javascript">
jQuery(document).ready(function(){
var $sc = jQuery("#schedule").timeSchedule($options);
});
</script>
| name | Type | description | |
|---|---|---|---|
| today | String(yyyy/MM/dd) | Combined with nowTime all dates in the timeline before today@nowTime will be greyed-out (disabled) by default. | |
| nowTime | String(HH:mm) | See today for reference | |
| startDate | String(yyyy/MM/dd) | First date of the schedule | |
| endDate | String(yyyy/MM/dd) | Last date of the schedule | |
| weekday | Array(String) | Defines the name to be shown on hedaer bar for each DoW starting from sunday | |
| dowHeaderClass | Array(String) | Defines a class to add the the Date Header for each DoW starting from sunday | |
| startTime | String(HH:mm) | schedule start time | |
| endTime | String(HH:mm) | schedule end time | |
| widthTimeX | Integer | minuite time line cell | |
| spacingX | Integer | [px] Spacing between cards in the X axis. By default it's one pixel | |
| timeLineY | Integer | cell height px | |
| verticalScrollbar | Integer | scrollbar (px) | |
| timeLineBorder | Integer | border(top and bottom) | |
| bundleMoveWidth | Integer | width to move all schedules to the right of the clicked time line cell. | |
| debug | String | debug string output elements | |
| multiple | Boolean | Allows the user to add more than one event by clicking on the timeline | |
| clickToAdd | Boolean | Allows the user to add events by clicking on the timeline | |
| draggable | Boolean | Allows drag/drop events in the timeline | |
| resizable | Boolean | Allows to resize an event in the timeline | |
| fullOpacity | Boolean | Overrides the opacity of all event's Card so they are fully opaque. Else, when setting them to not-draggable/not-resizable opacity is dimmed | |
| allowDelete | Boolean | Defines if event Cards in the timeline can be deletted | |
| rows | Array | Row Data. Each row is a timeline with a given resource name (title) | |
| title | String | Title of the resource in the timeline | |
| data | Object | Custom optional object | |
| impossibleDate | Array(yyyy/MM/dd) | Impossible dates are greyed-out and disabled | |
| businessHours | Array | Must have 7 elements, one per each DoW. It defines the open/close time of each, starting from sunday | |
| schedule | Array | Events to add to the row (timeline) | |
| init_data | function (node, data) | Callback init event | |
| change | function (node, data) | Callback change event | |
| click | function (node, data) | Callback click event | |
| timeClick | function (element, data) | Callback timebar click | |
| append | function (node, data) | Callback append event | |
| dateClick | function (date) | Callback click date event | |
| timeDrag | function (data) | Callback drag event | |
| titleClick | function (data) | Callback click timebar line id (maybe row id?) | |
| delete | function (data) | Callback delete event | |
| applyCustomContent | function (element, cardElement, eventData) | Function to apply the custom content to the Card Elements | |
| contentDefinition | String | Defines the DOM structure of the eventCard | |
| applyCustomContentTitle | function (rowElement, rowData) | Function to apply the custom content to the Row/Timeline Title Elements | |
| contentDefinitionTitle | String | Defines the DOM structure of the Row/Timeline Title | |
Each row must have 7 elements, one per each Day of the Week. It defines the open/close time of each one, starting from sunday. The date in the timeline would be greyed-out in the interval outside the start-end for the given DoW
| name | Type | description |
|---|---|---|
| start | String(HH:mm) | Resource open time |
| end | String(HH:mm) | Resource close time |
I like to call this Event Data because it defines the data of the scheduled events in the given timeline (row). Take into account that in the original version, the start and end were defined as TIME, but in this plus version, as the timeline can display multiple dates, each start/end are DATE-TIME
| name | Type | description | |
|---|---|---|---|
| start | String (yyyy/MM/dd HH:mmm) | DateTime when this event starts | |
| end | String (yyyy/MM/dd HH:mm) | DateTime when this event ends | |
| text | String | Visible Text of the Event | |
| class | String | Class to add to the event card (note this was inside data in the original version) | |
| data | Object | Addiitonal data of the event. Can add custom attributes, but has special ones, as shown below | |
| image? | String | URL of an image to be shown on Event card (this was un-docummented in the original, I've not test it in the plus version) | |