Вы можете реализовать пользовательский рендерер.
viewRender: function(view, element) {
// Manipulate the DOM here
return element.find('th.fc-widget-header').renderCalendarHeaders({
multiLine : false,
patterns : [ 'ddd', 'DD' ]
});
}
Я реализовал плагин renderCalendarHeaders jQuery, который основан на ванильном JS-методе в самом низу (неиспользованном) демонстрации. Вы не должны изменять этот код плагина. Просто измените параметры, которые вы передаете;как видно из звонка выше.
/* jQuery plugin */
(function($) {
// Adapted from https://stackoverflow.com/a/38962654/1762224
$.fn.renderCalendarHeaders = function(opts) {
opts = $.extend({
multiLine : false,
patterns : []
}, opts || {});
this.each((i, th) => $(th).html(buildDateColumnHeader(moment($(th).data('date')))));
function buildDateColumnHeader(colDate) {
var $container = $('<div>').addClass('fc-cell-text-wrapper');
var textArr = opts.patterns.map(pattern => colDate.format(pattern));
if (opts.multiLine === true) {
$container.append(textArr.map(text => $('<span>').addClass('fc-cell-text').text(text)));
} else {
$container.append($('<span>').addClass('fc-cell-text').text(textArr.join(' ')));
}
return $container;
}
return this; // Self-returning
}
})(jQuery);
Демо
$(function() {
$('#calendar').fullCalendar({
defaultView: 'timelineWeek',
viewRender: renderViewColumns, // OVERRIDE TEXT
contentHeight: 610,
scrollTime: '00:00',
displayEventTime: false,
displayEventEnd: false,
timeFormat: 'h:mma',
axisFormat: 'HH:mm',
//slotDuration: '24:00',
titleFormat: 'ddd DD MMM YYYY',
columnFormat: 'ddd DD/M', // WILL BE OVERIDDEN
resourceAreaWidth: 200,
duration: {
days: 15
},
slotDuration: {
"hours": 12
},
slotLabelInterval: {
"hours": 24
},
minTime: "00:00:00",
maxTime: "24:00:00",
height: 610,
contentHeight: "40",
header: {
left: 'prev, today',
center: 'title',
right: 'oneweek,twoweek,onemonth,oneyear,next'
},
views: {
oneyear: {
buttonText: 'One Year',
type: 'timelineYear'
},
onemonth: {
buttonText: 'One Month',
type: 'timelineMonth'
},
},
//hiddenDays: [ 10 ],
businessHours: {
start: '09:00',
end: '20:00'
},
resourceLabelText: 'Rooms',
resources: 'https://fullcalendar.io/demo-resources.json',
events: 'https://fullcalendar.io/demo-events.json?with-resources'
});
});
/* Call the jQuery plugin on each header. */
function renderViewColumns(view, element) {
return element.find('th.fc-widget-header').renderCalendarHeaders({
multiLine : false,
patterns : [ 'ddd', 'DD' ]
});
}
/* jQuery plugin */
(function($) {
// Adapted from https://stackoverflow.com/a/38962654/1762224
$.fn.renderCalendarHeaders = function(opts) {
opts = $.extend({
multiLine : false,
patterns : []
}, opts || {});
this.each((i, th) => $(th).html(buildDateColumnHeader(moment($(th).data('date')))));
function buildDateColumnHeader(colDate) {
var $container = $('<div>').addClass('fc-cell-text-wrapper');
var textArr = opts.patterns.map(pattern => colDate.format(pattern));
if (opts.multiLine === true) {
$container.append(textArr.map(text => $('<span>').addClass('fc-cell-text').text(text)));
} else {
$container.append($('<span>').addClass('fc-cell-text').text(textArr.join(' ')));
}
return $container;
}
return this; // Self-returning
}
})(jQuery);
// ==============================================================================
// Original method below...
// ==============================================================================
var MULTI_LINE = false; // Could not pass as an option before.
function __renderViewColumns(view, element) {
element.find('th.fc-widget-header').each(function() {
var theDate = moment($(this).data('date')); /* th.data-date="YYYY-MM-DD" */
$(this).html(buildDateColumnHeader(theDate));
});
function buildDateColumnHeader(theDate) {
var container = document.createElement('div');
container.classList.add('fc-cell-text-wrapper');
var textArr = [
theDate.format('ddd'), // Day of Week
theDate.format('DD') // Date and Month
];
if (MULTI_LINE === true) {
textArr.forEach(text => {
var singleText = document.createElement('span');
singleText.classList.add('fc-cell-text');
singleText.textContent = text;
container.appendChild(singleText);
});
} else {
var allText = document.createElement('span');
allText.classList.add('fc-cell-text');
allText.textContent = textArr.join(' ');
container.appendChild(allText);
}
return container;
}
}
html,
body {
margin: 0;
padding: 0;
font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
font-size: 14px;
}
#calendar {
max-width: 900px;
margin: 40px auto;
}
.fc-widget-header .fc-cell-text-wrapper .fc-cell-text {
display: block; /* For separate lines */
}
<link href="https://unpkg.com/fullcalendar@3.10.1/dist/fullcalendar.min.css" rel="stylesheet" />
<link href="https://unpkg.com/fullcalendar-scheduler@1.10.0/dist/scheduler.min.css" rel="stylesheet" />
<script src="https://unpkg.com/moment@2.24.0/min/moment.min.js"></script>
<script src="https://unpkg.com/jquery@3.4.1/dist/jquery.min.js"></script>
<script src="https://unpkg.com/fullcalendar@3.10.1/dist/fullcalendar.min.js"></script>
<script src="https://unpkg.com/fullcalendar-scheduler@1.10.0/dist/scheduler.min.js"></script>
<div id='calendar'></div>