JS Scheduler - DayPilot
库链接：http://javascript.daypilot.org/demo/scheduler/
demo代码(保存html即可运行)：
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="http://javascript.daypilot.org/demo/media/layout.css" />
<link type="text/css" rel="stylesheet" href="http://javascript.daypilot.org/demo/themes/calendar_g.css" />
<link type="text/css" rel="stylesheet" href="http://javascript.daypilot.org/demo/themes/calendar_green.css" />
<link type="text/css" rel="stylesheet" href="http://javascript.daypilot.org/demo/themes/calendar_traditional.css" />
<link type="text/css" rel="stylesheet" href="http://javascript.daypilot.org/demo/themes/calendar_transparent.css" />
<link type="text/css" rel="stylesheet" href="http://javascript.daypilot.org/demo/themes/calendar_white.css" />
<!-- helper libraries -->
<script src="http://javascript.daypilot.org/demo/helpers/jquery-1.12.2.min.js" type="text/javascript"></script>
<!-- daypilot libraries -->
<script src="http://javascript.daypilot.org/demo/js/daypilot-all.min.js?v=2548" type="text/javascript"></script>
</head>
<body>
<div class="main">
<div style="float:left; width: 160px;">
<div id="nav"></div>
</div>
<div style="margin-left: 160px;">
<div class="space">
Theme: <select id="theme">
<option value="calendar_default">Default</option>
<option value="calendar_white">White</option>
<option value="calendar_g">Google-Like</option>
<option value="calendar_green">Green</option>
<option value="calendar_traditional">Traditional</option>
<option value="calendar_transparent">Transparent</option>
</select>
</div>
<div id="dp"></div>
</div>
<script type="text/javascript">
var dp = new DayPilot.Scheduler("dp");
dp.startDate = "2016-01-01";
dp.days = 366;
dp.scale = "Day";
dp.timeHeaders = [
{ groupBy: "Month", format: "MMM yyyy" },
{ groupBy: "Cell", format: "d" }
];
dp.bubble = new DayPilot.Bubble();
dp.resourceBubble = new DayPilot.Bubble();
dp.contextMenu = new DayPilot.Menu({items: [
{text:"Edit", onclick: function() { dp.events.edit(this.source); } },
{text:"Delete", onclick: function() { dp.events.remove(this.source); } },
{text:"-"},
{text:"Select", onclick: function() { dp.multiselect.add(this.source); } },
]});
dp.treeEnabled = true;
dp.resources = [
{ name: "Locations", id: "G1", expanded: true, children:[
{ name : "Room 1", id : "A" },
{ name : "Room 2", id : "B" },
{ name : "Room 3", id : "C" },
{ name : "Room 4", id : "D" }
]
},
{ name: "People", id: "G2", expanded: true, children:[
{ name : "Person 1", id : "E" },
{ name : "Person 2", id : "F" },
{ name : "Person 3", id : "G" },
{ name : "Person 4", id : "H" }
]
},
{ name: "Tools", id: "G3", expanded: false, children:[
{ name : "Tool 1", id : "I" },
{ name : "Tool 2", id : "J" },
{ name : "Tool 3", id : "K" },
{ name : "Tool 4", id : "L" }
]
},
];
dp.heightSpec = "Max";
dp.height = 500;
dp.events.list = [];
for (var i = 0; i < 12; i++) {
var duration = Math.floor(Math.random() * 6) + 1; // 1 to 6
var durationDays = Math.floor(Math.random() * 6); // 0 to 5
var start = Math.floor(Math.random() * 6) + 2; // 2 to 7
var e = {
start: new DayPilot.Date("2016-03-25T00:00:00").addDays(start),
end: new DayPilot.Date("2016-03-25T12:00:00").addDays(start).addDays(durationDays).addHours(duration),
id: DayPilot.guid(),
resource: String.fromCharCode(65+i),
text: "Event " + (i + 1)
};
dp.events.list.push(e);
}
dp.eventMovingStartEndEnabled = true;
dp.eventResizingStartEndEnabled = true;
dp.timeRangeSelectingStartEndEnabled = true;
dp.onBeforeResHeaderRender = function(args) {
args.resource.bubbleHtml = "Test";
};
dp.onBeforeRowHeaderRender = function(args) {
};
dp.onBeforeCellRender = function(args) {
/*
if (args.cell.start <= DayPilot.Date.today() && DayPilot.Date.today() < args.cell.end) {
args.cell.backColor = "#ffcccc";
}
*/
};
dp.onEventMove = function(args) {
};
// event moving
dp.onEventMoved = function (args) {
dp.message("Moved: " + args.e.text());
};
dp.onEventClicked = function(args) {
};
dp.onEventMoving = function(args) {
if (args.e.resource() === "A" && args.resource === "B") { // don't allow moving from A to B
args.left.enabled = false;
args.right.html = "You can't move an event from Room 1 to Room B";
args.allowed = false;
}
else if (args.resource === "B") { // must start on a working day, maximum length one day
while (args.start.getDayOfWeek() == 0 || args.start.getDayOfWeek() == 6) {
args.start = args.start.addDays(1);
}
args.end = args.start.addDays(1); // fixed duration
args.left.enabled = false;
args.right.html = "Events in Room 2 must start on a workday and are limited to 1 day.";
}
if (args.resource === "C") {
var except = args.e.data;
var events = dp.rows.find(args.resource).events.all();
var start = args.start;
var end = args.end;
var overlaps = events.some(function(item) {
return item.data !== except && DayPilot.Util.overlaps(item.start(), item.end(), start, end);
});
while (overlaps) {
start = start.addDays(1);
end = end.addDays(1);
overlaps = events.some(function(item) {
return item.data !== except && DayPilot.Util.overlaps(item.start(), item.end(), start, end);
});
}
if (args.start !== start) {
args.start = start;
args.end = end;
args.left.enabled = false;
args.right.html = "Start automatically moved to " + args.start.toString("d MMMM, yyyy");
}
}
};
dp.onBeforeEventRender = function(args) {
args.data.bubbleHtml = "<div><b>" + args.data.text + "</b></div><div>Start: " + new DayPilot.Date(args.data.start).toString("M/d/yyyy") + "</div><div>End: " + new DayPilot.Date(args.data.end).toString("M/d/yyyy") + "</div>";
};
dp.onEventResize = function(args) {
};
// event resizing
dp.onEventResized = function (args) {
dp.message("Resized: " + args.e.text());
};
// event creating
dp.onTimeRangeSelected = function (args) {
var name = prompt("New event name:", "New Event ");
dp.clearSelection();
if (!name) return;
var e = new DayPilot.Event({
start: args.start,
end: args.end,
id: DayPilot.guid(),
resource: args.resource,
text: name
});
dp.events.add(e);
dp.message("Created");
/*
new DayPilot.Modal({
onClosed: function(margs) {
dp.clearSelection();
if (!margs.result) {
return;
}
//if (!name) return;
var e = new DayPilot.Event({
start: args.start,
end: args.end,
id: DayPilot.guid(),
resource: args.resource,
text: margs.result.name
});
dp.events.add(e);
dp.message("Created");
}
}).showUrl("modal.html");
*/
};
dp.separators = [
{color:"Red", location:"2016-03-29T00:00:00", layer: "BelowEvents"}
];
dp.treePreventParentUsage = true;
dp.onEventClicked = function(args) {
//alert("clicked");
};
dp.timeRangeRightClickHandling = "Disabled";
dp.onGridMouseDown = function(args) {
var button = DayPilot.Util.mouseButton(args.originalEvent);
if (button.right) {
args.action = "None";
}
};
dp.eventClickHandling = "Edit";
/*
dp.onEventClick = function(args) {
new DayPilot.Modal({
left: DayPilot.abs(args.div).x,
width: args.div.offsetWidth,
height: args.div.offsetHeight,
top: DayPilot.abs(args.div).y,
theme: "modal_min"
}).showHtml(args.e.text());
};
*/
dp.onEventMove = function(args) {
if (args.ctrl) {
var newEvent = new DayPilot.Event({
start: args.newStart,
end: args.newEnd,
text: "Copy of " + args.e.text(),
resource: args.newResource,
id: DayPilot.guid() // generate random id
});
dp.events.add(newEvent);
// notify the server about the action here
args.preventDefault(); // prevent the default action - moving event to the new location
}
};
dp.init();
dp.scrollTo("2016-03-25");
$(document).ready(function() {
$(document).keydown(function(ev) {
if (ev.which === 27) {
DayPilot.Scheduler.stopDragging();
}
});
});
</script>
<script type="text/javascript">
$(document).ready(function () {
$("#theme").change(function (e) {
dp.theme = this.value;
dp.update();
});
});
</script>
</div>
<div class="clear">
</div>
</body>
</html>