Skip to content
Türkçe
All snippets

Flutter Calendar Month View with Event Dots

A month calendar view in pure Wind className strings: a weekday header, a seven column day grid, today highlighted, and colored event dots. Every color carries its dark pair.

  • WDiv
  • WText
  • WButton
  • WIcon
preview
oxzfth11.dart 
WDiv(
  className: 'max-w-sm w-full mx-auto p-6 rounded-3xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 shadow-xl',
  children: [
    WDiv(
      className: 'flex flex-row items-center justify-between w-full mb-5',
      children: [
        WText(
          'June 2026',
          className: 'text-gray-900 dark:text-white text-lg font-bold'
        ),
        WDiv(
          className: 'flex flex-row items-center gap-2',
          children: [
            WButton(
              className: 'w-8 h-8 rounded-full bg-gray-100 dark:bg-gray-800 flex flex-row items-center justify-center',
              child: WIcon(
                Icons.chevron_left,
                className: 'text-gray-600 dark:text-gray-300 text-base'
              ),
            ),
            WButton(
              className: 'w-8 h-8 rounded-full bg-gray-100 dark:bg-gray-800 flex flex-row items-center justify-center',
              child: WIcon(
                Icons.chevron_right,
                className: 'text-gray-600 dark:text-gray-300 text-base'
              ),
            ),
          ],
        ),
      ],
    ),
    WDiv(
      className: 'flex flex-row items-center justify-between w-full mb-2',
      children: [
        WDiv(
          className: 'w-9 flex flex-row justify-center',
          child: WText(
            'S',
            className: 'text-gray-400 dark:text-gray-500 text-xs font-semibold'
          )
        ),
        WDiv(
          className: 'w-9 flex flex-row justify-center',
          child: WText(
            'M',
            className: 'text-gray-400 dark:text-gray-500 text-xs font-semibold'
          )
        ),
        WDiv(
          className: 'w-9 flex flex-row justify-center',
          child: WText(
            'T',
            className: 'text-gray-400 dark:text-gray-500 text-xs font-semibold'
          )
        ),
        WDiv(
          className: 'w-9 flex flex-row justify-center',
          child: WText(
            'W',
            className: 'text-gray-400 dark:text-gray-500 text-xs font-semibold'
          )
        ),
        WDiv(
          className: 'w-9 flex flex-row justify-center',
          child: WText(
            'T',
            className: 'text-gray-400 dark:text-gray-500 text-xs font-semibold'
          )
        ),
        WDiv(
          className: 'w-9 flex flex-row justify-center',
          child: WText(
            'F',
            className: 'text-gray-400 dark:text-gray-500 text-xs font-semibold'
          )
        ),
        WDiv(
          className: 'w-9 flex flex-row justify-center',
          child: WText(
            'S',
            className: 'text-gray-400 dark:text-gray-500 text-xs font-semibold'
          )
        ),
      ],
    ),
    WDiv(
      className: 'flex flex-row items-center justify-between w-full mb-1',
      children: [
        WDiv(
          className: 'w-9 h-9',
          children: []
        ),
        WDiv(
          className: 'w-9 h-9',
          children: []
        ),
        WDiv(
          className: 'w-9 h-9',
          children: []
        ),
        WDiv(
          className: 'w-9 h-9 flex flex-col items-center justify-center',
          child: WText(
            '1',
            className: 'text-gray-700 dark:text-gray-200 text-sm'
          )
        ),
        WDiv(
          className: 'w-9 h-9 flex flex-col items-center justify-center',
          child: WText(
            '2',
            className: 'text-gray-700 dark:text-gray-200 text-sm'
          )
        ),
        WDiv(
          className: 'w-9 h-9 flex flex-col items-center justify-center',
          child: WText(
            '3',
            className: 'text-gray-700 dark:text-gray-200 text-sm'
          )
        ),
        WDiv(
          className: 'w-9 h-9 flex flex-col items-center justify-center',
          child: WText(
            '4',
            className: 'text-gray-700 dark:text-gray-200 text-sm'
          )
        ),
      ],
    ),
    WDiv(
      className: 'flex flex-row items-center justify-between w-full mb-1',
      children: [
        WDiv(
          className: 'w-9 h-9 flex flex-col items-center justify-center',
          child: WText(
            '5',
            className: 'text-gray-700 dark:text-gray-200 text-sm'
          )
        ),
        WDiv(
          className: 'w-9 h-9 flex flex-col items-center justify-center',
          child: WText(
            '6',
            className: 'text-gray-700 dark:text-gray-200 text-sm'
          )
        ),
        WDiv(
          className: 'w-9 h-9 flex flex-col items-center justify-center',
          child: WText(
            '7',
            className: 'text-gray-700 dark:text-gray-200 text-sm'
          )
        ),
        WDiv(
          className: 'w-9 h-9 flex flex-col items-center justify-center',
          children: [
            WText(
              '8',
              className: 'text-gray-700 dark:text-gray-200 text-sm'
            ),
            WDiv(
              className: 'w-1 h-1 rounded-full bg-indigo-500 dark:bg-indigo-400 mt-0.5',
              children: []
            ),
          ],
        ),
        WDiv(
          className: 'w-9 h-9 flex flex-col items-center justify-center',
          child: WText(
            '9',
            className: 'text-gray-700 dark:text-gray-200 text-sm'
          )
        ),
        WDiv(
          className: 'w-9 h-9 flex flex-col items-center justify-center',
          child: WText(
            '10',
            className: 'text-gray-700 dark:text-gray-200 text-sm'
          )
        ),
        WDiv(
          className: 'w-9 h-9 flex flex-col items-center justify-center',
          child: WText(
            '11',
            className: 'text-gray-700 dark:text-gray-200 text-sm'
          )
        ),
      ],
    ),
    WDiv(
      className: 'flex flex-row items-center justify-between w-full mb-1',
      children: [
        WDiv(
          className: 'w-9 h-9 flex flex-col items-center justify-center',
          child: WText(
            '12',
            className: 'text-gray-700 dark:text-gray-200 text-sm'
          )
        ),
        WDiv(
          className: 'w-9 h-9 flex flex-col items-center justify-center',
          child: WText(
            '13',
            className: 'text-gray-700 dark:text-gray-200 text-sm'
          )
        ),
        WDiv(
          className: 'w-9 h-9 flex flex-col items-center justify-center',
          child: WText(
            '14',
            className: 'text-gray-700 dark:text-gray-200 text-sm'
          )
        ),
        WDiv(
          className: 'w-9 h-9 rounded-full bg-indigo-600 dark:bg-indigo-500 flex flex-col items-center justify-center',
          child: WText(
            '15',
            className: 'text-white text-sm font-bold'
          ),
        ),
        WDiv(
          className: 'w-9 h-9 flex flex-col items-center justify-center',
          child: WText(
            '16',
            className: 'text-gray-700 dark:text-gray-200 text-sm'
          )
        ),
        WDiv(
          className: 'w-9 h-9 flex flex-col items-center justify-center',
          child: WText(
            '17',
            className: 'text-gray-700 dark:text-gray-200 text-sm'
          )
        ),
        WDiv(
          className: 'w-9 h-9 flex flex-col items-center justify-center',
          child: WText(
            '18',
            className: 'text-gray-700 dark:text-gray-200 text-sm'
          )
        ),
      ],
    ),
    WDiv(
      className: 'flex flex-row items-center justify-between w-full mb-1',
      children: [
        WDiv(
          className: 'w-9 h-9 flex flex-col items-center justify-center',
          child: WText(
            '19',
            className: 'text-gray-700 dark:text-gray-200 text-sm'
          )
        ),
        WDiv(
          className: 'w-9 h-9 flex flex-col items-center justify-center',
          child: WText(
            '20',
            className: 'text-gray-700 dark:text-gray-200 text-sm'
          )
        ),
        WDiv(
          className: 'w-9 h-9 flex flex-col items-center justify-center',
          child: WText(
            '21',
            className: 'text-gray-700 dark:text-gray-200 text-sm'
          )
        ),
        WDiv(
          className: 'w-9 h-9 flex flex-col items-center justify-center',
          children: [
            WText(
              '22',
              className: 'text-gray-700 dark:text-gray-200 text-sm'
            ),
            WDiv(
              className: 'w-1 h-1 rounded-full bg-emerald-500 dark:bg-emerald-400 mt-0.5',
              children: []
            ),
          ],
        ),
        WDiv(
          className: 'w-9 h-9 flex flex-col items-center justify-center',
          child: WText(
            '23',
            className: 'text-gray-700 dark:text-gray-200 text-sm'
          )
        ),
        WDiv(
          className: 'w-9 h-9 flex flex-col items-center justify-center',
          child: WText(
            '24',
            className: 'text-gray-700 dark:text-gray-200 text-sm'
          )
        ),
        WDiv(
          className: 'w-9 h-9 flex flex-col items-center justify-center',
          child: WText(
            '25',
            className: 'text-gray-700 dark:text-gray-200 text-sm'
          )
        ),
      ],
    ),
    WDiv(
      className: 'flex flex-row items-center justify-between w-full',
      children: [
        WDiv(
          className: 'w-9 h-9 flex flex-col items-center justify-center',
          children: [
            WText(
              '26',
              className: 'text-gray-700 dark:text-gray-200 text-sm'
            ),
            WDiv(
              className: 'w-1 h-1 rounded-full bg-amber-500 dark:bg-amber-400 mt-0.5',
              children: []
            ),
          ],
        ),
        WDiv(
          className: 'w-9 h-9 flex flex-col items-center justify-center',
          child: WText(
            '27',
            className: 'text-gray-700 dark:text-gray-200 text-sm'
          )
        ),
        WDiv(
          className: 'w-9 h-9 flex flex-col items-center justify-center',
          child: WText(
            '28',
            className: 'text-gray-700 dark:text-gray-200 text-sm'
          )
        ),
        WDiv(
          className: 'w-9 h-9 flex flex-col items-center justify-center',
          child: WText(
            '29',
            className: 'text-gray-700 dark:text-gray-200 text-sm'
          )
        ),
        WDiv(
          className: 'w-9 h-9 flex flex-col items-center justify-center',
          child: WText(
            '30',
            className: 'text-gray-700 dark:text-gray-200 text-sm'
          )
        ),
        WDiv(
          className: 'w-9 h-9',
          children: []
        ),
        WDiv(
          className: 'w-9 h-9',
          children: []
        ),
      ],
    ),
  ],
)
360 lines Open in the playground

More like this

  • Flutter Time Zone Meeting Planner Card with Work Hour Tracks

    A meeting planner card for Flutter team apps, built with Wind: one 24 hour UTC track per city showing work, awake and asleep hours, a highlighted best slot column, local times with an after hours flag, a legend and an invite button. Every block is computed from the real September UTC offsets.

    • WDiv
    • WIcon
    • WText
    • WButton

  • Flutter Class Schedule Card with Time Blocked Day Columns

    A Flutter weekly class schedule card with time on the vertical axis: five day columns, class blocks sized by start time and duration, colour-coded types with a legend, an hour axis and a next-class strip with spots left. Pure wind_kit className layout, no charting package.

    • WDiv
    • WText
    • WIcon
    • WButton

  • Flutter Focus Timer Card with Radial Minute Dial

    A deep-work session card that turns the remaining minutes into a ring of 25 dots, one per minute, with the countdown in the middle. Round pills track the pomodoro cycle and two tiles summarise focused time and streak. Built with Wind className utilities, so the whole dial is plain divs.

    • WDiv
    • WText
    • WIcon
    • WButton