CODEWITHSUNDEEP
javascriptjqueryfullcalendar
miechooy
miechooy

Reputation: 3422

FullCalendar - is it possible to change/add text?

Is it possible to dynamically change / add text or whatever to every day as shown on the picture below?

After check with debugger every day has other css name.

fullCalendar.io

enter image description here

Upvotes: 0

Views: 2365

Answers (2)

Blag
Blag

Reputation: 5894

This is what I use, it's a bit complex, but you'll probably find what you want to do. It use a JS function to change on fly the list of the event supplied to FullCallendar and a JS hook to add a html tag (Glyphicon) on specific event.

  // JSON of all events
var allEvents = <?php echo $json; ?>;

  // set the fullCalendar
$('#calendar').fullCalendar({

  header: {
    left: '',
    center: 'title',
    right: 'prev,next today'
  },
  weekends:false,
  fixedWeekCount:false,
    // our own JS function to filter the event
  events: function(start, end, timezone, callback) {
    var filteredEvents = [];
    var noDuplicateAssignment = [];
      // we walk on every event to filter every duplicate
    $.each(
      allEvents,
      function (key, oneEvent) {
          // we just display allUnique
        if (noDuplicateAssignment.indexOf(oneEvent.id) < 0) {
          filteredEvents.push(oneEvent);
          noDuplicateAssignment.push(oneEvent.id);
        }
      }
    );
      // we supply our events to the fullCalendar callback
    callback(filteredEvents);
  },
    // hook to add the glyphicon on electronic==TRUE event
  eventRender: function (event, element) {
    if(event.electronic)
      element.find('.fc-content').prepend(
        '<i class="glyphicon glyphicon-envelope"></i> '
        );
  }
});

If you are speaking about the content, the best is to use a JSON formatted input for your data.

With the Json, you can edit the JavaScript Json object and call the rendering of this new object to get what you want. http://fullcalendar.io/docs/event_data/events_array/

Upvotes: 0

Haring10
Haring10

Reputation: 1557

I do believe a colleague of mine used dayRender a few days ago for this exact purpose.

Something like this might work, however it is untested code.

dayRender: function (date, cell) {
    cell.text(moment(date).format('DD'));
}

We are using the moment.js library to format the date on the cell.

Upvotes: 1

Related Questions