ShiftCalendar

A modern, offline-first shift scheduling app for shift workers. Track shifts, leave, overtime, and pay on a clean monthly calendar. Built with React Native + Expo.

Features

• Monthly Calendar -- Color-coded shift & leave badges with swipe navigation
• Adjacent Month Days -- See previous/next month shifts in the calendar grid
• Quick Assign -- Tap to assign, long-press for instant last-used shift
• Shift Templates -- 8 pre-built rotations (2-2-2, 4-on/4-off, Continental, Panama, DuPont, and more)
• Repeat Patterns -- Select a date range and repeat any shift pattern forward
• Custom Shifts -- Create shift types with custom names, colors, icons, and times
• Leave Management -- Annual, Sick, Emergency, and Unpaid leave with yearly balance tracking
• Shift Swap -- Offer swaps and share requests via WhatsApp, SMS, etc.
• Pay Calculator -- Base rate + overtime rate with monthly pay estimates
• Multi-Calendar -- Manage separate calendars (e.g. My Shifts, Team A, Team B)
• Stats Dashboard -- Monthly shift counts, hours breakdown, pay estimates, and leave balance
• Overtime Tracking -- Log overtime hours per day with automatic totals
• Notes & Search -- Add notes to any day and search through all notes
• Android Widget -- Home screen widget showing the current week's shifts
• Week View -- Toggle between month and week views
• Yearly Overview -- At-a-glance heatmap of the entire year
• Dark / Light / System Theme -- Full theme support including the widget
• Export & Import -- CSV export/import, PDF export, full backup/restore
• Notifications -- Evening reminders for the next day's shift
• Configurable -- Week start day, currency (33 supported), haptic feedback
• Offline & Private -- All data stored locally. No account, no server, no tracking.
• Accessible -- Screen reader labels on all interactive elements

Screenshots

Getting Started

Prerequisites

• Node.js (v18+)
• Expo CLI

Installation

git clone https://github.com/iTroy0/ShiftCalendar.git
cd ShiftCalendar
npm install

Development

npx expo start
npx expo start --android
npx expo start --ios

Note: The Android home screen widget requires an EAS development build, not Expo Go.

Building

Cloud Build (EAS)

npm install -g eas-cli
eas login

# Preview APK
eas build --platform android --profile preview

# Production AAB (for Google Play)
eas build --platform android --profile production

Local Build

npx expo prebuild --platform android
cd android
./gradlew assembleRelease

Project Structure

ShiftCalendar/
├── app/
│   ├── _layout.tsx              # Root layout with providers
│   └── (tabs)/
│       ├── index.tsx             # Calendar screen
│       ├── stats.tsx             # Stats screen
│       └── settings.tsx          # Settings screen
├── components/
│   ├── CalendarDay.tsx           # Day cell with shift/leave pills
│   ├── DaySheet.tsx              # Day detail bottom sheet
│   ├── TemplateSheet.tsx         # Template selector
│   ├── RepeatSheet.tsx           # Pattern repeat sheet
│   ├── NotesSearchSheet.tsx      # Notes search
│   ├── ShiftEditor.tsx           # Shift create/edit form
│   ├── WeekView.tsx              # Week view display
│   ├── YearlyOverview.tsx        # Yearly heatmap
│   └── settings/                 # Settings section components
├── hooks/
│   ├── ShiftContext.tsx           # Shift data context
│   ├── ThemeContext.tsx           # App settings context
│   ├── useShiftData.ts           # Data persistence layer
│   ├── useTheme.ts               # Theme & preferences
│   └── useDeepLinkHandler.ts     # File import handler
├── constants/
│   ├── shifts.ts                 # Shift type definitions
│   ├── templates.ts              # Rotation templates
│   ├── leaveTypes.ts             # Leave type definitions
│   ├── colors.ts                 # Theme color palettes
│   └── currencies.ts             # Currency list
├── utils/
│   ├── exportImport.ts           # CSV/PDF/backup export & import
│   ├── statsCalculation.ts       # Stats computation
│   └── notifications.ts          # Shift reminders
├── widgets/
│   ├── ShiftWeekWidget.tsx       # Android widget UI
│   └── widget-task-handler.tsx   # Widget data handler
└── assets/                       # App icons & splash

Tech Stack

• Framework -- React Native + Expo SDK 55
• Language -- TypeScript
• Routing -- Expo Router (file-based)
• Calendar -- react-native-calendars
• Animations -- react-native-reanimated
• Gestures -- react-native-gesture-handler
• Bottom Sheets -- @gorhom/bottom-sheet
• Storage -- @react-native-async-storage/async-storage
• Widget -- react-native-android-widget
• Date Math -- date-fns
• Haptics -- expo-haptics

License

MIT

Author

Made by Troy