Solved

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

Posted on 2013-01-17
9
1,239 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
  • 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
Optimizing Cloud Backup for Low Bandwidth

With cloud storage prices going down a growing number of SMBs start to use it for backup storage. Unfortunately, business data volume rarely fits the average Internet speed. This article provides an overview of main Internet speed challenges and reveals backup best practices.

 

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

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

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

Just a quick little trick I learned recently.  Now that I'm using jQuery with abandon in my asp.net applications, I have grown tired of the following syntax:      (CODE) I suppose it just offends my sense of decency to put inline VBScript on a…
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…
In a recent question (https://www.experts-exchange.com/questions/28997919/Pagination-in-Adobe-Acrobat.html) here at Experts Exchange, a member asked how to add page numbers to a PDF file using Adobe Acrobat XI Pro. This short video Micro Tutorial sh…
This video shows how to quickly and easily add an email signature for all users on Exchange 2016. The resulting signature is applied on a server level by Exchange Online. The email signature template has been downloaded from: www.mail-signatures…

770 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