@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
@section PageContent{
<style> .modal-backdrop {
z-index: 9;
}
</style> <div class="container"> <div id='calendar'> </div> </div> <!--Select Staff--> <div class="container"> <!-- Trigger the modal with a button --> <button type="button" id="btnSelectStaff" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal" style="display: none"></button> <!-- Modal --> <div class="modal fade" id="myModal" role="dialog" style="z-index: 10"> <div class="modal-dialog modal-lg"> <br /><br /><br /> <!-- Modal content--> <div class="modal-content"> @using (Html.BeginForm("AssignTask", "PMPlan", FormMethod.Post, new {
@class="form-horizontal", role="form"}
)) {
<div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Create PM Task</h4> </div> <div class="modal-body"> <div class="row"> <label class="col-md-2 control-label">your field1</label> <div class="col-md-4"> field1 </div> <label class="col-md-2 control-label">field2</label> <div class="col-md-4"> <div class="input-icon left"> field2 </div> </div> </div> <br/> <div class="row"> ... more rows of fields </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="submit" class="btn btn-primary">Submit</button> </div> }
</div> </div> </div> </div> }
@section scripts{
<link href="~/assets3/global/plugins/fullcalendar/fullcalendar.css" rel="external nofollow" rel="stylesheet" /> <script src="~/assets3/global/plugins/fullcalendar/fullcalendar.js"></script> <script> $.get("JsonURL", function (data) {
console.log(JSON.stringify(data));
$('#calendar').fullCalendar({
header: {
left: 'prev,next today', center: 'title', right: 'month,basicWeek,basicDay' }
, navLinks: false, // can click day/week names to navigate views editable: false, eventLimit: false, // allow "more" link when too many events events: data, dayClick: function () {
var dt = $(this).attr("data-date");
$("#hdnAssignedDate").val(dt);
//// pop up modal $("#btnSelectStaff").click();
}
}
);
}
);
</script> }

... public ActionResult GetJsonData() {
... var tasks = //...logic of getting tasks ... var jsonObjs = tasks.Select(x => new FullCalendaRecord() {
title = x.Subject, url = "the url", start = ..., end = x.TargetDate.Value.ToString("yyyy-MM-dd"), }
).ToList();
return Json(jsonObjs, JsonRequestBehavior.AllowGet);
}
public class FullCalendaRecord {
// sample data: //[ //{
// title: 'Click for Google', // url: 'http://google.com/', // start: '2017-09-28', // end:'2017-09-28' //}
//] public string title {
get;
set;
}
public string url {
get;
set;
}
public string start {
get;
set;
}
public string end {
get;
set;
}
}
...