---
title: "Cadence — Day Schedule"
platform: android
slug: event-schedule
screens: ["calendar"]
domains: ["productivity"]
style: "material"
fonts: ["Roboto"]
roles: ["top-navigation-bar", "button", "avatar", "segmented-control", "card", "badge", "chip", "floating-action-button", "tab-bar"]
score: {clean: 95, consistent: 94, accessible: 70, comprehensible: 34}
url: https://gui.farm/android/event-schedule
raw: https://gui.farm/android/event-schedule/design.guix
download: https://gui.farm/android/event-schedule.gui
---

# Cadence — Day Schedule

A dark-theme Android day calendar with a Day/Week/Month switch, weekday strip, and an hourly agenda of overlapping colour-coded events.

- **Live preview:** https://gui.farm/android/event-schedule
- **Raw source:** https://gui.farm/android/event-schedule/design.guix
- **Download (.gui):** https://gui.farm/android/event-schedule.gui

## Source (design.guix)

```xml
<gui version="0.2" name="Cadence — Day Schedule">
  <tokens>
    <!-- Material 3 dark surfaces -->
    <color name="surface" value="#141218" />
    <color name="surface-container" value="#211F26" />
    <color name="surface-container-high" value="#2B2930" />
    <color name="on-surface" value="#E6E1E9" />
    <color name="on-surface-variant" value="#CAC4D0" />
    <color name="grid" value="#3A383F" />
    <color name="primary" value="#D0BCFF" />
    <color name="primary-container" value="#4F378B" />
    <color name="on-primary-container" value="#EADDFF" />
    <color name="secondary-container" value="#4A4458" />
    <color name="on-secondary-container" value="#E8DEF8" />
    <color name="now" value="#FF8A80" />
    <color name="on-now" value="#3A0906" />

    <!-- event: purple -->
    <color name="ev-purple" value="#2C2542" />
    <color name="ac-purple" value="#CFBCFF" />
    <color name="tx-purple" value="#EADDFF" />
    <color name="sub-purple" value="#C9BCE6" />
    <!-- event: blue -->
    <color name="ev-blue" value="#1B2A44" />
    <color name="ac-blue" value="#A9C7FF" />
    <color name="tx-blue" value="#D8E2FF" />
    <color name="sub-blue" value="#B4C4E6" />
    <!-- event: teal -->
    <color name="ev-teal" value="#10322F" />
    <color name="ac-teal" value="#57DED7" />
    <color name="tx-teal" value="#B8EFEA" />
    <color name="sub-teal" value="#99D9D3" />
    <!-- event: rose -->
    <color name="ev-rose" value="#3A2230" />
    <color name="ac-rose" value="#FFB1C7" />
    <color name="tx-rose" value="#FFD9E4" />
    <color name="sub-rose" value="#EEBCCB" />
    <!-- event: amber -->
    <color name="ev-amber" value="#33291A" />
    <color name="ac-amber" value="#F4C64E" />
    <color name="tx-amber" value="#FBE29B" />
    <color name="sub-amber" value="#DDC488" />
    <!-- event: green -->
    <color name="ev-green" value="#17301F" />
    <color name="ac-green" value="#7FD99A" />
    <color name="tx-green" value="#B7EFC8" />
    <color name="sub-green" value="#97D6AA" />

    <number name="r-sm" value="8" />
    <number name="r-lg" value="16" />
    <number name="r-ev" value="10" />
    <number name="r-full" value="999" />
  </tokens>

  <styles>
    <text-style name="TitleLarge" font-family="Roboto" font-size="22" font-weight="400" line-height="28" />
    <text-style name="TitleMedium" font-family="Roboto" font-size="16" font-weight="500" line-height="24" />
    <text-style name="LabelLarge" font-family="Roboto" font-size="14" font-weight="500" line-height="20" />
    <text-style name="LabelMedium" font-family="Roboto" font-size="12" font-weight="500" line-height="16" />
    <text-style name="LabelSmall" font-family="Roboto" font-size="11" font-weight="500" line-height="16" />
  </styles>

  <fonts>
    <font family="Roboto" source="google" weights="400 500 700" styles="normal" />
  </fonts>

  <col w="360" fill="$surface">

    <!-- system status bar : device chrome, deliberately untagged -->
    <row w="fill" h="28" p="0 16" gap="auto" align="middle-left">
      <text text-style="LabelSmall" value="12:45" fill="$on-surface" />
      <row gap="6" align="middle-right">
        <img src="https://api.iconify.design/material-symbols/signal-cellular-alt-rounded.svg?color=%23E6E1E9" w="15" h="15" />
        <img src="https://api.iconify.design/material-symbols/wifi-rounded.svg?color=%23E6E1E9" w="15" h="15" />
        <img src="https://api.iconify.design/material-symbols/battery-full-alt-rounded.svg?color=%23E6E1E9" w="15" h="15" />
      </row>
    </row>

    <!-- top app bar -->
    <row role="top-navigation-bar" w="fill" h="64" p="0 8 0 16" gap="auto" align="middle-left">
      <col gap="1" align="middle-left">
        <text text-style="TitleLarge" value="Today" fill="$on-surface" />
        <text text-style="LabelMedium" value="Tuesday, 11 August" fill="$on-surface-variant" />
      </col>
      <row gap="6" align="middle-right">
        <row role="button" w="40" h="40" radius="$r-full" fill="$surface-container-high" align="middle-center">
          <img src="https://api.iconify.design/material-symbols/search-rounded.svg?color=%23CAC4D0" w="22" h="22" />
        </row>
        <row role="avatar" w="36" h="36" radius="18" fill="$primary-container" align="middle-center">
          <text text-style="LabelMedium" value="JJ" fill="$on-primary-container" />
        </row>
      </row>
    </row>

    <!-- segmented control : Day / Week / Month -->
    <row w="fill" p="6 16 10 16" align="middle-center">
      <row role="segmented-control" w="328" h="40" radius="$r-full" fill="$surface-container-high" p="4" gap="0" align="middle-center">
        <row w="fill" h="32" radius="$r-full" fill="$secondary-container" align="middle-center">
          <text text-style="LabelLarge" value="Day" fill="$on-secondary-container" />
        </row>
        <row w="fill" h="32" radius="$r-full" align="middle-center">
          <text text-style="LabelLarge" value="Week" fill="$on-surface-variant" />
        </row>
        <row w="fill" h="32" radius="$r-full" align="middle-center">
          <text text-style="LabelLarge" value="Month" fill="$on-surface-variant" />
        </row>
      </row>
    </row>

    <!-- up next summary card -->
    <row w="fill" p="0 16 12 16" align="middle-center">
      <row role="card" w="328" radius="$r-lg" fill="$surface-container" p="14 14 14 14" gap="12" align="middle-left">
        <rect w="4" h="46" radius="$r-full" fill="$ac-rose" />
        <col w="fill" gap="3" align="middle-left">
          <text text-style="LabelSmall" value="UP NEXT" fill="$on-surface-variant" letter-spacing="0.8" />
          <text text-style="TitleMedium" value="Design crit" fill="$on-surface" />
          <text text-style="LabelMedium" value="1:00 – 2:00 PM · Studio B" fill="$on-surface-variant" />
        </col>
        <col gap="8" align="middle-right">
          <row role="badge" h="24" radius="$r-full" fill="$secondary-container" p="0 10" align="middle-center">
            <text text-style="LabelSmall" value="In 15 min" fill="$on-secondary-container" />
          </row>
          <row gap="6" align="middle-right">
            <row role="avatar" w="24" h="24" radius="12" fill="$ac-rose" align="middle-center">
              <text text-style="LabelSmall" value="S" fill="$ev-rose" />
            </row>
            <row role="avatar" w="24" h="24" radius="12" fill="$ac-blue" align="middle-center">
              <text text-style="LabelSmall" value="R" fill="$ev-blue" />
            </row>
          </row>
        </col>
      </row>
    </row>

    <!-- all-day row -->
    <row w="fill" p="0 16 10 16" gap="12" align="middle-left">
      <row w="44" align="middle-right">
        <text text-style="LabelSmall" value="All-day" fill="$on-surface-variant" />
      </row>
      <row role="chip" h="32" radius="$r-sm" fill="$surface-container-high" p="0 12" gap="8" align="middle-center">
        <ellipse w="8" h="8" fill="$ac-amber" />
        <text text-style="LabelLarge" value="Q3 planning · all day" fill="$on-surface" />
      </row>
    </row>

    <!-- timeline : fixed-height grid, absolutely-positioned hour lines + event blocks -->
    <frame w="360" h="640" clip="true">

      <!-- hour gridlines (grid origin y=0 == 8:00, 64px per hour) -->
      <rect x="56" y="0"   w="288" h="1" fill="$grid" />
      <rect x="56" y="64"  w="288" h="1" fill="$grid" />
      <rect x="56" y="128" w="288" h="1" fill="$grid" />
      <rect x="56" y="192" w="288" h="1" fill="$grid" />
      <rect x="56" y="256" w="288" h="1" fill="$grid" />
      <rect x="56" y="320" w="288" h="1" fill="$grid" />
      <rect x="56" y="384" w="288" h="1" fill="$grid" />
      <rect x="56" y="448" w="288" h="1" fill="$grid" />
      <rect x="56" y="512" w="288" h="1" fill="$grid" />
      <rect x="56" y="576" w="288" h="1" fill="$grid" />

      <!-- hour labels, top-aligned to each line -->
      <row x="4" y="0"   w="44" align="middle-right"><text text-style="LabelSmall" value="8 AM"  fill="$on-surface-variant" /></row>
      <row x="4" y="64"  w="44" align="middle-right"><text text-style="LabelSmall" value="9 AM"  fill="$on-surface-variant" /></row>
      <row x="4" y="128" w="44" align="middle-right"><text text-style="LabelSmall" value="10 AM" fill="$on-surface-variant" /></row>
      <row x="4" y="192" w="44" align="middle-right"><text text-style="LabelSmall" value="11 AM" fill="$on-surface-variant" /></row>
      <row x="4" y="256" w="44" align="middle-right"><text text-style="LabelSmall" value="12 PM" fill="$on-surface-variant" /></row>
      <row x="4" y="320" w="44" align="middle-right"><text text-style="LabelSmall" value="1 PM"  fill="$on-surface-variant" /></row>
      <row x="4" y="384" w="44" align="middle-right"><text text-style="LabelSmall" value="2 PM"  fill="$on-surface-variant" /></row>
      <row x="4" y="448" w="44" align="middle-right"><text text-style="LabelSmall" value="3 PM"  fill="$on-surface-variant" /></row>
      <row x="4" y="512" w="44" align="middle-right"><text text-style="LabelSmall" value="4 PM"  fill="$on-surface-variant" /></row>
      <row x="4" y="576" w="44" align="middle-right"><text text-style="LabelSmall" value="5 PM"  fill="$on-surface-variant" /></row>

      <!-- event: Design standup 09:00-09:45  y=(9-8)*64=64  h=0.75*64=48 -->
      <frame x="56" y="64" w="288" h="48" radius="$r-ev" fill="$ev-purple" clip="true">
        <rect x="0" y="0" w="4" h="48" fill="$ac-purple" />
        <col x="4" y="0" w="284" h="48" p="4 10 4 12" gap="2">
          <row w="fill" gap="8" align="middle-left">
            <text w="fill" max-lines="1" truncate="true" text-style="LabelLarge" value="Design standup" fill="$tx-purple" />
            <text text-style="LabelSmall" value="45m" fill="$sub-purple" />
          </row>
          <text text-style="LabelSmall" value="9:00 – 9:45 AM · Zoom" fill="$sub-purple" />
        </col>
      </frame>

      <!-- event: User interviews 10:00-11:15  y=(10-8)*64=128  h=1.25*64=80 -->
      <frame x="56" y="128" w="288" h="80" radius="$r-ev" fill="$ev-blue" clip="true">
        <rect x="0" y="0" w="4" h="80" fill="$ac-blue" />
        <col x="4" y="0" w="284" h="80" p="10 12 10 12" gap="3">
          <row w="fill" gap="8" align="middle-left">
            <text w="fill" max-lines="1" truncate="true" text-style="LabelLarge" value="User interviews" fill="$tx-blue" />
            <text text-style="LabelSmall" value="1h 15m" fill="$sub-blue" />
          </row>
          <text text-style="LabelSmall" value="10:00 – 11:15 AM · Research Lab" fill="$sub-blue" />
          <text text-style="LabelSmall" value="3 guests · recorded" fill="$sub-blue" />
        </col>
      </frame>

      <!-- overlap pair 1:00-2:00 PM  y=(13-8)*64=320  h=64 ; lane 56..344 tiled: 140 | gap 8 | 140 -->
      <frame x="56" y="320" w="140" h="64" radius="$r-ev" fill="$ev-teal" clip="true">
        <rect x="0" y="0" w="4" h="64" fill="$ac-teal" />
        <col x="4" y="0" w="136" h="64" p="8 8 8 12" gap="2">
          <text w="fill" max-lines="1" truncate="true" text-style="LabelLarge" value="1:1 · Sam" fill="$tx-teal" />
          <text text-style="LabelSmall" value="1:00 – 2:00 PM" fill="$sub-teal" />
        </col>
      </frame>
      <frame x="204" y="320" w="140" h="64" radius="$r-ev" fill="$ev-rose" clip="true">
        <rect x="0" y="0" w="4" h="64" fill="$ac-rose" />
        <col x="4" y="0" w="136" h="64" p="8 8 8 12" gap="2">
          <text w="fill" max-lines="1" truncate="true" text-style="LabelLarge" value="Design crit" fill="$tx-rose" />
          <text text-style="LabelSmall" value="1:00 – 2:00 PM" fill="$sub-rose" />
        </col>
      </frame>

      <!-- event: Roadmap review 15:00-16:30  y=(15-8)*64=448  h=1.5*64=96 -->
      <frame x="56" y="448" w="288" h="96" radius="$r-ev" fill="$ev-amber" clip="true">
        <rect x="0" y="0" w="4" h="96" fill="$ac-amber" />
        <col x="4" y="0" w="284" h="96" p="10 12 10 12" gap="3">
          <row w="fill" gap="8" align="middle-left">
            <text w="fill" max-lines="1" truncate="true" text-style="LabelLarge" value="Roadmap review" fill="$tx-amber" />
            <text text-style="LabelSmall" value="1h 30m" fill="$sub-amber" />
          </row>
          <text text-style="LabelSmall" value="3:00 – 4:30 PM · Boardroom" fill="$sub-amber" />
          <text text-style="LabelSmall" value="Q3 → Q4 priorities" fill="$sub-amber" />
        </col>
      </frame>

      <!-- event: Ship v2.1 17:00-17:45  y=(17-8)*64=576  h=0.75*64=48 -->
      <frame x="56" y="576" w="288" h="48" radius="$r-ev" fill="$ev-green" clip="true">
        <rect x="0" y="0" w="4" h="48" fill="$ac-green" />
        <col x="4" y="0" w="284" h="48" p="4 10 4 12" gap="2">
          <text w="fill" max-lines="1" truncate="true" text-style="LabelLarge" value="Ship v2.1" fill="$tx-green" />
          <text text-style="LabelSmall" value="5:00 – 5:45 PM · Release train" fill="$sub-green" />
        </col>
      </frame>

      <!-- now indicator : 12:45  y=(12.75-8)*64=304 -->
      <rect x="56" y="303" w="288" h="2" fill="$now" />
      <ellipse x="52" y="299" w="10" h="10" fill="$now" />
      <row x="4" y="295" w="44" h="18" radius="$r-full" fill="$now" align="middle-center">
        <text text-style="LabelSmall" value="12:45" fill="$on-now" />
      </row>

      <!-- FAB : create event -->
      <row role="floating-action-button" x="288" y="560" w="56" h="56" radius="$r-lg" fill="$primary-container" align="middle-center">
        <img src="https://api.iconify.design/material-symbols/add-rounded.svg?color=%23EADDFF" w="26" h="26" />
      </row>

    </frame>

    <!-- bottom navigation : active destination gets a pill indicator -->
    <row role="tab-bar" w="fill" h="80" fill="$surface-container" p="12 0 0 0" gap="auto" align="top-center">
      <col w="90" gap="4" align="middle-center">
        <row w="64" h="32" radius="$r-full" fill="$primary-container" align="middle-center">
          <img src="https://api.iconify.design/material-symbols/calendar-month-rounded.svg?color=%23EADDFF" w="24" h="24" />
        </row>
        <text text-style="LabelMedium" value="Calendar" fill="$primary" />
      </col>
      <col w="90" gap="4" align="middle-center">
        <row w="64" h="32" align="middle-center">
          <img src="https://api.iconify.design/material-symbols/check-circle-outline-rounded.svg?color=%23CAC4D0" w="24" h="24" />
        </row>
        <text text-style="LabelMedium" value="Tasks" fill="$on-surface-variant" />
      </col>
      <col w="90" gap="4" align="middle-center">
        <row w="64" h="32" align="middle-center">
          <img src="https://api.iconify.design/material-symbols/inbox-rounded.svg?color=%23CAC4D0" w="24" h="24" />
        </row>
        <text text-style="LabelMedium" value="Inbox" fill="$on-surface-variant" />
      </col>
      <col w="90" gap="4" align="middle-center">
        <row w="64" h="32" align="middle-center">
          <img src="https://api.iconify.design/material-symbols/person-outline-rounded.svg?color=%23CAC4D0" w="24" h="24" />
        </row>
        <text text-style="LabelMedium" value="Me" fill="$on-surface-variant" />
      </col>
    </row>

  </col>
</gui>

```