Agenda Calendar App 📅

A customizable modern calendar agenda built with React Native, Expo, and TypeScript. Features a swipeable calendar with expandable header, dark/light mode support, and an intuitive task management interface. It is a base to build your own calendar app. It is easily customizable with your own data and styles.

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

📁 Project Structure

agenda-calendar-app/
├── app/                          # Expo Router app directory
│   ├── (tabs)/                   # Tab navigation screens
│   │   ├── index.tsx            # Main calendar screen
│   │   └── explore.tsx          # Explore screen, no functionality here, just a placeholder.
│   └── modal.tsx                # Todo detail modal
│
├── components/
│   └── calendar/                 # 🎯 Calendar components (main focus)
│       ├── CalendarAgenda.tsx    # Main calendar component
│       ├── CalendarHeader.tsx     # Custom header with date display
│       ├── AgendaItem.tsx        # Individual todo item component
│       ├── EmptyDay.tsx          # Empty state for days with no todos
│       ├── 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: 14,
  borderRadius: 8, // Selected day border radius
  // ... 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.)
borderRadius: Shape of selected day indicator (8 = rounded rectangle)
textDayFontSize: Size of date numbers

2. Calendar Component Styling → `components/calendar/CalendarAgenda.tsx`

The main calendar component where you can:

Adjust the stylesheet.day.basic configuration for custom day styling
Modify the calendarTheme object for advanced styling
Change the LocaleConfig for day name formatting

Example: Changing selected day shape:

typescript

"stylesheet.day.basic": {
  base: {
    width: 32,
    height: 32,
    borderRadius: 8, // Change this value (8 = rounded rectangle, 16 = circle)
  },
  // ...
}

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

Customize how individual todo items appear in the agenda list.

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

Modify the calendar header that shows "Today, 19 March" format.

Day Header Format

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

components/calendar/helpers.ts - formatDayHeader() function:

typescript

export function formatDayHeader(date: Date): { day: string; dayNum: string } {
  const days = ["S", "M", "T", "W", "T", "F", "S"]; // Change these
  // ...
}

components/calendar/CalendarAgenda.tsx - LocaleConfig:

typescript

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

🔧 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

Calendar Behavior

Main Component: components/calendar/CalendarAgenda.tsx

Key functions you can modify:

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

Date Formatting

Utilities: components/calendar/helpers.ts

Contains helper functions:

getDateString(): Converts Date to YYYY-MM-DD format
formatDayHeader(): Formats day name and number
buildStaticTimeline(): Creates the day timeline

📱 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 # Web npm run web

Using the Calendar Component

typescript

import { CalendarAgenda } from "@/components/calendar";
import { useTheme } from "@/context/ThemeContext";

function MyScreen() {
  const { isDarkMode, toggleTheme } = useTheme();

  return (
    <CalendarAgenda
      isDarkMode={isDarkMode}
      onToggleTheme={toggleTheme}
      onTodoPress={(todo) => console.log("Todo pressed:", todo)}
      onTodoToggle={(todo) => console.log("Todo toggled:", todo)}
      onDateChange={(date) => console.log("Date changed:", date)}
    />
  );
}

🗂️ Key Files Reference

File	Purpose
`components/calendar/CalendarAgenda.tsx`	Main calendar component with swipeable days
`components/calendar/theme.ts`	🎨 All theme colors and styling
`components/calendar/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
`app/(tabs)/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

Change Day Header Size

→ Edit components/calendar/theme.ts → textDayHeaderFontSize

Change Selected Day Shape

→ Edit components/calendar/CalendarAgenda.tsx → stylesheet.day.basic.base.borderRadius

Change Day Header Letters

→ Edit components/calendar/helpers.ts → formatDayHeader() function → Edit components/calendar/CalendarAgenda.tsx → LocaleConfig.locales["en"].dayNamesShort

Add Custom Styling to Days

→ Edit components/calendar/CalendarAgenda.tsx → calendarTheme object

🛠️ 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

📝 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

🎨 Theme System

The app uses a dual theme system:

Calendar Theme (components/calendar/theme.ts): Specific to calendar component
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! 🚀

Base Agenda Calendar

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/CalendarAgenda.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

Using the Calendar Component

🗂️ Key Files Reference

🎯 Quick Customization Guide

Change Selected Day Color

Change Day Header Size

Change Selected Day Shape

Change Day Header Letters

Add Custom Styling to Days

🛠️ Dependencies

📝 Type Definitions

🎨 Theme System

Issue Reporting

📄 License

Posted by

Base Agenda Calendar

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/CalendarAgenda.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

Using the Calendar Component

🗂️ Key Files Reference

🎯 Quick Customization Guide

Change Selected Day Color

Change Day Header Size

Change Selected Day Shape

Change Day Header Letters

Add Custom Styling to Days

🛠️ Dependencies

📝 Type Definitions

🎨 Theme System

Issue Reporting

📄 License

Posted by

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

2. Calendar Component Styling → `components/calendar/CalendarAgenda.tsx`

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

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