如何實現基於id的FullCalendar視圖？

Question

我正在構建一個跟蹤員工使用假期的MVC項目。我有網格，將顯示基於「employeeID」的假期。我希望能夠一次爲單個員工使用FullCalendar顯示這些日期。目前我可以顯示全部員工或沒有人員。我對此很新，希望得到進一步的指導。 到目前爲止我的代碼.... 員工型號

`public class Employee 
{ 
    public int EmployeeID { get; set; } 
    [Required(ErrorMessage = "Last name is required.")] 
    [Display(Name = "Last Name")] 
    [MaxLength(50)] 
    public string LastName { get; set; } 
    [Display(Name = "First Name Middle Initial")] 
    [MaxLength(50, ErrorMessage = "First name cannot be longer than 50 characters.")] 
    public string FirstMidName { get; set; } 
    public string FullName 
    { 
     get 
     { 
      return FirstMidName + " " + LastName; 
     } 
    } 
    public virtual ICollection<Vacation> Vacation { get; set; } 
}` 

型休假

` public class Vacation 
    { 

     public int VacationID { get; set; } 
     public int EmployeeID { get; set; } 
     public int VacationCodeID { get; set; } 
     [DataType(DataType.Date)] 
     public DateTime EventDate { get; set; } 
     public int Hours { get; set; } 
     public string Notes { get; set; } 

     public virtual Employee Employee { get; set; } 
     public virtual VacationCode VacationCode { get; set; } 
    }` 

VacationController

// 
    // GET: /Vacation/ 
    public ActionResult Index([Bind(Prefix = "id")]int employeeId) 
    { 
     var Employee = db.Employees.Find(employeeId); 
     if (Employee != null) 
     { 
      return View(Employee); 
     } 
     return HttpNotFound(); 
    } 

public ActionResult Calendar() 
    { 

     return View(); 
    } 

    [HttpPost] 
    public ActionResult List(long start, long end) 
    { 
     var epoch = new DateTime(1970, 1, 1); 
     var startDate = epoch.AddMilliseconds(start); 
     var endDate = epoch.AddMilliseconds(end); 

     var ctx = new FullCalendarTestContext(); 
     var data = ctx.Vacations 
     .Where(i => startDate <= i.EventDate && i.EventDate <= endDate) 
     .GroupBy(i => i.EventDate) 
     .Select(i => new { EventDate = i.Key, VacationCodeID = i.FirstOrDefault() }).Take(20).ToList(); 

     return Json(data.Select(i => new 
     { 
      title = (i.VacationCodeID.VacationCode.VacationType != null) ? i.VacationCodeID.VacationCode.VacationType : "Untitled", 
      start = i.EventDate.ToShortDateString(), 
      allDay = true 
     })); 
    } 

度假索引視圖：

@model FullCalendarTest.Models.Employee 

<h1>@Model.FullName</h1> 

<hr /> 

@Html.Partial("_Partial1", Model.Vacation) 

    @model IEnumerable<FullCalendarTest.Models.Vacation> 


<p> 
    @Html.ActionLink("Create New", "Create") 
</p> 
@{ 
    WebGrid grid = new WebGrid(Model, rowsPerPage: 10, canPage: true, canSort: true, defaultSort: "EventDate"); 
    grid.SortDirection = SortDirection.Descending; 
} 

@grid.GetHtml(columns: new[]{ 

grid.Column("Employee.FullName", "Name"), 
grid.Column("VacationCode.VacationType","Vacation Code"), 
grid.Column("EventDate", "Date",format: (item) => string.Format("{0:MMM-dd-yy}", item.EventDate)), 
grid.Column("Hours","Hours"), 
grid.Column("Notes","Notes"), 
grid.Column("", 
header:"Edit Options", 
format: @<text> 
    @Html.ActionLink("Edit", "Edit", new { id = item.VacationID }) 
    @Html.ActionLink("Delete", "Delete", new { id = item.VacationID }) 
</text> 
) 
}) 

日曆視圖：

@model FullCalendarTest.Models.Vacation 

@section scripts{ 
    <link href="@Url.Content("~/Content/fullcalendar.css")"rel="stylesheet" type="text/css" /> 
    <script src="@Url.Content("~/Scripts/fullcalendar.js")" type="text/javascript"></script> 
    <script> 
     $("#calendar").fullCalendar({ 
      header: { 
       left: 'prev,next today', 
       center: 'title', 
       right: 'month,agendaWeek,agendaDay' 
      }, 
      editable: true, 
      eventClick: function (i, evt, view) { 
      }, 
           events: function (start, end, callback) { 
       $.ajax({ 
        type: "post", 
        url: '@Url.Action("List", "Vacation")?start=' + start.getTime().toString() + "&end=" + end.getTime().toString(), 
        success: function (d) { 
         var list = []; 
         for (var i = 0, len = d.length; i < len; i++) { 
          var item = d[i]; 
          item.start = new Date(item.start); 
          list.push(item); 
         } 

         callback(list); 
        }, 
        error: function (e) { 
         debugger; 
        } 
       }); 
      } 
     }); 
    </script> 
} 
<h2>Calendar</h2> 
<div id='calendar' style="width: 75%"></div> 

Answer 1

的一種方法是：

• 控制器側增加額外的employeeId，並在查詢中使用它，東西沿線：

  .Where(i => i.employeeId == employeeId && startDate <= ... 
  

• 在javascript端添加參數到請求：

  events: function(...){ 
      // Get the expected employeeId from some source : 
      // an html node, a specific attribute, a javascript variable ... 
      // For example, if the "displayed employee" is chosen from a select : 
      var employeeId = $('#selectEmployee').val(); 
      $.ajac({ 
       url: '@Action...?employeeId='+employeeId+'&start='+... 
  
      }) 
  }