MMM-SimpleTodo

A MagicMirror² module that provides an interactive, persistent todo list management system with multiple queues, deadline tracking, and calendar integration. Users can manage tasks entirely through the web interface without modifying source code or restarting the application.

Preview

The module displays as an attractive "sticker" component with:

• A customizable title with inline edit button
• Interactive add task button
• List of tasks with checkboxes, deadlines, and action buttons (edit/delete)
• Clean, modern styling that fits seamlessly with MagicMirror themes

Features

• Interactive Todo Management: Add, edit, delete, and check off tasks directly through the MagicMirror interface
• Multiple Queues: Display multiple independent todo lists simultaneously
• Deadline Tracking: Add optional deadlines to tasks
• Calendar Integration: Automatically generates an ICS calendar file that integrates with MagicMirror's default calendar module
• Persistent Storage: All data stored locally in JSON format
• 2AM Cleanup: Completed tasks are automatically hidden at 2AM each day (configurable)
• Mobile-Friendly: Works seamlessly on mobile browsers with native keyboard support
• Real-Time Updates: Changes reflect immediately without restarting MagicMirror
• Customizable Appearance: Styled as attractive "sticker" components

Installation

Step 1: Clone the Repository

Navigate to your MagicMirror's modules directory:

cd ~/MagicMirror/modules
git clone https://github.com/hainingpan/MMM-SimpleTodo.git

Step 2: Install Dependencies

cd MMM-SimpleTodo
npm install

Step 3: Configure MagicMirror

Add the module configuration to your config/config.js file:

{
	module: "MMM-SimpleTodo",
	position: "top_right",
	config: {
		queueId: "work",
		queueName: "Work Tasks"
	}
}

Step 4: (Optional) Calendar Integration

To display todo deadlines in the calendar module, add this configuration:

{
	module: "calendar",
	position: "top_left",
	config: {
		calendars: [
			{
				url: "file:///home/pi/MagicMirror/modules/MMM-SimpleTodo/data/todos.ics",
				symbol: "tasks",
				color: "#4CAF50"
			}
			// ... your other calendars
		]
	}
}

Note: Adjust the file path to match your MagicMirror installation location.

Configuration Options

Option	Type	Default	Description
queueId	string	Required	Unique identifier for this todo queue
queueName	string	"My Tasks"	Display name for the queue
updateInterval	number	60000	How often to check for updates (milliseconds)
showCompleted	boolean	true	Whether to show completed items before cleanup
cleanupTime	string	"02:00"	Time to hide completed items (HH:MM format)
maxItems	number	50	Maximum number of items to display
animationSpeed	number	300	Animation speed for updates (milliseconds)
showDeadlines	boolean	true	Show deadline dates for items
allowEdit	boolean	true	Allow editing items
dateFormat	string	"MMM D, YYYY"	Moment.js format for deadlines

Multiple Queues Example

You can display multiple todo queues by adding multiple module instances:

modules: [
	{
		module: "MMM-SimpleTodo",
		position: "top_right",
		config: {
			queueId: "work",
			queueName: "Work Tasks"
		}
	},
	{
		module: "MMM-SimpleTodo",
		position: "top_right",
		config: {
			queueId: "home",
			queueName: "Home Tasks"
		}
	},
	{
		module: "MMM-SimpleTodo",
		position: "top_right",
		config: {
			queueId: "shopping",
			queueName: "Shopping List"
		}
	}
]

Usage

Adding a Task

1. Click the "Add Task" button at the bottom of a queue
2. Enter the task description in the prompt
3. Choose whether to add a deadline
4. If adding a deadline, enter it in format: YYYY-MM-DD HH:MM or YYYY-MM-DD

Checking/Unchecking a Task

• Click the checkbox icon on the left of any task to mark it as complete or incomplete

Editing a Task

1. Click the edit icon (pencil) on the right side of a task
2. Modify the task description
3. Choose whether to update the deadline
4. Enter a new deadline or leave empty to remove it

Deleting a Task

1. Click the delete icon (trash) on the right side of a task
2. Confirm the deletion

2AM Cleanup

• Tasks marked as complete are hidden at 2AM each day
• This gives you an "undo window" and lets you see your accomplishments for the day
• The cleanup time can be customized with the cleanupTime configuration option

Data Storage

All todo data is stored in:

modules/MMM-SimpleTodo/data/todos.json

The calendar file is generated at:

modules/MMM-SimpleTodo/data/todos.ics

Important: These files are excluded from git (via .gitignore) to keep your personal data private.

Data Format

The todos.json file uses this structure:

{
	"queues": [
		{
			"id": "work",
			"name": "Work Tasks",
			"items": [
				{
					"id": "uuid-here",
					"text": "Complete project proposal",
					"deadline": "2025-10-15T14:00:00.000Z",
					"checked": false,
					"completedAt": null,
					"createdAt": "2025-10-12T10:30:00.000Z"
				}
			]
		}
	]
}

Troubleshooting

Module not appearing

• Verify the module is listed in config/config.js
• Check that queueId is specified (it's required)
• Check MagicMirror logs for errors: npm start dev

Tasks not persisting

• Ensure the module has write permissions to its data/ directory
• Check filesystem permissions: ls -la modules/MMM-SimpleTodo/data/

Calendar integration not working

• Verify the calendar module's file path matches your installation
• Use absolute path (e.g., /home/pi/MagicMirror/... instead of ~/MagicMirror/...)
• Check that data/todos.ics file exists and is readable
• Restart MagicMirror after adding the calendar configuration

Tasks not showing on mobile

• Ensure your MagicMirror is accessible on your local network
• Access via the mirror's IP address (e.g., http://192.168.1.100:8080)
• Check that JavaScript is enabled in your mobile browser

Development

File Structure

MMM-SimpleTodo/
├── MMM-SimpleTodo.js       # Frontend module
├── MMM-SimpleTodo.css      # Styling
├── node_helper.js          # Backend helper
├── package.json            # Dependencies
├── README.md               # Documentation
├── LICENSE                 # MIT License
├── .gitignore              # Git ignore rules
└── data/                   # Created on first run
    ├── todos.json          # Persistent storage
    └── todos.ics           # Generated calendar

Contributing

Contributions are welcome! Please:

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

License

MIT License - see LICENSE file for details

Credits

• Built for MagicMirror²
• Uses ics for calendar generation
• Uses uuid for unique IDs

Support

For issues, feature requests, or questions:

• Open an issue on GitHub
• Check existing issues for solutions
• Provide MagicMirror version and error logs when reporting bugs

Version History

v1.0.0 (2025-10-12)

• Initial release
• Interactive todo management
• Multiple queue support
• Calendar integration
• 2AM cleanup feature
• Mobile-friendly interface