CODEWITHSUNDEEP
asp.net-mvcjsonfullcalendar
Mehrad Rafigh
Mehrad Rafigh

Reputation: 156

FullCalendar not showing Events

I want to bind the fullcalendar by arshaw into my MVC 3 Application and save the events into a SQL Server database which is in my App_Data Folder. But I have a few problems. On the View of my Action the calendar is not rendered but I see the JSON result from my controller. I looked in every thread on stackoverflow dealing with this problem and none of them helped me.

Here is the code:

Database

Name    Datatype        AllowNullValues
id      int             False   
title   varchar(MAX)    False   
start   varchar(MAX)    False   
end     varchar(MAX)    True    
allday  bit             True

Auto generated Calendar Model by ADO.NET

namespace MvcApplication5.Models
{
using System;
using System.Collections.Generic;

public partial class Calendar
{
    public int id { get; set; }
    public string title { get; set; }
    public string start { get; set; }
    public string end { get; set; }
    public Nullable<bool> allday { get; set; }
}
}

HomeController.cs

    public ActionResult GetEvents()
    {
        IList<Calendar> taskList = new List<Calendar>();

        taskList.Add(new Calendar
        {
            id = 1,
            title = "Google Search",
            start = DateTime.Now.ToString("MM-dd-yyyy"),
            end = DateTime.Now.AddDays(1).ToString("MM-dd-yyyy"),
            allday = false
        });
        taskList.Add(new Calendar
        {
            id = 2,
            title = "Bing Search",
            start = DateTime.Now.AddDays(2).ToString("MM-dd-yyyy"),
            end = DateTime.Now.AddDays(3).ToString("MM-dd-yyyy"),
            allday = false
        });

        return Json(taskList, JsonRequestBehavior.AllowGet);
    }

GetEvents.cshtml

<!DOCTYPE html>

<html>
<head>
    <title>GetEvents</title>
    <script src="@Url.Content("~/Content/fullcalendar-1.6.1/jquery/jquery-1.9.1.min.js")"></script>
    <script src="@Url.Content("~/Content/fullcalendar-1.6.1/jquery/jquery-ui-1.10.2.custom.min.js")"></script>
    <script src="@Url.Content("~/Content/fullcalendar-1.6.1/fullcalendar/fullcalendar.js")"></script>
    <script src="@Url.Content("~/Content/fullcalendar-1.6.1/fullcalendar/fullcalendar.min.js")"></script>
    <link href="@Url.Content("~/Content/fullcalendar-1.6.1/fullcalendar/fullcalendar.css")" rel="stylesheet" />
</head>
<body>
    <script type="text/javascript">
        $(document).ready(function () {

            var date = new Date();
            var d = date.getDate();
            var m = date.getMonth();
            var y = date.getFullYear();

            var calendar = $('#calendar').fullCalendar({
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,agendaWeek,agendaDay'
                },
                editable: true,
                eventSources: '/Home/GetEvents'
            });

        });
   </script>
    <style>

    body {
        margin-top: 40px;
        text-align: center;
        font-size: 14px;
        font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
        }

    #calendar {
        width: 900px;
        margin: 0 auto;
        }

</style>
    <div id ="calendar">
    </div>
</body>
</html>

And this what I get in my View

[{"id":1,"title":"Google Search","start":"06-18-2013","end":"06-19-2013","allday":false},{"id":2,"title":"Bing Search","start":"06-20-2013","end":"06-21-2013","allday":false}]

When I return View() the calendar is correctly rendered. Can someone please help me? This makes me losing my nerves! Thanks in advance :)

Upvotes: 0

Views: 3459

Answers (1)

tocallaghan
tocallaghan

Reputation: 9522

Your calendar setup is incorrect. The easiest change would be to change eventSources to events

events: '/Home/GetEvents'

Otherwise (if you would like to use eventSources) you need to setup like this

eventSources: [{
    url: '/myfeed.php',
    color: 'yellow',   // an option!
    textColor: 'black' // an option!
}}

Edit: To help debugging try the success and error callbacks:

$('#calendar').fullCalendar({

events: {
    url: '/myfeed.php',
    type: 'POST',
    success: function(a, b, c) {
        alert('success');
    },
    error: function(a, b, c) {
        alert('there was an error while fetching events!');
    }
}

});

Upvotes: 1

Related Questions