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

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

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

...

如有疑问请留言或者到本站社区交流讨论，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！