FullCalendarでHTMLを埋め込みたい

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便利ですね~


SNSでシェア

関連記事