Fatal编程技术网
  • javascript/
  • Javascript 如何在ASP.NET MVC中从JSON在FullCalendar中呈现事件？

Javascript 如何在ASP.NET MVC中从JSON在FullCalendar中呈现事件？

javascript json asp.net-mvc fullcalendar

Javascript 如何在ASP.NET MVC中从JSON在FullCalendar中呈现事件？,javascript,json,asp.net-mvc,fullcalendar,Javascript,Json,Asp.net Mvc,Fullcalendar,我已经能够将FullCalendar加载到我的网页中，但我似乎无法成功地将测试JSON数据传递到日历并使其呈现事件。我不确定我做错了什么 我遵循这一点，我甚至下载了他们的源代码，并能够在我的开发环境中成功运行它。我的代码似乎几乎完全反映了他们的行为，但我仍然无法呈现事件。我甚至回去将javascript文件添加到我的包中，以防万一这是个问题，但没有成功 有什么想法吗 捆绑包： public class BundleConfig { // For more information on b

我已经能够将FullCalendar加载到我的网页中，但我似乎无法成功地将测试JSON数据传递到日历并使其呈现事件。我不确定我做错了什么

我遵循这一点，我甚至下载了他们的源代码，并能够在我的开发环境中成功运行它。我的代码似乎几乎完全反映了他们的行为，但我仍然无法呈现事件。我甚至回去将javascript文件添加到我的包中，以防万一这是个问题，但没有成功

有什么想法吗

捆绑包：

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>&copy; @DateTime.Now.Year - Time Zone Event Calendar</p>
        </footer>
    </div>


    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>
我认为您犯了与我第一次设置时相同的错误，您正在查看的示例仅适用于FullCalendar版本1。在版本2中，LoadEvents操作接收的不是unix时间戳

这是一个传递给动作的矩对象，如果您删除ConvertFromUnixtTimeStamp方法并将开始和结束参数从double更改为DateTime，我认为它将开始工作

如果您在不做任何更改的情况下中断LoadEvents操作，我很有信心它甚至不会被调用

您的属性名应该与的属性名匹配，否则会将它们视为非标准字段。

您使用的是哪个版本的fullcalendar？我甚至没有注意到库的版本。我做出了改变，但似乎什么也没发生。我检查了动作，javascript调用了它，但它仍然没有显示事件。当你检查页面时，jQuery和矩脚本是否在FullCalendar脚本之前加载？我认为事件对象上的属性名称应该与你传递给它的JSON提要的实际事件对象相匹配，它会将当前属性视为非标准字段。更新它以匹配它们，您可能会获得更大的成功。是的：
--剑道脚本太多，无法在此列出--
您是对的，我需要将我的属性更改为它期望的属性。我不知道为什么我认为它会知道我在传递什么。非常感谢。 
@{
    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>

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);
    }

}

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; }
}