我要评论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; }
}
...
如有疑问请留言或者到本站社区交流讨论，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请 点击进行留言回复，万千网友为您解惑！
网友评论