0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

FullCalendarのカスタマイズ:月表示で余分な翌週の行を消す

Last updated at Posted at 2024-04-09

FullCalendarの仕様なのかわかりませんが、
月表示の時に、翌月の日にちが1週間分表示されます。(下図参照)
fullcalendar.png

これを消したかったのですが、公式のドキュメントに消すためのオプションが見つからなかったため、
自分で消す方法を考えてみました。

結論

このコードを一番下あたりに追加してください。

        /*
            FullCalendar表示カスタマイズ:
            翌週分の週が余計に1行表示されている部分を消す
        */
        //【load】レンダリング、静的ファイルなど全ての読み込みが完了したタイミングで処理を開始する
        window.addEventListener('load', function() {
            
            // カレンダー<tabble class="fc-scrollgrid-sync-table">の最後の<tr>要素を取得
            var lastRow = document.querySelector('.fc-scrollgrid-sync-table tr:last-child');

            //エラー対策:<tr>要素の取得できた時だけ実行
            if(lastRow){
                // 取得した<tr>要素(翌週1週間に該当する部分)を非表示にする
                lastRow.style.display = 'none';            
            }
        });

 tableの 子要素のtr要素を全て取得し、一番最後のtr要素(余分な翌週1週間の日付の行)を
display=noneで非表示にしています。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?