|
这篇文章主要介绍了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; }
}
...
如有疑问请留言或者到本站社区交流讨论，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！ | 
发表于 2017-10-25 09:30:06
