This application is based on the Ionic Framework 7 and Angular 17. The UI is done with Angular Material.
Plan your week with ease by adding todos and time-based activities. Whether it's jogging, hacking, reading, or anything else, schedule your intentions and track your progress. Set goals to stay motivated and ensure a productive week.
Adding a todo or time-based activity
Getting started is easy. From the main screen, simply choose the week you want to plan.
| Todo with no time goal | Activity with time goal |
|---|---|
 |
 |
You'll then have the flexibility to add (by clicking the plus symbol):
-
Simple to-dos: Perfect for tasks that don't require a specific time commitment.
-
Time-based activities: Schedule activities like jogging or reading, and set a time goal for the correspondig week to stay on track. You can either create a new activity or choose an exisiting one.
-
For both types of todos (time based or not) you can pick a color and assign it.
| Todo with no time goal | Activity with time goal |
|---|---|
 |
 |
Time-based Activities
After setting a time-based activitiy you can monitor it in the weeks overview page. This feature lets you manage your time effectively for various activities. Here's how it works:
- Start/Stop Button: Use this button to track the time you spend on an activity. Start the timer when you begin and stop it when you finish.
Goal Tracking:
-
The left column (flag symbol) displays your goal for that activity within the current week.
-
The middle column shows the total time you've already booked for that activity this week.
-
Active Timer: The right column indicates if you currently have a timer running for that specific activity.
Calendar Week Time-based Activity Statistic:
To have a better overview of your time-based activities you can look into the statistics overview by clicking the stats button in the calendar week overview.
The statistics overview lets you analyze your time usage. You can select a specific activity and then apply a time range filter. This will show you the total amount of time you spent on that activity within the chosen timeframe.
The following time filters can be applied:
- Today
- Yesterday
- This Week
- Last Week
- This Month
- Last Month
- All
Note: The stats overview can be used independently of the current selected week.
The fastest way to get the app running is probably on a PC.
Requirements:
- NodeJS and npm
- (OPTIONAL) An IDE or Editor if you wanna tweak the code i.e. Visual Studio Code
- If you are using Visual Studio Code I strongly recommend to install Ionic the Official extension for Ionic and Capacitor development
- The Ionic CLI
- The Angular CLI
- If you plan to deploy this app on your Android Phone you have to install the Android Studio
Installation Procedure:
- Clone/download the repo
- npm install
- ng serve
- Browse to http://localhost:4200
- For Android Deployment I recommend to install Capacitor Android and deploy the app via the Ionic Visual Studio Extension to Android Studio. From the Android Studio you can either run the app in a virtual environment or simply deploy it to your smartphone.
This app is just a little side project (one of many) to get some hands-on experience in using the Ionic Framework in combination with Angular. This app is far away from being perfect but it works and I'm using it for keeping track of of my todos and time-based activities on a daily basis.
Using @ionic/storage for storing the activities and todos just as key/value entries works but could be improved with i.e. using a SQL-lite persistency layer or something similar. Also storing this data in the cloud would be a cool extension.
If you might find this app useful as an example [you decide if it is a good or a bad one ;-)] feel free to participate and add some new features or just fork it for your own experiments.
This app is based on the MIT Licence.