Jquery fullcalendar not showing events

Question

Hi,

I am using jquery fullcalendar on one of my view pages for an MVC project to show events.

But it doesn't show the events here is my code:

public class HighlightMonthlyEvents { public int id { get; set; } public string EventName { get; set; } public long EventStartDate { get; set; } public long EventEndDate { get; set; } public string url { get; set; }

    public HighlightMonthlyEvents()
    {
    }
}

[AcceptVerbs(HttpVerbs.Get)]
    public JsonResult HighlightCalendar()
    {
        var tasksList = new List<HighlightMonthlyEvents>();

        tasksList.Add(new HighlightMonthlyEvents
        {
            id = 1,
            EventName = "Google search",
            EventStartDate = ToUnixTimespan(DateTime.Now),
            EventEndDate = ToUnixTimespan(DateTime.Now.AddHours(4)),
            url = "www.google.com"
        });
        tasksList.Add(new HighlightMonthlyEvents
        {
            id = 1,
            EventName = "Bing search",
            EventStartDate = ToUnixTimespan(DateTime.Now.AddDays(1)),
            EventEndDate = ToUnixTimespan(DateTime.Now.AddDays(1).AddHours(4)),
            url = "www.bing.com"
        });

        var highlightDays = Jayrock.Json.Conversion.JsonConvert.ExportToString(tasksList.ToArray());

        return Json(highlightDays, JsonRequestBehavior.AllowGet);
    }


<script type="text/javascript">
    $(function () {

        // FullCalendar
        alert("Helo");
        $('.fullcalendar').fullCalendar({
            theme: true,
            header: {
                left: 'today prev,next',
                center: '',
                right: ''
            },
            defaultView: 'month',
            editable: false,
            events: function (callback) {
                                    contentType: "application/json; charset=utf-8",
        $.getJSON("/Test/HighlightCalendar/", null,
               function (result) {
                if (result != null) {
                    for (i in result) {
                        var calEvent = result[i];
                        alert(calEvent.id);
                        calEvent.eventStartDate = new Date(parseInt(calEvent.eventStartDate.replace("/Date(", "").replace(")/", ""), 10));
                        calEvent.eventEndDate = new Date(parseInt(calEvent.eventEndDate.replace("/Date(", "").replace(")/", ""), 10));
                    }
                }

                var calevents = result;
                // then, pass the CalEvent array to the callback
                callback(calevents);

               });
            }

        });

my json object returns :

[{"id":1,"eventName":"Google search","eventStartDate":1279745050,"eventEndDate":1279759450,"url":"www.google.com"},{"id":1,"eventName":"Bing search","eventStartDate":1279831450,"eventEndDate":1279845850,"url":"www.bing.com"}]

alert(calEvent.id) says undefined...

Please help me!

Thanks a Lot! Anusha

Answer 1

You should be using events keys (key: value pair) that match the fullCalendar event object... e.g. instead of eventName, use title and use start instead of eventStartDate.

Look at the event object link to find all the keys you should be using.

Oh, and the id's need to be unique.

Edit: Oh and you could be using the event sources instead of getJson.