Question

I’m working on a small app that makes use of the jQuery plugin Fullcalendar. This plugin is very good but now I need to make s light change to it.

Once an event has been stored it is presented on the calendar and clicking on the event by default displays an alert with the event title in it. What I want to happen is for the click event to call an an action on my calendar controller.

The javascript that I am using of the fullcalendar.js and then my own javascript library:

function padDigits(n, totalDigits) {

    n = n.toString();

    var pd = '';

    if (totalDigits > n.length) {

        for (i = 0; i < (totalDigits - n.length); i++) {

            pd += '0';

        }

    }

    return pd + n.toString();

}



function createEvent(date, allDay, jsEvent, View) {

    var eventDate = padDigits(date.getMonth() + 1, 2) + '-' +

                    padDigits(date.getDate(), 2) + '-' +

                    padDigits(date.getFullYear(), 4);

    window.location.href = "/Calendar/Create/" + eventDate;

}



$(document).ready(function () {

    $('#calendar').fullCalendar({

        editable: true,

        events: $('#calendar').data('url'), /*"/Calendar/GetEvents",*/

        eventClick: "/Calendar/ReviewApproveBooking", 

        dayClick: function (date, allDay, jsEvent, view) {

            createEvent(date, allDay, jsEvent, view);

        }

    });

});

The eventClick is where I want to make the call.

The action looks like:

[HttpGet]
        [Authorize(Roles="Admin")]
        public ActionResult ReviewApproveBooking()
        {
            var booking = from b in DBContext.Events
                          where b.EventID == 1
                          select b;
            var em = booking.Single();
            Guid memberKey = em.MemberID;
            MembershipUser mu_booker = Membership.GetUser(memberKey);

            ProfileModel pm = ProfileModel.GetProfile(mu_booker.UserName);

            em.BookerName = pm.FullName;

            return View(em);
        }

        [HttpPost]
        [Authorize(Roles="Admin")]
        public ActionResult ReviewApproveBooking(int id, EventModel em)
        {
            // get the actual user ID
            // Need to complete - I know this is blank
            return View();
        }

I’ve been working on this for a day now and I can’t see what I need to do to get this work. Any help is greatly appreciated.

Many thanks
nathj07

Answer 1

In short if I am correct, you simply want to make an ajax call when an event is clicked, looking the docs this is fairly simple…

Firstly you need to call a [Post] method with your ajax call, I am showing you the jquery code below:

The docs say this..
$('#calendar').fullCalendar({
    eventClick: function(calEvent, jsEvent, view) {

        alert('Event: ' + calEvent.title);
        alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);
        alert('View: ' + view.name);

        // change the border color just for fun
        $(this).css('border-color', 'red');

    }
});

$('#calendar').fullCalendar({
    eventClick: function(calEvent, jsEvent, view) {
        $.ajax({
            url: _url,
            type: "POST",
            cache: false,
            data: { id= "",  }, *//sort out your params here*
            error: function(xhr, status, error) {
//handle errors
            },
            success: function(data) {
//handle sucess here

            } // end on sucess
        }); // end ajax call

    }
});