我已经能够在我的网页中加载 FullCalendar，但我似乎无法将我的测试 JSON 数据成功传递到日历并让它呈现事件。我不确定我做错了什么。
我正在关注这个 website's example我什至下载了他们的源代码并能够在我的开发环境中成功运行它。我的代码似乎几乎完全反射(reflect)了他们的代码，但我仍然无法呈现事件。我什至回去将 javascript 文件添加到我的包中以防出现问题但没有成功。
有什么想法吗？
bundle :
public class BundleConfig
{
// For more information on bundling, visit http://go.microsoft.com/fwlink/?LinkId=301862
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.validate*"));
// Use the development version of Modernizr to develop with and learn from. Then, when you're
// ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js",
"~/Scripts/respond.js"));
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/site.css",
"~/Content/themes/base/jquery.ui.all.css",
"~/Content/fullcalendar.css"));
/*Kendo UI Instructions that were followed
* http://docs.telerik.com/kendo-ui/aspnet-mvc/asp-net-mvc-5
*/
bundles.Add(new ScriptBundle("~/bundles/kendo").Include(
"~/Scripts/kendo/2016.2.714/kendo.webcomponents.min.js",
// "~/Scripts/kendo/kendo.timezones.min.js", // uncomment if using the Scheduler
"~/Scripts/kendo/2016.2.714/kendo.aspnetmvc.min.js",
"~/Scripts/kendo/2016.2.714/jquery.min.js",
"~/Scripts/kendo/2016.2.714/kendo.ui.core.min.js",
"~/Scripts/kendo/2016.2.714/kendo.calendar.min.js",
"~/Scripts/kendo/2016.2.714/kendo.popup.min.js",
"~/Scripts/kendo/2016.2.714/kendo.datepicker.min.js"));
bundles.Add(new StyleBundle("~/Content/kendo/css").Include(
"~/Content/kendo/2016.2.714/kendo.common-bootstrap.min.css",
"~/Content/kendo/2016.2.714/kendo.bootstrap.min.css",
"~/Content/kendo/2016.2.714/kendo.common.min.css",
"~/Content/kendo/2016.2.714/kendo.defualt.min.css"));
bundles.Add(new ScriptBundle("~/bundles/fullcalendar").Include(
"~/Scripts/jquery-ui-1.12.0.min.js",
"~/Scripts/moment.min.js",
"~/Scripts/fullcalendar.min.js"));
bundles.IgnoreList.Clear();
}
_布局:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Time Zone Event Calendar</title>
@Styles.Render("~/Content/kendo/css")
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/kendo")
@Scripts.Render("~/bundles/fullcalendar")
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
@Html.ActionLink("Time Zone Event Calendar", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p>© @DateTime.Now.Year - Time Zone Event Calendar</p>
</footer>
</div>
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
</body>
</html>
索引:
@{
ViewBag.Title = "Home Page";
}
<head>
@section scripts{
<script type="text/javascript">
$(document).ready(function ()
{
$('#calendar').fullCalendar(
{
header:
{
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: false,
events: "/home/loadevents/"
})
});
</script>
<script type="text/javascript">
$(document).ready(function () {
$("#pickDateTime").kendoDateTimePicker({
culture: "es-Es",
interval: 1,
format: "yyyy/MM/dd hh:mm tt",
parseFormats: ["MMMM yyyy", "HH:mm"]
});
});
</script>
}
</head>
<body>
<div id="headerBar">
<div id="datepicker">
<form method="post">
<input id="pickDateTime" name="DateTimePicker" />
<input type="submit" value="Add" />
</form>
</div>
</div>
<div id="calendar"></div>
</body>
家庭 Controller :
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
public ActionResult About()
{
ViewBag.Message = "Your application description page.";
return View();
}
public ActionResult Contact()
{
ViewBag.Message = "Your contact page.";
return View();
}
public ActionResult LoadEvents (double start, double end)
{
var fromDate = ConvertFromUnixTimestamp(start);
var toDate = ConvertFromUnixTimestamp(end);
var eventList = GetEvents();
var rows = eventList.ToArray();
return Json(rows, JsonRequestBehavior.AllowGet);
}
private List<CalendarEventsViewModel> GetEvents()
{
List<CalendarEventsViewModel> eventList = new List<CalendarEventsViewModel>();
CalendarEventsViewModel newEvent = new CalendarEventsViewModel
{
ID = "1",
EventName = "Event 1",
StartDateString = DateTime.Now.AddDays(1).ToString("s"),
EndDateString = DateTime.Now.AddDays(1).ToString("s"),
AllDay = false
};
eventList.Add(newEvent);
newEvent = new CalendarEventsViewModel
{
ID = "1",
EventName = "Event 3",
StartDateString = DateTime.Now.AddDays(2).ToString("s"),
EndDateString = DateTime.Now.AddDays(3).ToString("s"),
AllDay = false
};
eventList.Add(newEvent);
return eventList;
}
private static DateTime ConvertFromUnixTimestamp(double timestamp)
{
var origin = new DateTime(1970, 1, 1, 0, 0, 0, 0);
return origin.AddSeconds(timestamp);
}
}
日历事件 View 模型:
public class CalendarEventsViewModel
{
public string ID { get; set; }
public string EventName { get; set; }
public string EventText { get; set; }
public string StartDateString { get; set; }
public string EndDateString { get; set; }
public bool AllDay { get; set; }
}
最佳答案
我认为您犯了与我第一次设置时相同的错误，您正在查看的示例仅适用于 FullCalendar 的第一版。在版本 2 中，它不是您的 LoadEvents 操作收到的 unix 时间戳。
这是传递给操作的时刻对象，如果您删除 ConvertFromUnixTimestamp 方法并将开始和结束参数从 double 更改为 DateTime，我认为它会开始工作。
如果您在不做任何更改的情况下断点您的 LoadEvents 操作，我相信它甚至不会被调用。
您的属性名称应与 event object 的属性名称相匹配否则它会将它们视为非标准字段。
关于javascript - 如何在 ASP.NET MVC 中从 JSON 呈现 FullCalendar 中的事件？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38680353/