Fullcalendar JQuery plugin not appearing MVC 4

问题

I followed this tutorial to make the fullcalendar in my project: http://studyoverflow.com/asp-mvc/event-calendar-using-jquery-fullcalendar-in-asp-net-mvc/

The only difference is that i already have a project and i added the Events db to my context. This is my view:

<div id="fullcalendar"></div>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")

    <script type="text/javascript">
        $(function () {
            $('#fullcalendar').fullCalendar({
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,basicWeek,basicDay'
                },
                defaultDate: new Date(),
                events: "/api/event/"
            });
        });
    </script>
}

And the controller:

 public class EventController : ApiController
    {

        private SGPContext db = new SGPContext();

        // GET api/event
        public IQueryable GetEvents()
        {
            return db.Events;
        }

        protected override void Dispose(bool disposing)
        {
            if (disposing)
            {
                db.Dispose();
            }
            base.Dispose(disposing);
        }

    }
}

I also added this to my BundleConfig.cs file:

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                          "~/Scripts/jquery-{version}.js"));

//jQuery fullcalendar plugin css
bundles.Add(new StyleBundle("~/Content/fullcalendar").Include(
                          "~/Content/fullcalendar.css"));

//jQuery fullcalendar plugin js
bundles.Add(new ScriptBundle("~/bundles/fullcalendar").Include(
                          "~/Scripts/moment.js",  //Include the moment.js
                          "~/Scripts/fullcalendar.js"));

And of course downloaded the Jquery.Fullcalendar in NuGet. I think i followed all the steps but it doesn't show anything... What can be missing? Thanls

回答1:

As per the comments, the correct answer is to include

@Styles.Render("~/Content/fullcalendar")

in either the view in question or the _Layout view. This will ensure the calendar is displayed properly. This was missed from the code given in the demo.

回答2:

The following will work. Pay attention to my comments.

Here is the BundleConfig:

public class BundleConfig
{
    //not only add nuget package fullcalendar, but nuget moment

    // For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725
    public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-{version}.js"));

        //jQuery fullcalendar plugin css
        bundles.Add(new StyleBundle("~/Content/fullcalendar").Include(
                                  "~/Content/fullcalendar.css"));

        //jQuery fullcalendar plugin js
        bundles.Add(new ScriptBundle("~/bundles/fullcalendar").Include(
                                  "~/Scripts/moment.js",  //Include the moment.js
                                  "~/Scripts/fullcalendar.js"));

Here is the controller:

public class HomeController : Controller
{
    //
    // GET: /Home/

    public ActionResult Index()
    {
        return View();
    }

}

Here is the view for index:

@{
    ViewBag.Title = "Index";
}
<script type="text/javascript">
    $(function () {
        $('#fullcalendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,basicWeek,basicDay'
            },
            defaultDate: new Date(),
            events: "/api/event/"
        });
    });
</script>
<h2>Index</h2>
<div id="fullcalendar"></div>

Here the event model:

namespace MVCFullCalendarDemo.Models
{
    public class Event
    {
        public int id { get; set; }
        public string title { get; set; }
        public DateTime start { get; set; }
        public DateTime end { get; set; }
    }

    public class EventContext : DbContext
    {
        public DbSet<Event> Events { get; set; }
    }
}

Here is the controller for webapi:

public class Event : ApiController
{
    private EventContext db = new EventContext();

    // GET api/Event
    public IQueryable GetEvents()
    {
        return db.Events;
    }

    protected override void Dispose(bool disposing)
    {
        if (disposing)
        {
            db.Dispose();
        }
        base.Dispose(disposing);
    }

}

Here is layout.cshtml

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    @*the next line should be here, not in the body*@
    @Scripts.Render("~/bundles/jquery")
</head>
<body>
    @RenderBody()


    @Styles.Render("~/Content/fullcalendar")
    @Scripts.Render("~/bundles/fullcalendar")
    @RenderSection("scripts", required: false)
</body>
</html>

来源：https://stackoverflow.com/questions/39098322/fullcalendar-jquery-plugin-not-appearing-mvc-4