Leap Year Issue

Please check the code, I forgot to add screen shot.

When changing the StartDate and Days properties you can use DayPilot.Web.Mvc.Utils.Year.Days() method to get the number of days for the given year. Example for switching to the following year:

StartDate = StartDate.AddYears(1);
Days = Year.Days(StartDate);

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>