CODEWITHSUNDEEP
javascriptfullcalendar
dmitriy
dmitriy

Reputation: 488

How to set day of the week and month name in the cell using fullcalendar

I'm using plugin fullcalendar for my project, but I have a problem that I can't show day of the week and the month name in the cell. How can I solve this problem?

the result whick I expect: enter image description here

$('.js-fullcalendar').fullCalendar({
    header: {
        right: 'today',
        center: 'prev, title, next',
        left: ''
    },
    navLinks: true,
    editable: true,
    eventLimit: true,
    events: exhibitionList,
    eventColor: '#3279b7',
    columnFormat: 'dddd',
    eventRender: function (event, element) {
        if (event.logo) {
            element.find(".fc-title").prepend("<img class='fcalen__img' src=" + event.logo + ">").append("<span class='fcalen__city'>" + event.city + "</span>");
        }
    }
});

Upvotes: 0

Views: 1479

Answers (1)

dmitriy
dmitriy

Reputation: 488

I've found the solution:

$('.js-fullcalendar').fullCalendar({
  header: {
    right: 'today',
    center: 'prev, title, next',
    left: ''
  },
  navLinks: true,
  editable: true,
  eventLimit: true,
  events: exhibitionList,
  eventColor: '#3279b7',
  columnFormat: 'dddd',
  dayRender: function(date, cell) {
    var weekDay = date.format("dddd");
    var month = date.format("MMMM");
    var day = date.format("D");
    cell.html("<span class='fcalen__week-day'>" + weekDay + "</span>" + "<br>" + "<div class='fcalen__month-name'>" + day + "  " + month + "</div>");
  },
  eventRender: function(event, element) {
    element.find(".fc-title").prepend("<img class='fcalen__img' src=" + event.logo + ">").append("<span> / <span><span class='fcalen__city'>" + event.country + " " + event.city + "</span>");
  }
});

Upvotes: 1

Related Questions