Replace day number with link to event in jQuery Fullcalendar

Question

I'm using jQuery Fullcalendar from arshaw.com/fullcalendar/ and I would like to replace day number with link to event, which I'm getting via JSON from database, like on this image:

I've got small calendar with only one event per day, so default display isn't necessary for me. I need something simpler and cleaner.

Since I'm not very familiar with jQuery I can't figure it myself.

Is there a way to replace this:

<div class="fc-day-number">5</div>

with link to event on that day?

Answer 1

Without modifying the source code of the calendar creating script, you can achieve the desired result with a bit of hacking. Suppose you have a JavaScript object that holds your event URLs like this:

var urls = {
    4: "http://mydomain.com/event.html",
    16: "http://mydomain.com/event2.html",
    22: "http://mydomain.com/event.html"
}

This can be a result of a JSON request. You can then loop through all the days in the calendar and check if there's a link for that day, then update the day number to contain the link:

$('.fc-day-number').each(function() {
    // Get current day
    var day = parseInt($(this).html());

    // Check if there's a url defined for the day
    if(urls[day] != undefined) {
        // Replace the day number with the link
        $(this).html('<a href="' + urls[day] + '">' + day + '</a>');
    }
});

Just run that snippet every time the calendar is loaded / opened. Without knowing more about the calendar, it's impossible to say where this snippet should be exactly located.

Answer 2

You just need to make a quick modification into your fullcalendar.js

• Adding the link at the creation
• Adding the link at the cellules redraw stuff..

Simply replace this line:

(showNumbers ? "<div class='fc-day-number'>" + d.getDate() + "</div>" : '') +

with this line:

(showNumbers ? "<div class='fc-day-number'><a href=\"myURL.com\">" + d.getDate() + "</a></div>" : '') +

and then, this line:

td.find('div.fc-day-number').text(d.getDate());

with this line:

td.find('div.fc-day-number').html("<a href=\"myURL.com\">"+d.getDate()+"<a\>");

Enjoy it ;)

Foo.