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