FullCalendar: How to show full day names in month view instead of default dayNamesShort?

The default month view display of FullCalendar shows the short version of day names.

I have been trying to find out how to change the display to show full day names. I have read the documentation abou开发者_运维百科t dayNames and dayNamesShort, but I can't get it to work.

Any help in how to display the full day names will be appreciated.

Thanks.

---

Here's how to do it. The magic is done via columnFormat option.

        $('#calendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },

            timeFormat: {
                // for agendaWeek and agendaDay do not display time in title (time already displayed in the view)
                agenda: '',

                // for all other views (19p)
                '': 'H:mm{ - H:mm}'
            },

            // *** use long day names by using 'dddd' ***
            columnFormat: {
                month: 'dddd',    // Monday, Wednesday, etc
                week: 'dddd, MMM dS', // Monday 9/7
                day: 'dddd, MMM dS'  // Monday 9/7
            },

            axisFormat: 'H:mm',
            firstHour: 6
        });
    });

---

I was able to modify the names by doing the following

$(document).ready(function() {

    $('#calendar').fullCalendar({
        dayNamesShort: ['S', 'M', 'T', 'W', 'T', 'F', 'S']
    });

});

---

Change the month view display to show full day names by setting:

columnFormat: {
   month: 'dddd'
}

---

Richard's answer is good, but won't work with locales. So I tried all of the above but no one worked for me, only this:

columnHeaderText: function(mom) {
  return mom.format('dddd');
}

Here are the docs.

---

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');

  var calendar = new FullCalendar.Calendar(calendarEl, {
    timeZone: 'UTC',
    initialView: 'dayGridMonth',
    events: 'https://fullcalendar.io/api/demo-feeds/events.json',
    editable: true,
    selectable: true,
    showNonCurrentDates:false,
    fixedWeekCount:false,
    views: {
    dayGridMonth: {
      dayHeaderFormat: {
        weekday: 'long'
      }
    }
  }
  });

  calendar.render();
});

<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.css" rel="stylesheet"/>

<div id='calendar'></div>