Fullcalendar JQuery plugin not appearing MVC 4

Question

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

Is it hitting your action method? How are you populating your events in the database? — Ally Murray, Aug 23 '16 at 10:27
have you loaded the style bundle containing the CSS? you've defined it, but I can't see where you've actually loaded it into the page — ADyson, Aug 23 '16 at 10:34
@AllyMurray Its hitting the action method, but blank. I have downloaded the sample project and the action method only says return View(); so its what i have — dasdasd, Aug 23 '16 at 11:28
The action method in the EventController returns the events from the DbContext. It can only do this if you have actually stored some events. Can you post the code where you are adding the events? As @ADyson said, which view are you rendering the scripts and css in? I can see you are rendering JQuery but nothing else. — Ally Murray, Aug 23 '16 at 11:49
I may have misunderstood when you said it doesn't show anything, I thought you meant there were no events displaying. I have just realised you may have meant the entire calendar isn't displayed, is this the case? — Ally Murray, Aug 23 '16 at 11:51
@dasdasd "in the content paste". Not sure what you mean by this. have you got `@Styles.Render("~/Content/fullcalendar")` in your view (or in your _Layout view) as per the tutorial? If not, it might mess up the display of the calendar — ADyson, Aug 23 '16 at 12:02
@ADyson and AllyMurray The problem was that the `@Styles.Render("~/Content/fullcalendar")` was not in the right place in the _Layout view. Thanks for your answers — dasdasd, Aug 23 '16 at 15:09

score 2 · Answer 1 · answered Aug 23 '16 at 22:38

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>

score 1 · Accepted Answer · answered Aug 23 '16 at 22:24

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.

answered Aug 23 '16 at 22:24

ADyson

57,178
14
51
63

Fullcalendar JQuery plugin not appearing MVC 4

2 Answers2

Linked