Full calendar display event title in celendar each cell within start and end date range

Question

I am using full calendar v3.0.1, I need to display event title in every day cell in calendar table.

Example:

start: 2017-01-01 end: 2017-01-10

Based on these dates, Expected output in calendar should be displaying event title in within start and end date range. meet5 title should show in each day cell within event range.

Current output:

Required Expected output

Any suggestions, How we can achieve this ?

What did you try so far? Can you share some fiddle or at least a screenshot of what do you want to achieve? — Krzysztof Kaźmierczak

Krzysztof Kaźmierczak Krzysztof Kaźmierczak · Accepted Answer · 2017-01-03T21:57:32

Maybe you could try something like this:

$('#calendar').fullCalendar({

      defaultView: 'month',
      events: [{
        title: 'Some quite long event description in a day cell',
        start: '2017-01-05',
        end: '2017-01-09',
        rendering: 'background',
        allDay: true
      }],
      eventAfterAllRender: function(view) {
        $.each($('#calendar').fullCalendar('clientEvents'), function() {
          var event = this;
          var $start = $('#calendar').find('td.fc-day[data-date="' + event.start.format('YYYY-MM-DD') + '"]');
          var $end = $('#calendar').find('td.fc-day[data-date="' + event.end.format('YYYY-MM-DD') + '"]');

          if (event.rendering === 'background') {
            for (var d = event.start; d <= event.end; d.add(1, 'day')) {
              $('#calendar').find('td.fc-day[data-date="' + d.format('YYYY-MM-DD') + '"]').append('<a href="test.html">' + event.title + '</a>');
            }
          }
        });
      }
    });

Check this fiddle.

I noticed that you would like to have an event title below day number. Solution above is a bit different, but it should give you an idea how it could be done I hope.

Full calendar display event title in celendar each cell within start and end date range

1 Answers