Implementing FullCalendar (JQuery plugin) in Module

Topics: Customizing Orchard, Writing modules
Apr 10, 2012 at 4:18 AM
Edited Apr 12, 2012 at 2:19 AM

I have created my own module within Orchard and am trying to include a jquery plugin called FullCalendar for a calendar solution.  I followed the directions on their website (http://arshaw.com/fullcalendar/docs/usage/), which basically says to include the references to the necessary scripts - fullcalendar.css and fullcalendar.js - and then add a div with an id of 'calendar' and a jquery call to load up the Calendar - ('#calendar').fullCalendar.  When I do this, start up Orchard and then navigate to /OrchardLocal/Calendar (which routes to my razor page) it throws an Object reference error.

    <link rel='stylesheet' type='text/css' href='/lib/fullcalendar-1.5.3/fullcalendar/fullcalendar.css' />
    <script type='text/javascript' src='/lib/fullcalendar-1.5.3/fullcalendar/fullcalendar.js'></script>
    <script type="text/javascript">
        $(document).ready(function () {

            $('#calendar').fullCalendar({
                // put your options and callbacks here
            })

        });    
    </script>
    <div id='calendar'></div>

Update:
I also just tried this, which seems to put my scripts in the right place in the page, but still getting the same error.
@using (Script.Head())
{ 
    <link rel='stylesheet' type='text/css' href='/OrchardLocal/Modules/Calendar/lib/fullcalendar-1.5.3/fullcalendar/fullcalendar.css' />
    <script type='text/javascript' src='/OrchardLocal/Modules/Calendar/lib/fullcalendar-1.5.3/fullcalendar/fullcalendar.js'></script>    
}
     
@using (Script.Foot())
{
    <script type="text/javascript">
        $(document).ready(function () {

            $('#calendar').fullCalendar({
                // put your options and callbacks here
            })

        });    
    </script>
}

<div id='calendar'>CALENDAR</div>

Coordinator
Apr 11, 2012 at 11:37 PM

Not enough details here.

Apr 12, 2012 at 2:21 AM

I added some more details to clarify the context - does that help?  If not what other information are you looking for?  I will try to use a different jquery plugin (when I get back to a place where I can write code) and see if possibly it's an issue in the plugin itself.  Have others had issues implementing jQuery plugins in Orchard modules?

Coordinator
Apr 12, 2012 at 4:40 AM

*Where* is the error is at least as important to know as what error it is.

jQuery plug-ins work just fine in Orchard, there are no differences.

Developer
Apr 12, 2012 at 9:57 AM

In any case /OrchardLocal won't work everywhere.

1) Test if you can access your .js file url.

Did you add a web.config in /lib to allow static files to be accessed ? 

2) The good way is to put scripts in /Scripts and styles in /Styles () with a good web.config.

3) Create a ResourceManifest.cs (see Orchard.jQuery for example) to add scripts and styles resource keys :

manifest.DefineScript("fullcalendar").SetUrl("fullcalendar.js").SetDependencies("jQuery").SetVersion("1.5.3");

manifest.DefineStyle("fullcalendar").SetUrl("fullcalendar.css").SetVersion("1.5.3");

4) Then use Script.Require('fullcalendar') and Style.Require('fullcalendar') in your Views :

Script.Require('fullcalendar').AtHead();

Style.Require('fullcalendar').AtHead();

Apr 14, 2012 at 4:41 AM

I got it - thanks for the pointers agriffard!  Changed my urls to the following.  My module is named ABC.Calendar, but I have a custom route to Calendar instead - so in the manifest i used the module name instead of the route.

 

            manifest.DefineScript("fullcalendar").SetUrl("~/Modules/ABC.Calendar/Scripts/fullcalendar/fullcalendar.js").SetDependencies("jQuery").SetVersion("1.5.3");
            manifest.DefineStyle("fullcalendar").SetUrl("~/Modules/ABC.Calendar/Styles/fullcalendar/fullcalendar.css").SetVersion("1.5.3");