Adding fullCalendar through nuget

Question

I've added the fullCalendar through nuget and attempted to link the class in my project.

In bundleconfig:

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

    bundles.Add(new StyleBundle("~/Content/fullcalendarcss").Include(
                "~/Content/themes/jquery.ui.all.css",
                "~/Content/fullcalendar.css"));

    //Calendar Script file

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

    // Set EnableOptimizations to false for debugging. For more information,
    // visit http://go.microsoft.com/fwlink/?LinkId=301862
    BundleTable.EnableOptimizations = true;
}

_layout:

@Styles.Render("~/Content/css")
@Styles.Render("~/Content/fullcalendarcss")
@Scripts.Render("~/bundles/fullcalendarjs")
@Scripts.Render("~/bundles/modernizr")

View:

@section scripts
{
<script type="text/javascript">

    $(document).ready(function () {
        $('#calendar').fullCalendar({
            header: {
                left: 'prev,next,today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            defaultView: 'month',
            editable: true,
            allDaySlot: false,
            selectable: true,
            slotMinutes: 15

        });
    })

</script>
}

When I run this I get the error message "Object doesn't support property or method 'fullCalendar'.

Why doesn't the calendar show?

can't load jQuery plugins before you load jQuery library, order is important since plugins extend the jQuery object itself — charlietfl, Oct 11 '14 at 13:34
I just added in the full bundle config. I'm not sure exactly what you mean on that? Where do I need to make the adjustment? — Zonus, Oct 11 '14 at 13:38

score 2 · Accepted Answer · answered Oct 11 '14 at 14:32

In your _Layout.cshtml you should make sure your call to ~/bundles/fullcalendarjs runs after jquery's call ~/bundles/jquery.

Localize where this call appears and place the ~/bundles/fullcalendarjs right after. The fullcalendarcss can stay where you wrote it. It doesn't depend on jquery.js.

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/fullcalendarjs")

In your view also you need to define the div with the id 'calendar' where you want to see it.

For example:

<div id="calendar">

</div>
@section scripts
{
    <script type="text/javascript">

    $(document).ready(function () {
        $('#calendar').fullCalendar({
            header: {
                left: 'prev,next,today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            defaultView: 'month',
            editable: true,
            allDaySlot: false,
            selectable: true,
            slotMinutes: 15

        });
    })

    </script>
}

I moved the @Scripts.Render("~/bundles/fullcalendarjs") to the index.cshtml file and I do have this in the index.cshtml as well: div id='calendar' style="width:65%"> I still have the same error message. I assume that the jquery will run before it hits the index.cshtml...? — Zonus, Oct 11 '14 at 21:26
Nevermind, the entity 5 framework added the jquery at the end of the _layout.cshtml file. I moved it to the top and it started working. Thanks blacai! — Zonus, Oct 11 '14 at 21:28

score 0 · Answer 2 · answered May 04 '22 at 08:29

This is a good reference for what has been asked here. I downloaded jQuery directly and unarchived it into the wwwroot/lib folder/directory to get going with my project - however as I needed more JS libraries, it seemed that the Nuget option of installing JS libraries into my project really was an impossible path/option.

Consider;

not sure why you would use nuget packages for javascript libraries. your example has not been updated in the last four years, and probably doesn't support .net core projects (may not even work a current version of jQuery). you should be using a javascript repository and package mangers like bower or npm, that manages the dependencies between libraries.

That is from the linked MS Forum.

Adding fullCalendar through nuget

2 Answers2

Linked