Daily Schedule & Chores Tracker

A flexible and interactive analogue clock schedule and chore tracker designed for my 8-year-old. This React component helps manage daily routines and tasks, featuring a visually appealing clock interface and a dynamic chore list.

Features

Analogue Clock Schedule: Displays daily activities in an analogue clock format with segments representing different time slots.
Chore Tracker: Lists chores for the day, with checkboxes for completion tracking.
Customizable: Accepts schedule and todoList props, allowing dynamic data from APIs or other sources.
Real-time Updates: The clock updates every second to show the current time.
Responsive Design: Styled with Tailwind CSS for a modern and clean appearance.

Installation

To use the component, include it in your React project and provide the necessary props.

Create val
import AnalogueScheduleClock from './path-to-component';

// Example usage
<AnalogueScheduleClock 
  schedule={yourScheduleArray} 
  todoList={yourTodoListArray} 
  todoListHeading="Chores" 
  legendHeading="Today's Schedule" 
  initialTime={new Date()} 
  isLoading={false}
/>

Props

Prop	Type	Description
`schedule`	`ScheduleItem[]`	Array of schedule items with `start`, `end`, `label`, and `color` properties. Defaults to a preset schedule.
`todoList`	`TaskItem[]`	Array of chores with `id`, `name`, and `completed` status. Defaults to a preset chore list.
`todoListHeading`	`string`	Heading for the chore list section. Default is `"Kid's Chores"`.
`legendHeading`	`string`	Heading for the schedule legend section. Default is `"Daily Schedule"`.
`initialTime`	`Date`	Initial time to display on the clock. Defaults to the current time.
`isLoading`	`boolean`	Displays a loading screen if set to `true`. Default is `false`.

Customizing the Schedule

You can update the default schedule by modifying the defaultSchedule array or passing a custom schedule prop:

Create val
const defaultSchedule: ScheduleItem[] = [
  { label: "💤", start: "19:00", end: "06:00", color: "#fca5a5" },
  { label: "🍳", start: "06:00", end: "07:15", color: "#93c5fd" },
  { label: "🚗", start: "07:15", end: "07:30", color: "#d1d5db" },
  { label: "🏫", start: "07:30", end: "12:45", color: "#fdba74" },
  { label: "🚗", start: "12:45", end: "13:00", color: "#d1d5db" },
  { label: "📺", start: "13:00", end: "14:00", color: "#86efac" },
  { label: "📚", start: "14:00", end: "16:00", color: "#fdba74" },
  { label: "🎮", start: "16:00", end: "17:00", color: "#86efac" },
  { label: "🍽️", start: "17:00", end: "18:00", color: "#93c5fd" },
  { label: "🛁", start: "18:00", end: "19:00", color: "#d8b4fe" },
];

Feel free to customize the labels, start/end times, and colors to suit your child's daily routine.

Customizing the Chore List

To update the chores, modify the efaultTodoList array or provide a custom todoList prop:

Create val
const defaultTodoList: TaskItem[] = [
  { id: "1", name: "Make bed", completed: false },
  { id: "2", name: "Clean room", completed: false },
  { id: "3", name: "Do homework", completed: false },
  { id: "4", name: "Feed pet", completed: false },
  { id: "5", name: "Set table", completed: false },
];

You can add, remove, or modify tasks to match your child’s responsibilities.

Changing Headings

To change the headings for the chores and schedule sections, update lines 229 and 230 in the code:

Create val
todoListHeading = "Kid's Chores",
legendHeading = "Daily Schedule",

Adjust these to fit your preferred labels or language.

dailyScheduleTracker