pparas pparas - 6 months ago 21
Ajax Question

Arshaw fullcalender add custom html in each cell of month view

I am trying to insert a custom html table in each cell of month view when it is rendered. To do this I call a service using ajax. This service returns an html table which I enter into the cell.

to do this I entered the following code in fullcalender.js

bodyCells.each(function (i, _cell) {
cell = $(_cell);
date = indexDate(i);
if (date.getMonth() == month) {
cell.removeClass('fc-other-month');
} else {
cell.addClass('fc-other-month');
}
if (+date == +today) {
cell.addClass(tm + '-state-highlight fc-today');
} else {
cell.removeClass(tm + '-state-highlight fc-today');
}
cell.find('div.fc-day-number').text(date.getDate());

//Paras Change
$(CallService(date)).appendTo(cell.find('div.fc-day-content').empty());

if (dowDirty) {
setDayID(cell, date);
}


});


in the function "bodyCells.each". where CallService is my call to the function which in turn calls the service.

My call to the service is in another javascript file fullcalenderDataHelp.js the code is as below.

function CallService(date) {
var table = null;
var newDate = (date.getMonth() + 1) + '/' + (date.getDate()) + '/'+date.getFullYear();
$.ajax({
type: "POST",
url: "http://localhost:57747/ScheduleServer.svc/GetScheduleByDay",
data: '{"day":"' + newDate + '"}',
timeout: 7000,
contentType: "application/json",
success: function (response, textStatus, jqXHR) {
table = $.parseJSON(response.d)
}
})

//alert(table);
return table;

}


It works when the html table is hardcoded but when I make the actual ajax call and try to show the html table, it does not seem to work. I think the ajax call takes more time or something.

I would appreciate any help with this.

Thanks,
Paras

Answer

I know that this is an old post. The calendar plugin itself has come a long way since I asked the question and used it in my project. This is relevant to the version 1.5.4. Don't know if you can still use this in the current version. I have original fullcalender.js in the plunk mentioned below.

My original question was about how to add custom HTML in each cell of the month view.

I had found the answer to this in a couple of days after I posted the question but I did not have the common sense at that point in time to post it here. I always thought that I might get a better way of doing it from some expert who might answer it.

That day never came. I tried to go to the website today and see if this was a feature included in later versions, but I could not find anything relavent.

The answer turned out to be fairly trivial. Inside the function for bodyCells.each, I added a line of code which looks like the following.

$(CallService(date)).appendTo(cell.find('div.fc-day-content').empty());

CallService(date) is the function that returns some html that gets appended to the cell that contains the date passed as the argument.

Here is a working plunker.

There is one thing to keep in mind though. This function is called before every cell on the month view is loaded. That means that there will be a delay caused by this function call.

Hope that helps anyone who needs custom HTML in their month view of a basic fullcalender.

Comments