如何实现基于id的FullCalendar视图

Question

我正在构建一个跟踪员工休假天数的MVC项目。我有web网格，将显示休假日采取基于"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='+...
      })
  }