1

I am trying to get fullcalendar to load using the C# MVC framework. I've added these lines to my _Layout.cshtml in the 'Shared' folder

@Styles.Render("~/Public/fullcalendar/fullcalendar.css")

@Scripts.Render("~/Public/fullcalendar/lib/jquery.min.js")
@Scripts.Render("~/Public/fullcalendar/lib/moment.min.js")
@Scripts.Render("~/Public/fullcalendar/fullcalendar.js")

and I've added this to the head section of an Index.cshtml for the view I want to show the calendar

<script type="text/javascript">
        $(document).ready(function () {
            $('#calendar').fullCalendar({
            });
        });
</script>

Just for giggles I replaced the $('#calendar'... bit with and alert("test") and it popped up just fine.

In the chrome console it gives me this error

Uncaught TypeError: undefined is not a function Index:57
(anonymous function) Index:57
j                                    jquery.min.js:2
k.fireWith                           jquery.min.js:2
n.extend.ready                       jquery.min.js:2
I                                    jquery.min.js:2

And this is on line 57 on Index

error

So for some reason I think fullcalendar isn't initializing or getting loaded? I'm not really sure since its my first time using web languages like this. Does anyone have suggestions or know how to fix this issue? Any help would be appreciated.

EDIT I have also tried going to the URL in the generated html to make sure the files were web accessible and all of the .js and .css files in _Layout.cshtml loaded

Andrew
  • 577
  • 7
  • 20
  • 1
    can you reproduce on [jsfiddle](http://jsfiddle.net/)? – tocallaghan Jul 15 '14 at 04:37
  • I wasn't able to get it to work in jsfiddle, but I did stumble across the solution while trying to make it work there. So thank you for that. I'll post the answer down below. – Andrew Jul 16 '14 at 03:55

2 Answers2

3

I was confused as to the use of @Script.Render("...") and was using it incorrectly. I was able to get it to work by having the @Script.Render("...") parts in the body right before RenderSection() gets called inside of _Layout.cshtml. Then in the head section on the page I was trying to use the calendar on I also had to add this:

<link rel='stylesheet' href='~/Public/fullcalendar/fullcalendar.css' />
<script src='~/Public/fullcalendar/lib/jquery.min.js'></script>
<script src='~/Public/fullcalendar/lib/moment.min.js'></script>
<script src='~/Public/fullcalendar/fullcalendar.js'></script>

I think part of my problem stemmed from not doing web development stuff before but I hope this helps someone else along the way.

Andrew
  • 577
  • 7
  • 20
  • I would give a 100 up-votes If I could. But Still I cannot figure out how it works only by moving the code from head section to body section? – Rajshekar Reddy Dec 01 '14 at 08:33
0

You probably have conflicts with bundles in _Layout.cshtml on the bottom of the page: 

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

You can try to add fullcalendar scripts to this bundle or remove bundle or do something else

Orest
  • 1