Solved

Visual Studio MVC with Full Calendar, No data showing in Calendar

Posted on 2013-01-17
9
1,286 Views
Last Modified: 2013-01-23
VS 2008 MVC project with Full Calendar. Calendar displays fine but no data is coming through.

In the Master page:
 <link href="../../Content/jquery-ui-1.8.7.custom.css" rel="stylesheet" type="text/css" />
    <link href="../../Content/m1.css" rel="stylesheet" type="text/css" />
   <script src="../../Scripts/jquery-1.4.4.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery.ui.core.js" type="text/javascript"></script>
    <script type="text/javascript" src="../../Scripts/jquery.ui.widget.js"></script>
    <script src="../../Scripts/jquery.ui.widget.js" type="text/javascript"></script>
    <script type="text/javascript" src="../../Scripts/jquery.effects.core.js"></script>
    <script type="text/javascript" src="../../Scripts/bannerhelp.js"></script>
    <link href="../../Content/nivo-slider.css" rel="stylesheet" type="text/css" media="all" />
    <script src="../../Scripts/jquery.nivo.slider.js" type="text/javascript"></script>

Open in new window



In the Head content:
<link href="../../Content/fullcalendar.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/fullcalendar.js" type="text/javascript"></script>
<script type="text/javascript">

    $(document).ready(function() {
        $('#calendar').fullCalendar({
            theme: true,
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,basicWeek,basicDay'
            },
            defaultView: 'month',
            editable: false,
            events: "/Calendar/CalendarData"
        });
    });
</script>

Open in new window


In the Main Content:
<div id="calendar" style ="width:500px; height:500px"></div>

Open in new window


In the Controller:
 
public ActionResult CalendarData()
        {
            List<CalendarDTO> tasksList = new List<CalendarDTO>();

            tasksList.Add(new CalendarDTO
            {
                id = 1,
                title = "Google search",
                start = ToUnixTimespan(DateTime.Now),
                end = ToUnixTimespan(DateTime.Now.AddHours(4)),
                url = "www.google.com"
            });
            tasksList.Add(new CalendarDTO
            {
                id = 2,
                title = "Bing search",
                start = ToUnixTimespan(DateTime.Now.AddDays(1)),
                end = ToUnixTimespan(DateTime.Now.AddDays(1).AddHours(4)),
                url = "www.bing.com"
            });

            return Json(tasksList);
        }

        private long ToUnixTimespan(DateTime date)
        {
            TimeSpan tspan = date.ToUniversalTime().Subtract(
         new DateTime(1970, 1, 1, 0, 0, 0));

            return (long)Math.Truncate(tspan.TotalSeconds);
        }

Open in new window


CalendarDTO class:

public int id { get; set; }
        public string title { get; set; }
        public long start { get; set; }
        public long end { get; set; }
        public string url { get; set; }

Open in new window



In Chrome, when I open the javascript console and move the Calendar from one month to the next the error I get is :
GET http://localhost:50060/Calendar/CalendarData?_=1358443361716&start=1356847200&end=1360476000 500 (Internal Server Error) 

Open in new window


Thanks!
0
Comment
Question by:lateapex
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 4
9 Comments
 
LVL 18

Expert Comment

by:Gary Davis
ID: 38790123
The Server 500 means the ajax call to your localhost server had an unhandled exception so it returned the HTTP 500 to the ajax routine.

So set a breakpoint at the start of your CalendarData function, start the debugger and then enter this on your browser (or you can try your calendar control). Adjust the localhost:port if necessary. Step through your function and see where the exception occurs.

http://localhost:50060/Calendar/CalendarData?_=1358443361716&start=1356847200&end=1360476000

Gary Davis
0
 

Author Comment

by:lateapex
ID: 38790406
Stepping through the Controller>CalendarData function, it appears to be working. The 2 items in the List<> are populated and look correct. What looks odd, to me, is the part in the image highlighted in purple. I don't know where this number is coming from? I see start and end date/times but this first number appears to not have a variable name?

Error screen shot


Thanks!
Bob
0
 
LVL 18

Expert Comment

by:Gary Davis
ID: 38790545
The random number is used to prevent caching - it makes the url look unique so the browser will always send the request to the server. Your controller would just ignore the extra parameter. The variable name is the underscore.
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:lateapex
ID: 38792431
Okay, Thanks!

Looking at the function while debugging, I can't find anything wrong. Could it be the order the variables are in? Does Full Calendar expect a certain order?

Thanks!
Bob
0
 
LVL 18

Expert Comment

by:Gary Davis
ID: 38792837
No, order does not matter in query string parameters.
0
 
LVL 18

Expert Comment

by:Gary Davis
ID: 38792853
Consider using a more recent jQuery. Version 1.4.4 is pretty old at this point. It's probably not related to the Http 500, however.
0
 

Author Comment

by:lateapex
ID: 38792985
I up graded to: <script src="../../Scripts/jquery-1.8.1.min.js" type="text/javascript"></script>

Still got the same error but I noticed the order of the variables in the error message changed.

Error msg

Thanks for your patience!
Bob
0
 
LVL 18

Accepted Solution

by:
Gary Davis earned 500 total points
ID: 38793320
Some additional ideas:

Perhaps check your server's Event Lot. Sometimes unhandled exceptions show up there.

Look at the Network tab in the Chrome debugger to see the request and response. Verify there are no unexpected 301/302 redirects.

Look at the Http 500 response content to see if there are any details of the exception there.
0
 

Author Closing Comment

by:lateapex
ID: 38811435
Hey Gary,
Thanks for you patience with this one. I'm not getting anywhere with it. I'm going to try building it in VS 2012 instead of it's current 2008. I'll see if that does any good. If not I'll re post.

Thanks again!
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Sometimes in DotNetNuke module development you want to swap controls within the same module definition.  In doing this DNN (somewhat annoyingly) swaps the Skin and Container definitions to the default admin selections.  To get around this you need t…
User art_snob (http://www.experts-exchange.com/M_6114203.html) encountered strange behavior of Android Web browser on his Mobile Web site. It took a while to find the true cause. It happens so, that the Android Web browser (at least up to OS ver. 2.…
There's a multitude of different network monitoring solutions out there, and you're probably wondering what makes NetCrunch so special. It's completely agentless, but does let you create an agent, if you desire. It offers powerful scalability …
This is my first video review of Microsoft Bookings, I will be doing a part two with a bit more information, but wanted to get this out to you folks.

630 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question