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?

Answer 1

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