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.
by Anılcan Çakır
80 views
0 stars
3 weeks ago
Rev 1
main.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: []
),
],
),
],
)
Stats
- Views
- 80
- Stars
- 0
- Revisions
- 1
- Size
- 10,905 chars
- Created
- Jun 30, 2026