can not show event on fullcalender dynamically in asp.net mvc - asp.net-mvc

Question

I want to show a calendar event on fullcalendar dynamically. I've tried the code given below but it did not succeed:
#model List<EcommerceDbFirstApproch.Models.EventMaster>
#{
ViewBag.Title = "DashBoard";
var event_data = #Model;
}
<style type="text/css">
.mycalhedar {
background: #000;
text-align: center;
padding: 10px;
}
.mycalhedar h1 {
color: #fff;
}
</style>
<br />
<script src="~/Content/jquery-1.8.2.min.js"></script>
<script src="~/Content/jquery.mobile-1.2.0.min.js"></script>
<script src="~/Content/themes/fullcalendar.min.js"></script>
<link href="~/Content/fullcalendar.css" rel="stylesheet" />
<div data-role="page" id="index">
<div class="mycalhedar">
<h1>My Team</h1>
</div>
<!-- /header -->
<div data-role="content">
<div id='calendar' style="width: 100%;"></div>
</div>
<!-- /content -->
</div>
<!-- /page -->
<script type="text/javascript">
$(document).on('pageshow', '#index', function (e, data) {
debugger;
var myary = [];
#foreach (var h in Model)
{
#:alert("#h.EventTitle");
#:alert("#h.StartDate");
#:alert("#h.EndDate");
}
$('#calendar').fullCalendar({
ContentType: "application/json",
editable: true,
events: [{
#foreach (var h in Model)
{
title: #h.EventTitle.ToString();
start: #h.StartDate.ToString();
end: #h.EndDate.ToString();
}
}]
});
});
</script>
Please help me to solve this problem. I want to show the events dynamically on the fullcalender demo. Thanks