Calendar home screen
A calendar app home screen for iOS and Android. Week strip with active day highlighted in blue, an agenda list below showing four events with time bars, event type tags, and a bottom tab bar. Use it as the main screen for scheduling apps, time-blocking tools, and any productivity product that organises events by day. Built for Bolt, Lovable, and Replit.
About this app template
A great calendar home screen shows exactly what today holds at a glance. This template opens with a month label and a navigation row, then a seven-day week strip where the current day is highlighted in a blue circle. Colour-coded dots below each day show which have events. Below the strip, an agenda section lists four events for the selected day, each with a coloured left bar (blue for work, soft blue for personal), event title, location, time, and a category tag. A four-tab bottom bar with Calendar active in blue completes the layout. Paste it into Bolt, Lovable, or Replit and ask your AI to wire the week strip to a real date picker, populate the event list from your calendar data source, and handle tab navigation.
Common questions about this template
How do I connect this calendar home screen to a real data source?
Paste this template into Bolt, Lovable, or Replit and ask your AI to fetch events from your backend or a calendar API like Google Calendar. Your AI populates the agenda list with real events for the selected day and updates the dot indicators on the week strip.
How do I make the week strip scroll to the next or previous week?
Ask your AI to add left and right arrow handlers to the month navigation buttons. Each tap shifts the displayed week by seven days and re-fetches the events for the new selection.
Can I add a month view toggle to this calendar screen?
Yes. Ask your AI to add a toggle between Day, Week, and Month views. The week strip becomes a full calendar grid in month view and a single-day column in day view. Your AI builds the layout transitions.
How do I colour-code events by category?
Define a colour map for each category: work, personal, fitness, travel. Ask your AI to read the category field on each event and apply the matching colour to the left bar and tag background. The template already shows the pattern with blue and soft blue bars.
Use this template for
- ·Calendar and scheduling app home screens for iOS and Android
- ·Daily agenda views for productivity and time-blocking tools
- ·Event lists and schedule views for work and personal apps
- ·Home screens for meeting and appointment management apps
Works with every vibe coding tool
More app templates
View allApp paywall with feature grid
App paywall with feature grid
Paywall
Social auth sign-in
Social auth sign-in
Sign in
Onboarding with social proof
Onboarding with social proof
Onboarding
Welcome splash with photo background
Welcome splash with photo background
Splash
Email sign-in
Email sign-in
Sign in
OTP verification code
OTP verification code
Sign in