Asp.net MVC scheduler的实现方法详解
本例使用了fullcalendar js ： https://fullcalendar.io/
1. view ：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
|
@{
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 :
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
|
...
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; }
}
...
|
如有疑问请留言或者到本站社区交流讨论，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
原文链接：http://blog.csdn.net/lan_liang/article/details/78276193