こんにちは、こんです🦊
Streamlitで工数記録アプリを作っているこのシリーズ。前回導入した streamlit-calendar を timer.py に組み込んだところ、カレンダーが描画されない…！？ というトラブルに直面しました。
しかしついに本日、カレンダービューの描画に成功しました🎉 今回はその過程で判明した“本当の原因”と、その回避策をまとめておきます！
😫 状況：calendar_demo.pyでは表示されるのに、timer.pyでは出ない
前回 calendar_demo.py を使ったときは問題なくカレンダー表示できていたのに、 同じイベント構造・同じオプション設定を使っても、timer.py に組み込むとカレンダーがまったく表示されない現象が発生。
ログをいくら出しても、eventsの中身は正常。 それでも画面上に何も出ない、空白だけの状態に…！
🔍 仮説検証：一つずつ潰していく
✅ events の中身：正常（start / end / title あり）
✅ display: "block"：指定済み
✅ user_name によるフィルター：意図通り
✅ initialDate の指定もOK
それでも表示されない。
💥 原因その1：カレンダーをタブ内で描画していた
実は streamlit-calendar（内部でFullCalendar使用）は、非表示DOM（例：タブやアコーディオン）の中で初期化すると描画に失敗します。
これは FullCalendar の既知の制約で、div のサイズが 0px の状態で初期化すると、表示領域を正しく計算できないからです。
🛠 解決策： calendar() の呼び出しをタブ外に出す or 常時表示領域で呼び出すように修正。
💥 原因その2：height 未指定で描画失敗
FullCalendar は height を自動で判断できないケースがあり、 Streamlit 内では明示的に "height": 700 などを設定しないと描画されないことがあります。
🛠 解決策： options に "height": 700 を追加して強制表示。
🎯 最終的な構成（成功版 timer.py）
🔽 Streamlit Calendar によるカレンダー表示（list / month / day）
✅ FullCalendarの初期表示週は initialDate でイベント週に合わせて表示
✅ calendar() はタブ外に出して常に描画できるように配置
✅ height を指定してレイアウト崩れを防止
📌 まとめ：表示されないとき、"中身"ではなく"描画環境"が原因かも
今回の学びは、データが正しくても描画に失敗するケースがあるということ。 特に streamlit-calendar（＝FullCalendar）を使うときは：
initialDate で適切な週を表示
calendar() は 非表示UI内で呼び出さない
height は明示的に指定する
この3つを守ると、描画トラブルは一気に減ります！
💡 次にやりたいこと
🔸 status（予定／実績）ごとに色分けしたい
🔸 project_name ごとのフィルターUIを追加したい
🔸 イベントクリック時の編集UIを追加したい
まとめ：失敗を見つめた先に、成功のヒントがある
今回のように、見えない・動かないときでも「ひたすら分解＆検証」を繰り返すと、いつか「なるほど！」の瞬間がやってきます。
明日はもっと “使えるUI” に進化させていきます🦊
#100日チャレンジ
#DX実験記録
#業務改善
#ノーコード
#Streamlit
#タイムトラッカー
#カレンダーUI
#ChatGPTで業務効率化