UI mockups · Desktop app
Calendar app UI mockup
A desktop calendar - a colour-coded week view with a mini month and calendar toggles, an event editor with guests, and a month view with an agenda.
The 3 screens
Calendar app: Week view, Event editor, Month view. Each screen below is drawn from the mockup itself, with the headings, buttons, fields and lists that are on it.
1Week view Week view
Desktop window with 26 paragraphs, 20 labels, 14 cards, 6 checkboxes, 4 icons, 3 headings, 3 sections, 2 avatars and 6 more component types.
- Headings
- My calendars · Other calendars · October 19 – 25, 2026
- Navigation
- Day · Week · Month
- Buttons and actions
- Create event · Today
- Text and labels
- October 2026 · Work · Personal · Family · Gym classes · Team Atlas · UK holidays · Maya Patel · Mon 19 · Tue 20 · Wed 21 · Thu 22 · Fri 23 · Sat 24
2Event editor Event editor
Desktop window with 11 labels, 9 checkboxes, 5 avatars, 5 dropdowns, 5 paragraphs, 4 buttons, 4 headings, 3 text inputs and 13 more component types.
- Headings
- My calendars · Other calendars · Edit event · Guests (4)
- Fields
- Customer interviews · Thu, Oct 22, 2026 · 1:00 PM · 3:00 PM · Does not repeat · Room 4B · Harbour office · Work · 15 minutes before · Five 20-minute calls with beta customers about the new reporting screens. Script and consent form are in the shared folder. · Add guests
- Buttons and actions
- Create event · Cancel · Save · Find a time
- Text and labels
- October 2026 · Work · Personal · Family · Gym classes · Team Atlas · UK holidays · Maya Patel · Date · Time · All day · Location · Add video call link · Calendar
3Month view Month view
Desktop window with 10 headings, 7 paragraphs, 6 checkboxes, 6 labels, 4 icons, 2 avatars, 2 buttons, a calendar and 8 more component types.
- Headings
- My calendars · Other calendars · October 2026 · Upcoming · Spin class · Customer interviews · Team lunch · Demo day · Farmers market · Sunday lunch at Mum’s
- Navigation
- Day · Week · Month
- Buttons and actions
- Create event · Today
- Text and labels
- October 2026 · Work · Personal · Family · Gym classes · Team Atlas · UK holidays · Maya Patel · Today · 4:00 PM · Thu 22 · 1:00 PM · Work · Room 4B · Fri 23 · 12:00 PM · Personal · Dockside Deli · Fri 23 · 4:00 PM
Open and edit it
The calendar app mockup is free on every Tierslate plan. Opened in the editor it becomes a board of your own: every component is a real shape you can move, resize, retext or recolour, you can add screens from the web, iOS and Android component library, and React code can be generated from the screens. In the editor it is under Templates, on the Mockups tab.
More mockups
- Chat messenger UI mockup - A desktop messaging app: conversation list with unread badges, a group thread with message bubbles and attachments, and a notifications settings dialog.
- Note-taking app UI mockup - A desktop notes app: notebooks and tags in a sidebar, a note list, a rich editor with checklist and table, and a share dialog with access controls.
- Food delivery app UI mockup - Browse restaurants, pick dishes, check out and follow the courier - four mobile screens.
- Shopping website UI mockup - An online clothing store - home page, product listing with filters, product detail and checkout.
- Banking app UI mockup - A mobile bank - balance with quick actions and recent activity, a transaction detail and a send-money flow.
- Admin dashboard UI mockup - A store back office - KPI cards, revenue chart, top products and recent orders, plus a customer profile page.