CODEWITHSUNDEEP
javascriptjqueryhtmlcssfullcalendar
Ruhul Amin
Ruhul Amin

Reputation: 1779

How to add extra HTML to columnFormat on Fullcalendar

I am using full calendar basicWeek and using columnFormat: 'dd D' which producing the html like:

<th class="fc-day-header ui-widget-header fc-sat fc-future" data-date="2016-12-10">
 <span>Sa 10</span>
</th>

I want to style this data Sa and 10 as different color. So I think, best is to change markup. Seeking suggestion from expert.

Want to make like:

Want like this

Currently looks like:

Currently looks like this:

Upvotes: 0

Views: 991

Answers (1)

Krzysztof Kaźmierczak
Krzysztof Kaźmierczak

Reputation: 1434

As mentioned in the comments, it is not out of the box functionality, but you can try something like this:

var $calendar = $('#calendar').fullCalendar({
  header: {
    left: 'prev,next today',
    center: 'title',
    right: 'month,basicWeek,basicDay'
  },
  defaultView: 'basicWeek',
  dayRender: function(date, cell) {
    var today = new Date();
    var cellIndex = cell[0].cellIndex
    var h = cell.closest('table').find('th').eq(cellIndex);
    if (date.getDate() === today.getDate()) {
      h.html('<span class="c1">' + moment(date).format("ddd") + '</span>&nbsp;<span class="c2">' + moment(date).format("M/D") + '</span>');
    } else {
      h.addClass('c1');
    }
  }
});

http://jsfiddle.net/ogaydvos/

Upvotes: 1

Related Questions