FullCalendar - Changing the text in the basicDay view

Question

When a user clicks on the day link in the month view, I would like the day view to display a bit more information. So when they click this link:

I would like it to display this:

Basically, I want to append the order description to the order number. I already have the order description in the event details returned from my Web API call, and I use that description as a tool tip on the month view. Here are the eventRender and viewRender methods that are part of my calendar definition:

    eventRender: function (event, element) {
        event.title = event.OrderNumber;
        element.find('.fc-title').append('<a href="...' + title="' + event.Description + '">' + event.OrderNumber + '</a>');
    }
    , viewRender: function (view, element) {
        if (view.name == 'basicDay') {
            element.find('.fc-title').append('<a href="...' title="' + event.Description + '">' + event.Description + '</a>');
        }
    }

In the viewRender, I have attempted to duplicate what worked in the eventRender (changing the ".fc-title" class), but that hasn't worked. Evaluating the objects passed into the viewRender method (view and element) while debugging haven't shown me any useful properties for what I need, but perhaps they are hiding from me.

ScottSto ScottSto · Accepted Answer · 2017-03-24T13:33:14

Once again, the magic of posting my question has helped solve the problem. I found that the "eventAfterAllRender" event, which is in the calendar declaration, was the key:

$('#calendar').fullCalendar({
    eventRender: function (event, element) { ... },
    viewRender: function (view, element) { ... }, 
    eventAfterAllRender: function (view) {
        if ($('.fc-basicDay-view').length > 0) {
            $('.cl').each(function (i, item) {
                var title = item.title;
                item.innerText = item.innerText + ' - ' + item.title;
                $(this).css('font-size', '14px');
            });
        }
    }
});

I had originally tried to put the code in the "eventRender" event, but evaluating the page through the developer tools, I noticed that the page hadn't finished rendering at that point, so the HTML elements I was trying to modify had not yet been created.

Putting the code in the "eventAfterAllRender" event worked because the calendar had finished rendering, and I could then look for the link tags and modify them. In my code, I check to see if the 'fc-basicDay-view' class is present, which it is after I click on the day link on the month view (in my original post) and the day view is rendered.

Each of the link classes has a class called "cl" attached to it. This is a class I manually attach in the "eventRender" event when originally creating the link (which is a change from the original post):

element.find('.fc-title').append('<a href="...' + title="' + event.Description + '" class="cl">' + event.OrderNumber + '</a>');

The code in the "eventAfterAllRender" event then loops through all the elements, pulls the "title" property from each link (which I also assigned in the "eventRender" event), and appends it to the innerText property.

FullCalendar - Changing the text in the basicDay view

1 Answers