【Flet】シンプルなカレンダーを作る

2023/11/22　公式からDatePickerが提供されていることを確認しました。特に理由がなければそちらを使用することをお勧めします。

pythonに標準で入っているcalendarモジュールとfletを組み合わせて簡単なカレンダーを作るコードです。

完成形はこちら

コード

import flet as ft
import calendar

class DateMapping:
    def __init__(self, year, month, day):
        self.year = year
        self.month = month
        self.day = day

    def generate_days(self):
        # 2次元配列形式の日付を生成。firstweekdayで始まりの曜日を設定できる。0が月曜、6が日曜
        c = calendar.Calendar(firstweekday=self.day)
        dates = c.monthdayscalendar(self.year, self.month)
        return dates

    def ymd_mapping(self):
        # 年月をキーとして二次元配列の日付を辞書に格納
        calendar_dict = {}
        calendar_dict[(self.year, self.month)] = self.generate_days()
        return calendar_dict

class FletMonthCalendar(ft.UserControl):
    def __init__(self, year, month, day):
        super().__init__()
        self.year = year
        self.month = month
        self.day = day

    def build(self):
        # グリッドの作成
        item_width = 50
        self.calendar_grid = ft.GridView(
            width=item_width*7,
            max_extent=item_width,
            child_aspect_ratio=1.0,
            spacing=1,
            run_spacing=1,
        )

        # 日付のリストと年月の組み合わせの辞書を取得
        self.dates_dict = DateMapping(self.year, self.month, self.day).ymd_mapping()

        # 日付をグリッドに格納
        for ym, date in self.dates_dict.items():
            for week in date:
                for day in week:
                    if day != 0:  # 日付が0以外なら数字を表示
                        self.calendar_grid.controls.append(
                            ft.Container(
                                content=ft.Text(value=day),
                                alignment=ft.alignment.center,
                            )
                        )
                    else:  # 日付が0なら空白を表示
                        self.calendar_grid.controls.append(
                            ft.Container(
                                content=ft.Text(value=""),
                                alignment=ft.alignment.center,
                            )
                        )

        return self.calendar_grid

def main(page: ft.Page):
    content = FletMonthCalendar(2023, 9, 6)
    page.add(content)

if __name__ == "__main__":
    ft.app(target=main)

item_widthで一つ一つのアイテムの大きさを決定し、width=item_width*7,にすることで一行ごとのアイテム数を7にしています。
ft.Textを他のものに変えれば日付選択のコンポーネントなども作れると思います。