CODEWITHSUNDEEP
jqueryasp.net-mvc-3razorfullcalendar
Dan
Dan

Reputation: 1480

ASP.NET MVC 3 jQuery fullCalendar

I am trying to implement jquery full calendar with json event updates. I have no idea why oit's not working. Her is my layout.cstml head

<!DOCTYPE html>
<html>
<head>
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="../../Scripts/fullcalendar.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui-1.7.2.custom.min.js" type="text/javascript">        </script>
<script src="../../Scripts/jquery-1.3.2.js" type="text/javascript"></script>
<link href="../../Content/fullcalendar.css" rel="stylesheet" type="text/css" />
<link href="../../Content/jquery-ui-1.7.2.custom.css" rel="stylesheet" type="text/css"    />



 </head>

Here is my index.cshtml

@{
ViewBag.Title = "Home Page";
}


 <h2>@ViewBag.Message</h2>
 <p>
To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET    MVC     Website">http://asp.net/mvc</a>.
 </p>

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

  <div id="calendar">
  </div>

And my controller

 using System;
 using System.Collections.Generic;
 using System.Linq;
 using System.Web;
 using System.Web.Mvc;
 using MvcApplication4.Models;

 namespace MvcApplication4.Controllers
  {
   public class HomeController : Controller
   {
    public ActionResult Index()
    {
        ViewBag.Message = "Welcome to ASP.NET MVC!";

        return View();
    }

    public ActionResult About()
    {
        return View();
    }


    [HandleError]

        public ActionResult CalendarData()
        {
            IList<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 = 1,
                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);
        }
       }
   }

I'm getting nothing in my view. Any suggestions? Thanks in advance!

Upvotes: 2

Views: 3869

Answers (1)

DavidAndroidDev
DavidAndroidDev

Reputation: 2414

Javascript include order does matter here...

You should be putting jQuery lib above the jQueryUI lib, and then the fullCalendar lib.

EDIT: Also, you should use the Url.Content() like in the first CSS tag. This helps resolve the actual server pathing when the page loads. You don't want to use relative pathing.

So your tags should look like...

<!DOCTYPE html>
<html>
<head>
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.3.2.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.7.2.custom.min.js")" type="text/javascript"></script>    
<script src="@Url.Content("~/Scripts/fullcalendar.js")" type="text/javascript"></script>
<link href="@Url.Content("~/Content/fullcalendar.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/jquery-ui-1.7.2.custom.css")" rel="stylesheet" type="text/css"    />

Edit 2: Actually, I think I see the real reason you're not getting anything in your view.

In your layout.cshtml, you'll need to add a body tag. Soo...

<!DOCTYPE html>
<html>
<head>
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="../../Scripts/fullcalendar.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui-1.7.2.custom.min.js" type="text/javascript">        </script>
<script src="../../Scripts/jquery-1.3.2.js" type="text/javascript"></script>
<link href="../../Content/fullcalendar.css" rel="stylesheet" type="text/css" />
<link href="../../Content/jquery-ui-1.7.2.custom.css" rel="stylesheet" type="text/css"    />



</head>
<body>
    <div id="page">
        @RenderBody()
    </div>
</body>

You need the RenderBody() method so the Razor engine knows where to put the view content that isn't defined in a section. You can't have more than one RenderBody() method in the layout view.

Upvotes: 2

Related Questions