Asp.net MVC scheduler实现

本例使用了fullcalendar js ： https://fullcalendar.io/

1. view ：

@{
    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="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>
}

2. Web api controller :

...


  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; }
        }


...