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; } } ...
如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
4月11日20:30~22:00通过腾讯会议进行了第二次在线学习讨论我把学习笔记整理一下...
DELETEFROMTablesWHEREIDNOTIN(SELECTMin(ID)FROMTablesGROUPBYName) Min的话保...
本文实例讲述了Laravel框架源码解析之反射的使用。分享给大家供大家参考,具体如...
复制代码 代码如下: % URL="http://news.163.com/special/00011K6L/rss_newstop....
项目中用到的一些特殊字符和图标 html代码 XML/HTML Code 复制内容到剪贴板 div ...
Elasticsearch 是通过 Lucene 的倒排索引技术实现比关系型数据库更快的过滤。特...
正则忽略大小写 – RegexOptions.IgnoreCase 例如: 复制代码 代码如下: Str = R...
工具:Eclipse,Oracle,smartupload.jar;语言:jsp,Java;数据存储:Oracle。...
上篇文章给大家介绍了 Java正则表达式匹配,替换,查找,切割的方法 ,接下来,...
错误描述: 在开发.net项目中,通过microsoft.ACE.oledb读取excel文件信息时,报...