@{
    ViewBag.Title = "Index";
}
<link href="~/Scripts/jquery-ui-1.11.4/jquery-ui.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/DayPilotProJavaScript/daypilot-all.min.js"></script>
<script src="~/Scripts/jquery-ui-1.11.4/jquery-ui.min.js"></script>
<style type="text/css">
    /*#dialog {
        font-size: 12px !important;
    }

    .ui-widget {
        font-size: 12px;
    }*/

    body {
        font-size: 10px;
    }

    .scheduler_default_cellparent, .scheduler_default_cell.scheduler_default_cell_business.scheduler_default_cellparent {
        background: #ddd;
    }

    #spn-Txt-Schedular-Year {
        font-size: large;
        font-family: 'Arial Rounded MT';
    }

    #ul-Release-Types {
        list-style: square;
    }

        #ul-Release-Types li {
        }

            #ul-Release-Types li:nth-child(1) {
                color: red;
            }

            #ul-Release-Types li:nth-child(2) {
                color: green;
            }

            #ul-Release-Types li:nth-child(3) {
                color: blue;
            }
</style>
<div id="content">
    <div>
        <!-- /top -->
        @*<div id="dialog" title="Create An Event" style="display:none;">
                <table>
                    <tr>
                        <td><span style="font-size:12px!important">Event Name</span></td>
                        <td><input type="text" id="eventName" required style="font-size:12px!important" /></td>
                    </tr>
                    <tr>
                        <td><span style="font-size:12px!important">Start Date</span></td>
                        <td><input type="text" id="startDatePicker" required readonly="readonly" style="font-size:12px!important" /></td>
                    </tr>
                    <tr>
                        <td><span style="font-size:12px!important">End Date</span></td>
                        <td><input type="text" id="endDatePicker" required readonly="readonly" style="font-size:12px!important" /></td>
                    </tr>
                </table>
            </div>*@
        <div>
            <table>
                <tr><td> <span id="spn-Txt-Schedular-Year">Program Overview : <span id="spn-Schedular-Year"></span></span></td></tr>
                <tr>
                    <td>
                        Release : <ul id="ul-Release-Types">
                            <li>Running Late</li>
                            <li>Done</li>
                            <li>In Progress</li>
                            <li>New</li>
                        </ul>
                    </td>
                </tr>
            </table>


        </div>
        <div style="float:left">
            <span class="ui-icon ui-icon-circle-arrow-w" style="cursor:pointer" onclick="decrmntYear()"></span>
        </div>
        <div style="float:right">
            <span class="ui-icon ui-icon-circle-arrow-e" style="cursor:pointer" onclick="incrmntYear()"></span>
        </div>
        <br style="clear:both" />
        <div id="diVScheduler">

        </div>
        <!-- bottom -->
    </div>
</div>

<script type="text/javascript">
    var dp = new DayPilot.Scheduler("diVScheduler");

    $(document).ready(function () {
        dp.startDate = "2011-01-01";
        //dp.endDate = "2017-01-01";
        dp.days = 365;
        dp.scale = "Day";
        dp.timeHeaders = [
            { groupBy: "Year", format: "yyyy" },
            { groupBy: "Month", format: "MMMM yyyy" },
        ];

        dp.bubble = new DayPilot.Bubble();

        dp.treeEnabled = true;
        dp.resources = [
                     {
                         name: "Release Plans", id: "G1", hidden: true, expanded: false, eventHeight: 60, minHeight: 60, marginTop: 15, marginBottom: 100, visible: false

                     }
        ];

        dp.heightSpec = "Max";
        dp.height = 1200;
        //dp.heightSpec = "Parent600Pct";
        dp.cellDuration = 10;
        dp.cellWidth = 10;
        dp.rowHeader = false;
        dp.rowHeaderHideIconEnabled = true;
        dp.eventDoubleClickHandling = "Enabled";
        dp.autoScroll = "Always";

        //dp.scrollTo("2015-11-11");
        //dp.scrollTo(new DayPilot.Date(new Date(2015, 11, 6), true));
        //dp.onIncludeTimeCell = function (args) {
        //    if (args.cell.start.getDay() % 15 === 0) { // hide Sundays
        //        //args.cell.visible = false;
        //    } else {
        //        args.cell.visible = false;
        //    }
        //};


        for (var i = 0; i < 12; i++) {

            var e = new DayPilot.Event({
                start: i % 2 === 0 ? new DayPilot.Date(new Date(2015, i, 6), true) : new DayPilot.Date(new Date(2015, i, 5), true),
                end: i % 2 === 0 ? new DayPilot.Date(new Date(2015, i, 16), true) : new DayPilot.Date(new Date(2015, i, 10), true),
                id: DayPilot.guid(),
                resource: "G1",
                text: "Release_2015_No: " + (i + 1),
                backColor: i % 2 === 0 ? "#cccccc" : "Yellow"
            });
            dp.events.add(e);
            dp.separators.push({ color: "Red", location: new DayPilot.Date(new Date(2015, i, 1), true), layer: "BelowEvents" });
            dp.separators.push({ color: "Red", location: new DayPilot.Date(new Date(2015, i, 15), true), layer: "BelowEvents" });
            //dp.separators.push({ color: "Red", location: new DayPilot.Date(new Date(2015, i + 1, 0), true), layer: "BelowEvents" });
        };
        dp.eventMovingStartEndEnabled = true;
        dp.eventResizingStartEndEnabled = true;
        dp.timeRangeSelectingStartEndEnabled = false;

        dp.onBeforeEventRender = function (args) {
            //args.e.bubbleHtml = "<div><b>" + args.e.text + "</b></div><div>Start: " + new DayPilot.Date(args.e.start).toString("M/d/yyyy") + "</div><div>End: " + new DayPilot.Date(args.e.end).toString("M/d/yyyy") + "</div>";
        };
        
        dp.onBeforeResHeaderRender = function (args) {

        };
        dp.onBeforeTimeHeaderRender = function (args) {
            //args.header.html = "<a href=''><< </>" + args.header.html + "<a href=''> >></>";
            //args.header.html = "tests";
        };

        dp.onBeforeRowHeaderRender = function (args) {
            //if (args.row.html === 6) {
            //    args.header.html = "Teset";
            //}
        };

        dp.onBeforeCellRender = function (args) {
        };

        // event moving
        dp.onEventMoved = function (args) {
            //dp.message("Moved: " + args.e.text());
        };

        dp.onEventClicked = function (args) {
            //new DayPilot.Bubble().showHtml("Event details: " + args.e.text(), args.div);
        };
        dp.onEventDoubleClick = function (args) {
            //$("#startDatePicker").datepicker('setDate', new Date(args.e.data.start.value));
            //$("#endDatePicker").datepicker('setDate', new Date(args.e.data.end.value));
            //$("#eventName").val(args.e.data.text);
            //$("#dialog").dialog("open");
        };

        dp.onEventMoving = function (args) {
            // don't allow moving from A to B
            if (args.e.resource() === "A" && args.resource === "B") {
                args.left.enabled = false;
                args.right.html = "You can't move an event from resource A to B";

                args.allowed = false;
            }
        };

        /*
        dp.onEventMoving = function(args) {

            if (args.end > dp.visibleEnd()) {
                args.left.enabled = true;
                args.left.html = "You can't drag the event out of the visible range";
                args.right.enabled = true;
                args.allowed = false;
            }

            if (args.start < dp.visibleStart()) {
                args.right.enabled = true;
                args.right.html = "You can't drag the event out of the visible range";
                args.left.enabled = true;
                args.allowed = false;
            }
        };
        */

        /*
        dp.onEventResizing = function(args) {
            if (args.duration.totalDays() > 4) {
                args.right.enabled = true;
                args.right.html = "You can only book up to 4 days";
                args.allowed = false;
            }
        };
        */

        dp.onEventResize = function (args) {
        };
        // event resizing
        dp.onEventResized = function (args) {
            //dp.message("Resized: " + args.e.text());
        };
        // event creating
        dp.onTimeRangeSelected = function (args) {
            dp.clearSelection();
            //$("#dialog").dialog("open");
            //var name = prompt("New event name:", "Release_2015");
        };
        dp.treePreventParentUsage = true;

        dp.init();

        dp.scrollTo(new DayPilot.Date());
    });

    function incrmntYear() {
        var crrntDate = new Date(dp.startDate.value);
        crrntDate.setFullYear(crrntDate.getFullYear() + 1);
        if (crrntDate.getYear() % 4 === 0) {
            dp.days = 366;
        }
        else {
            dp.days = 365;
        }
        dp.startDate = crrntDate;//new Date(crrntDate.getFullYear(), 0, 0);
        //dp.startDate = "2018/01/01";
        dp.update();
    }

    function decrmntYear() {
        var crrntDate = new Date(dp.startDate.value);
        crrntDate.setFullYear(crrntDate.getFullYear() - 1);
        if (crrntDate.getYear() % 4 === 0) {
            dp.days = 366;
        }
        else {
            dp.days = 365;
        }
        dp.startDate = crrntDate;//new Date(crrntDate.getFullYear(), 0, 0);
        //dp.startDate = "2017-01-01";
        dp.update();
    }
</script>