CODEWITHSUNDEEP
jqueryhtmlfullcalendar
Didier68
Didier68

Reputation: 1325

Fullcalendar: add HTML tag next to the "titleformat"

I use the jQuery Fullcalendar agenda component. My goal is to associate an action with each date displayed in the calendar, and to allow the opening of a separate window on each date.

So I need to add a button or a link next to the date(s) formatted via "titleFormat" in the first line of the agenda:

I see how to change the date format, but not how to insert another HTML element..

Meantime, I found an example that is close to what I want to do, but if the code fragment seems simple to me, I don't see how to incorporate it into the component settings ... And unfortunately, its documentation http://fullcalendar.io/docs/display/dayRender/ still seems to me obscure.

eventRender: function (event, element) {
  var dataToFind = moment(event.start).format('YYYY-MM-DD');
  $("td[data-date='"+dataToFind+"']").addClass('activeDay');
}

Upvotes: 0

Views: 2444

Answers (1)

MasNotsram
MasNotsram

Reputation: 2273

The day render function allows you to modify the cell in any you want. If we get it as a JQuery object, we can add any element we wish:

  dayRender:function(date, cell){
    $(cell).html('<span>' + date + '</span>');
  }

An example Fiddle: http://jsfiddle.net/Lty1z0sm/2/

Update I believe what you were looking for was the viewRender callback:

viewRender:function(view, element){
  var date = moment(view.start).format('YYYY-MM-DD');
  element.find('.fc-day-header').append('<button data-date="' + date + '" type="button">My Button</button>');
}

Here is a working Fiddle:

http://jsfiddle.net/Lty1z0sm/3/

Upvotes: 2

Related Questions