如何從ASP.NET MVC中的JSON在FullCalendar中呈現事件？

Question

我已經能夠將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>

指數：

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

}

CalendarEventsViewModel：

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

Answer 1

我認為您犯了與初次設置時相同的錯誤，您正在查看的示例僅適用於FullCalendar的版本1。 在第二版中，它不是您的LoadEvents操作收到的Unix時間戳。

如果您刪除ConvertFromUnixTimestamp方法並將開始和結束參數從double更改為DateTime，這是傳遞給操作的時刻對象，我認為它將開始起作用。

如果您在不做任何更改的情況下中斷LoadEvents動作，我非常有信心它甚至不會被調用。

您的屬性名稱應與事件對象的屬性名稱匹配，否則它將像對待非標准字段一樣對待它們。

如何從ASP.NET MVC中的JSON在FullCalendar中呈現事件？

問題描述

1 個解決方案

解決方案1
2 已采納 2016-07-31 17:15:20

如何從ASP.NET MVC中的JSON在FullCalendar中呈現事件？

問題描述

1 個解決方案

解決方案1 2 已采納 2016-07-31 17:15:20

解決方案1
2 已采納 2016-07-31 17:15:20