--- title: Avalonia Calendar Control From Scratch (Multiple... description: The Avalonia theme engine just met the first control that genuinely tests it — a calendar, hand-coded from scratch. This is the honest episode: I fix the bugs... canonical: https://daily.dev/posts/avalonia-calendar-control-from-scratch-multiple-selection-modes--rxdgfolcu twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Avalonia Calendar Control From Scratch (Multiple Selection Modes) | daily.dev og:description: The Avalonia theme engine just met the first control that genuinely tests it — a calendar, hand-coded from scratch. This is the honest episode: I fix the bugs... og:url: https://daily.dev/posts/avalonia-calendar-control-from-scratch-multiple-selection-modes--rxdgfolcu og:image: https://api.daily.dev/og/posts/RXdgfoLCu.png og:image:alt: Avalonia Calendar Control From Scratch (Multiple Selection Modes) og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Avalonia Calendar Control From Scratch (Multiple Selection Modes) **[AngelSix](https://daily.dev/sources/angelsix)** · 31 min read · 0 upvotes · 0 comments ## Summary The Avalonia theme engine just met the first control that genuinely tests it — a calendar, hand-coded from scratch. This is the honest episode: I fix the bugs I left in rather than pretend the first version was right. The drop down that won't expand to fit its content, the calendar that changes size when expanded, and a selection state still hardcoded black and purple instead of bound to an accent colour — all of it found by reading 400 lines of XAML cold. Along the way: a side-by-side dark theme preview, day cell selection states bound to accent brushes, the keyboard focus state pulling the wrong brush, and a size jump fixed with opacity instead of visibility. Part of a complete series on building a fully custom Avalonia UI theme from scratch, hand-coded with zero AI. ━━━━━━━━━━━━━━━━━━━ 📌 WHAT YOU'LL LEARN ━━━━━━━━━━━━━━━━━━━ • How to read a large XAML control file you didn't write — the background-override trick for spotting sections at a glance • Why the drop down text box won't expand to fit content, and the HorizontalAlignment stretch fix • The Chrome-less text box that removes a default focus ring without breaking the control • Why the calendar changes size when expanding from month to year — the visibility vs opacity trade-off • How to bind day cell selection states to accent brushes, and which brush the keyboard focus state should use • How Theme.Kind retints the entire calendar instantly, and where event dots will attach ━━━━━━━━━━━━━━━━━━━ ⏱ TIMESTAMPS ━━━━━━━━━━━━━━━━━━━ [0:00] – No more ugly calendar — the plan and the bugs [0:14] – The calendar view, the source commit, and getting these C# controls into Avalonia [0:49] – The next feature: event dots and custom event values [1:11] – Theme library issues, and why this file is 400+ lines [1:28] – Single date, date range, month select, year select [1:53] – The drop down picker version [2:05] – Bug 1 — the text box doesn't expand to fit content [2:21] – Bug 2 — the calendar changes size when expanded [2:59] – Is the selection actually bound to an accent colour? [3:37] – Reading 400 lines of XAML cold — my thought process [4:16] – Selection modes — none, single, range [5:19] – Finding the header by overriding the background [7:26] – The Chrome-less text box — removing the focus ring [10:14] – The marker strip — where event dots will live [11:13] – Day and date cells — all the binding is in C# [12:11] – The black and purple selection problem [12:23] – Adding a dark theme preview side by side [14:36] – Binding selection states to accent brushes [17:28] – Fixing the in-range band styling [18:30] – Fixing the keyboard focus state [19:34] – Retinting with Theme.Kind — success, destructive, primary [22:00] – Softening the selected border brush [23:48] – The calendar size change — setting a fixed 500x500 to prove it [26:01] – Visibility vs opacity — solving the size jump [27:47] – Settling on natural growth as the default [28:40] – Fixing the drop down text box width [30:43] – What's next — event dots and an event viewer [31:41] – Sign off ━━━━━━━━━━━━━━━━━━━ 🔗 LINKS & RESOURCES ━━━━━━━━━━━━━━━━━━━ ▶ Full Avalonia Themes Playlist: https://www.youtube.com/playlist?list=PLrW43fNmjaQVE2vDBeWD8QYIm06w6bKyO ▶ Source Code (AvaloniaThemeLab): https://github.com/angelsix/youtube/tree/develop/AvaloniaThemeLab ▶ GitHub: https://github.com/angelsix ▶ Website: https://www.angelsix.com ━━━━━━━━━━━━━━━━━━━ 📚 SERIES — Avalonia UI Theming, Hand Coded From Scratch ━━━━━━━━━━━━━━━━━━━ 01 — Setup — https://www.youtube.com/watch?v=rUKlQnjU0tc 02 — Buttons — https://www.youtube.com/watch?v=oKjk6pyyARI 03 — Button Spinner Anatomy — https://www.youtube.com/watch?v=WMaTbXkvm9g 04 — Designing a Theme System — https://www.youtube.com/watch?v=I5halHoNfH0 05 — Checkbox Control Deep Dive — https://www.youtube.com/watch?v=uIimnwjITT0 06 — Building a Custom Checkbox — https://www.youtube.com/watch?v=uv1bNrfCjtY 07 — Theme Engine From Scratch — https://www.youtube.com/watch?v=NXz8hwITg5U 08 — Building a Design Token System — https://www.youtube.com/watch?v=QMVdxRZqaU8 09 — I Let AI Refactor Everything — https://www.youtube.com/watch?v=5-p_fnOi0As 10 — One Token System for the Entire Theme — https://www.youtube.com/watch?v=JEcD1XXIiA8 11 — Avalonia Styles Not Working? — https://www.youtube.com/watch?v=OhJN8Ssp2hA 12 — A Full Icon System — https://www.youtube.com/watch?v=N5HPe5GYCPo 13 — Breaking Every Control On Purpose — https://www.youtube.com/watch?v=OmVFU-iowqI 14 — A Tool That Finds Bugs My Compiler Can't See — https://www.youtube.com/watch?v=WQB5kFJWRmc 15 — The Accent System — https://www.youtube.com/watch?v=YFQEVLaYk94 16 — The Color Ramp That Themes Your Whole App — https://www.youtube.com/watch?v=xhnUQOOrShs 17 — A Maintainable Token System — https://www.youtube.com/watch?v=tg2gSQRJtmY 18 — Automatic Dark Mode From a Single Theme — https://www.youtube.com/watch?v=m2WjfZAOUyM 19 — This Video — Calendar Control From Scratch ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: --- [View this post on daily.dev](https://daily.dev/posts/avalonia-calendar-control-from-scratch-multiple-selection-modes--rxdgfolcu) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Avalonia Calendar Control From Scratch (Multiple Selection Modes)","url":"https://daily.dev/posts/avalonia-calendar-control-from-scratch-multiple-selection-modes--rxdgfolcu","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/avalonia-calendar-control-from-scratch-multiple-selection-modes--rxdgfolcu"},"datePublished":"2026-10-04T13:04:31.779Z","dateModified":"2026-10-04T21:48:33.277Z","description":"The Avalonia theme engine just met the first control that genuinely tests it — a calendar, hand-coded from scratch.\n\nThis is the honest episode: I fix the bugs...","image":"https://i.ytimg.com/vi/EZE8MFbcoAE/sddefault.jpg","thumbnailUrl":"https://i.ytimg.com/vi/EZE8MFbcoAE/sddefault.jpg","isAccessibleForFree":true,"articleSection":"AngelSix","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"AngelSix","logo":"https://media.daily.dev/image/upload/s--h1ikmN_u--/f_auto,q_auto/v1791119063/logos/angelsix?_a=BAMAMicg0","url":"https://daily.dev/sources/angelsix"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/avalonia-calendar-control-from-scratch-multiple-selection-modes--rxdgfolcu","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":0},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"","timeRequired":"PT31M","video":{"@type":"VideoObject","name":"Avalonia Calendar Control From Scratch (Multiple Selection Modes)","description":"The Avalonia theme engine just met the first control that genuinely tests it — a calendar, hand-coded from scratch.\n\nThis is the honest episode: I fix the bugs...","thumbnailUrl":"https://i.ytimg.com/vi/EZE8MFbcoAE/sddefault.jpg","uploadDate":"2026-10-04T13:04:31.779Z","duration":"PT31M","url":"https://api.daily.dev/r/RXdgfoLCu","embedUrl":"https://www.youtube.com/embed/EZE8MFbcoAE"}} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"AngelSix","item":"https://daily.dev/sources/angelsix"},{"@type":"ListItem","position":3,"name":"Avalonia Calendar Control From Scratch (Multiple Selection Modes)"}]} ```