FullCalendarでリンクタグを埋めたかった
FullCalendarを使うことがあって、タイトルの部分に画像やリンクタグを使いたいなーって思ったけど、なんか微妙に調べにくかったので、ここで簡単に記述したいと思います。
ソースコード
元のコード
<div id="calendar"></div>
<script>
$(function() {
// 初期処理
$('#calendar').fullCalendar({
events:
[
{
title:'<a href="./index.html">リンク</a>',start:"2019-01-01"
},
{
title:"test2",start:"2018-08-31T08:30:00",end:"2018-09-01T00:01:00"
}
]
})
});
</script>
このままではHTMLのタグは無視され、全てテキストとして処理されてしまいます。
<div id="calendar"></div>
<script>
$(function() {
// 初期処理
$('#calendar').fullCalendar({
events:
[
{
title:'<a href="./index.html">リンク</a>',start:"2019-01-01"
},
{
title:"test2",start:"2018-08-31T08:30:00",end:"2018-09-01T00:01:00"
}
],
eventRender: function (event, element) {
element.find('span.fc-title').html(element.find('span.fc-title').text());
}
})
});
</script>
上記の記述でタイトルがリンクになると思います。
FullCalendar便利ですね~