Agenda Calendar App 📅

A modern agenda calendar application built with React Native and Expo. Features a clean design with dark/light mode support, smooth animations, and an intuitive user interface.

Download the zip file from the button at the bottom left. You will receive an Expo project. Install the necessary packages and run it using Expo Go. A development build is not required.

🚀 Features

Swipeable Calendar: Horizontal scrolling calendar with expandable month view
Dark/Light Mode: Seamless theme switching with cohesive design
Haptic Feedback: Enhanced user experience with tactile responses
Day Selector: Horizontal scrolling day selector for quick navigation
Month Picker: Easy month and year selection with modal interface
Task Management: View and manage todos/events for each day

📁 Project Structure

text

agenda-calendar-app/
├── app/                          # Expo Router app directory
│   ├── _layout.tsx              # Root layout with theme provider
│   ├── index.tsx                # Main calendar screen
│   └── modal.tsx                 # Todo detail modal
│
├── components/
│   └── calendar/                 # 🎯 Calendar components (main focus)
│       ├── CalendarAgenda.tsx    # Main calendar component
│       ├── CalendarHeader.tsx    # Custom header with month picker & theme toggle
│       ├── DaySelector.tsx       # Horizontal day selector
│       ├── MonthPicker.tsx       # Month/year picker modal
│       ├── AgendaItem.tsx        # Individual todo item component
│       ├── EmptyDay.tsx          # Empty state for days with no todos
│       ├── date-helpers.ts       # Date formatting utilities
│       ├── theme.ts              # 🎨 Theme configuration (colors, styles)
│       ├── types.ts              # TypeScript type definitions
│       ├── mock-data.ts          # Sample todo data
│       └── index.ts              # Component exports
│
├── constants/
│   └── theme.ts                  # General app theme constants
│
├── context/
│   └── ThemeContext.tsx          # Theme context provider
│
└── hooks/
    ├── use-color-scheme.ts       # Color scheme detection
    └── use-theme-color.ts        # Theme color hook

🎨 Customizing the Calendar UI

Where to Update Calendar Styling

1. Theme Colors & Styles → `components/calendar/theme.ts`

This is the main file for customizing calendar appearance:

typescript

// Light mode theme
export const lightCalendarTheme = {
  backgroundColor: "#F5F1EC",
  selectedDayBackgroundColor: "#1A1A1A",
  selectedDayTextColor: "#FFFFFF",
  todayTextColor: "#1A1A1A",
  dayTextColor: "#1A1A1A",
  textDayHeaderFontSize: 13,
  textDayFontSize: 17,
  // ... more properties
};

// Dark mode theme
export const darkCalendarTheme = {
  backgroundColor: "#0A0A0A",
  selectedDayBackgroundColor: "#FFFFFF",
  selectedDayTextColor: "#0A0A0A",
  // ... more properties
};

Key properties you can customize:

selectedDayBackgroundColor: Background color of selected day
selectedDayTextColor: Text color on selected day
todayTextColor: Color for today's date
dayTextColor: Default day text color
textDayHeaderFontSize: Size of day headers (M, T, W, etc.)
textDayFontSize: Size of date numbers
textDayFontWeight: Weight of date numbers ("500", "600", etc.)

2. Calendar Component Styling → `components/calendar/MonthPicker.tsx` & `components/calendar/DaySelector.tsx`

The calendar components use react-native-calendars library. You can customize:

Adjust the stylesheet.day.basic configuration for custom day styling
Modify the calendarTheme object for advanced styling
Change day shape and size

Example: Changing selected day shape in MonthPicker:

typescript

"stylesheet.day.basic": {
  base: {
    width: 44,
    height: 56,
    borderRadius: 22, 
  },
  selected: {
    backgroundColor: isDarkMode ? "#FFFFFF" : "#1A1A1A",
    borderRadius: 22,
  },
  // ...
}

3. Agenda Item Styling → `components/calendar/AgendaItem.tsx`

Customize how individual todo items appear in the agenda list. Modify the styles constant at the bottom of the file to change:

Card background and border colors
Text colors and sizes
Priority indicators
Category badges
Completion toggle styling

4. Header Styling → `components/calendar/CalendarHeader.tsx`

Modify the calendar header that shows month/year and theme toggle. Customize:

Month text styling
Today button appearance
Theme toggle button
Header background and spacing

Day Header Format

To change day headers (currently single letters: M, T, W), edit:

components/calendar/MonthPicker.tsx - LocaleConfig (if using react-native-calendars):

typescript

import { LocaleConfig } from "react-native-calendars";

LocaleConfig.locales["en"] = {
  dayNamesShort: ["S", "M", "T", "W", "T", "F", "S"], // Change these
  // ...
};

components/calendar/DaySelector.tsx - Similar LocaleConfig setup if needed.

🔧 Customizing Functionality

Adding/Modifying Todos

Mock Data Location: components/calendar/mock-data.ts

This file contains sample todos. To add your own data source:

Replace the mockTodos array with your data
Update the getTodosForDate() function to fetch from your API/database
Modify the Todo interface in components/calendar/types.ts if needed

Example:

typescript

export const mockTodos: Todo[] = [
  {
    id: "1",
    title: "Meeting with team",
    date: "2024-01-15",
    time: "10:00",
    completed: false,
    priority: "high",
    category: "Work",
    categoryColor: "#2D8A56",
  },
  // ... more todos
];

Calendar Behavior

Main Component: components/calendar/CalendarAgenda.tsx

Key functions you can modify:

buildDayTimeline(): Number of days to show in timeline (default: 30)
handleDayPress(): Behavior when a day is tapped
handleTodoToggle(): Behavior when a todo is toggled
scrollToDate(): How scrolling to a date works

Example: Change number of days shown:

typescript

function buildDayTimeline(baseDate: string, totalDays: number = 30) {
  // Change 30 to your desired number of days
  // ...
}

Date Formatting

Utilities: components/calendar/date-helpers.ts

Contains helper functions:

parseDateString(): Parses YYYY-MM-DD format string
getMonthYear(): Returns formatted "Month Year" string
getDateString(): Converts Date object to YYYY-MM-DD string
getTodayString(): Returns today's date as YYYY-MM-DD string
isToday(): Checks if date string is today

📱 Usage

Basic Setup

Install dependencies:

bash
npm install
Start the development server:

bash
npx expo start
Run on your platform:

bash
# iOS npm run ios # Android npm run android

🗂️ Key Files Reference

File	Purpose
`components/calendar/CalendarAgenda.tsx`	Main calendar component with day selector and agenda
`components/calendar/theme.ts`	🎨 All theme colors and styling
`components/calendar/date-helpers.ts`	Date formatting and utility functions
`components/calendar/types.ts`	TypeScript interfaces for todos and calendar data
`components/calendar/mock-data.ts`	Sample data for development
`components/calendar/MonthPicker.tsx`	Month/year picker modal with calendar
`components/calendar/DaySelector.tsx`	Horizontal day selector component
`app/index.tsx`	Main screen that uses CalendarAgenda
`context/ThemeContext.tsx`	Theme state management

🎯 Quick Customization Guide

Change Selected Day Color

→ Edit components/calendar/theme.ts → selectedDayBackgroundColor in lightCalendarTheme or darkCalendarTheme

Change Day Header Size

→ Edit components/calendar/theme.ts → textDayHeaderFontSize

Change Selected Day Shape

→ Edit components/calendar/MonthPicker.tsx → stylesheet.day.basic.base.borderRadius (22 = circle, 8 = rounded rectangle, 0 = square)

Change Day Text Size

→ Edit components/calendar/theme.ts → textDayFontSize

Change Agenda Item Colors

→ Edit components/calendar/theme.ts → agendaColors.light or agendaColors.dark object

Add Custom Styling to Days

→ Edit components/calendar/MonthPicker.tsx or components/calendar/DaySelector.tsx → calendarTheme object

Change Number of Days in Timeline

→ Edit components/calendar/CalendarAgenda.tsx → buildDayTimeline() function → totalDays parameter (default: 30)

🛠️ Dependencies

react-native-calendars: Calendar component library
expo-haptics: Haptic feedback
expo-router: File-based routing
react-native-reanimated: Animations
@expo/vector-icons: Icon library (Ionicons)
react-native-safe-area-context: Safe area handling

📝 Type Definitions

All calendar-related types are defined in components/calendar/types.ts:

Todo: Todo item structure
WeekDay: Day in the timeline
MarkedDate: Calendar marking configuration
DayData: Day with associated todos

Todo Interface:

typescript

interface Todo {
  id: string;
  title: string;
  description?: string;
  date: string;              // YYYY-MM-DD format
  time?: string;             // HH:mm format
  endTime?: string;          // HH:mm format
  completed: boolean;
  priority: "low" | "medium" | "high";
  category?: string;
  categoryColor?: string;
}

🎨 Theme System

The app uses a dual theme system:

Calendar Theme (components/calendar/theme.ts): Specific to calendar component
- lightCalendarTheme / darkCalendarTheme: For react-native-calendars
- agendaColors.light / agendaColors.dark: For agenda components
App Theme (constants/theme.ts): General app colors

Both support light and dark modes and are synchronized for a cohesive experience.

Issue Reporting

If you find any issues with the code, please report them to us at reactnativecomponents.com

📄 License

This is built under reactnativecomponents.com, please do not sell this code or share with people who did not get the pro. If we find out you are selling this code, we will take legal action and your name will be shared publicly. Show respect for the work I put into.

Happy coding! 🚀

Modern Agenda

About

Agenda Calendar App 📅

🚀 Features

📁 Project Structure

🎨 Customizing the Calendar UI

Where to Update Calendar Styling

1. Theme Colors & Styles → `components/calendar/theme.ts`

2. Calendar Component Styling → `components/calendar/MonthPicker.tsx` & `components/calendar/DaySelector.tsx`

3. Agenda Item Styling → `components/calendar/AgendaItem.tsx`

4. Header Styling → `components/calendar/CalendarHeader.tsx`

Day Header Format

🔧 Customizing Functionality

Adding/Modifying Todos

Calendar Behavior

Date Formatting

📱 Usage

Basic Setup

🗂️ Key Files Reference

🎯 Quick Customization Guide

Change Selected Day Color

Change Day Header Size

Change Selected Day Shape

Change Day Text Size

Change Agenda Item Colors

Add Custom Styling to Days

Change Number of Days in Timeline

🛠️ Dependencies

📝 Type Definitions

🎨 Theme System

Issue Reporting

📄 License

Posted by

Modern Agenda

About

Agenda Calendar App 📅

🚀 Features

📁 Project Structure

🎨 Customizing the Calendar UI

Where to Update Calendar Styling

1. Theme Colors & Styles → components/calendar/theme.ts

2. Calendar Component Styling → components/calendar/MonthPicker.tsx & components/calendar/DaySelector.tsx

3. Agenda Item Styling → components/calendar/AgendaItem.tsx

4. Header Styling → components/calendar/CalendarHeader.tsx

Day Header Format

🔧 Customizing Functionality

Adding/Modifying Todos

Calendar Behavior

Date Formatting

📱 Usage

Basic Setup

🗂️ Key Files Reference

🎯 Quick Customization Guide

Change Selected Day Color

Change Day Header Size

Change Selected Day Shape

Change Day Text Size

Change Agenda Item Colors

Add Custom Styling to Days

Change Number of Days in Timeline

🛠️ Dependencies

📝 Type Definitions

🎨 Theme System

Issue Reporting

📄 License

Posted by

1. Theme Colors & Styles → `components/calendar/theme.ts`

2. Calendar Component Styling → `components/calendar/MonthPicker.tsx` & `components/calendar/DaySelector.tsx`

3. Agenda Item Styling → `components/calendar/AgendaItem.tsx`

4. Header Styling → `components/calendar/CalendarHeader.tsx`