Asp.net MVC scheduler的实现方法详解

@{ 
 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; } 
 } 
 
 
...