【www.bbyears.com--ASP.NET MVC】
Asp.net MVC scheduler的实现方法详解
本例使用了fullcalendar js ： https://fullcalendar.io/
1. view ：
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
@section PageContent{
@using (Html.BeginForm("AssignTask", "PMPlan", FormMethod.Post, new { @class="form-horizontal", role="form"} ))
{
Create PM Task
field1
field2
... more rows of fields
}
}
@section scripts{
<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; }
}
...