Photo by
mericanadesico
FullCalendar のタイトルにHTMLタグを入れたい
FullCalendar のタイトル部分にHTMLタグを適用させたいだけなんですが、全然情報がなくて結構ハマりました。
ハマった理由は Ver 6.1.15 を使っていたからかな？（Ver 5 以前の情報は多い）
Ver 6 以降は jQuery を使わなくても良いみたいなので採用しました。
まずは、正解のコードです。
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
headerToolbar: {
left: 'prev',
center: 'title',
right: 'next'
},
datesSet: stylizeCalendarTitle
});
calendar.render();
});
function stylizeCalendarTitle(info) {
const currentYear = info.view.currentStart.getFullYear();
const currentMonth = info.view.currentStart.getMonth() + 1;
// 表示年月を更新するためのHTMLを生成
const formattedHtml = '<span class="big">' + currentMonth + '</span><br /><span>' + currentYear + '</span>';
// h2要素を取得し、HTMLを更新
const target = 'h2.fc-toolbar-title';
const el = document.querySelector(target);
el.innerHTML = formattedHtml;
}datesSet で装飾してあげるんですねぇ。
"titleFormat" でも装飾できるのですが、HTML タグを書くとそのまま表示されてしまいます。
titleFormat: function(date) {
// 月と年を取得
var month = date.date.month + 1; // フルネームの月
var year = date.date.year; // 年を取得
// タイトルのフォーマットをHTMLで作成
return '<span class="big">' + month + '</span><br /><span>' + year + '</span>';
}"eventDidMount"、"viewRender"、"eventContent" を AI は勧めてきますが、どれも使えませんでした。そもそも発火しなかったり、カレンダーで月を切り替えた時に発火したり…
一応 HTML 部分も残しておこう。
<head>
<link href="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.15/index.global.min.css" rel="stylesheet" />
</head>
<body>
<div id="calendar"></div>
<script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.15/index.global.min.js'></script>
<script>
（～先程の正解のコード～）
</script>
</body>