daypilot

最新推荐文章于 2024-06-11 22:42:50 发布
qingkaqingka
最新推荐文章于 2024-06-11 22:42:50 发布
阅读量382
点赞数
分类专栏：前端
前端专栏收录该内容
26 篇文章 0 订阅
订阅专栏
<!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>