I solved it by using by small tech.
<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 DayPilot.Date(dp.startDate.value).addYears(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 DayPilot.Date(dp.startDate.value).addYears(-1);
if (crrntDate.getYear() % 4 === 0) {
alert('leap' + crrntDate.getYear());
dp.days = 366;
}
else {
dp.days = 365;
}
dp.startDate = crrntDate;//new Date(crrntDate.getFullYear(), 0, 0);
//dp.startDate = "2017-01-01";
dp.update();
}
</script>