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

asp.net mvc scheduler的实现方法详解

本例使用了fullcalendar js ：

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

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