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>
精彩评论