Zabuto Exercise Calendar

 Intro

A monthly calendar on which you tick off the days is an excellent motivator.  I want encouragement to exercise daily; in particular my knees need some TLC to make them more mobile.

Of course a printed calendar allows you to do this by crossing off the days when you exercise.  Alternatively any calendar app will allow you to log this type of information as appointments.

I want the convenience of a printed calendar without the need to carry it around with me.  I also dont want the hassle of typing in calendar entries on the computer or phone.

My conceptual answer is to display this months calendar on a web app which works on phone, iPad or PC.  Clicking on a date will turn that day green.  As the days go, and I complete my exercises, the days turn green.

Here is a sneak preview of the completed calendar.

Design

The web page should be based on HTML and Javascript so that I am able to program its look and behaviour.
After some searching on Github I found Zabuto.  It is a straightforward JS, Jquery, Bootstrap, Html, CSS app.

There is a great demo which shows you how the features work and it is easy to copy the demo to a web server.  It runs straight away without faffing around.
Days can be coloured / highlighted easily.  There are event handlers which allow you to add processing when a day is clicked.  You can load infromation into the calendar from files.

I need to save calendar information.  My preferred way to do this is to use SQL and PHP as previously used for my Art database based on Tania Rascia's excellent tutorial.
I expect the final solution to require two clicks daily, one click on a home page icon to show this month and a second click (if exercise has been completed) on today's date to mark it complete and turn it green.

More sophisticated processing and recording ideas are possible - for example, to provide more info on exercise completed to to notify that that exercise is needed - but this can wait for a subsequent upgrade if necessary.

Build

I started off by putting the demo application on my RPI web server (PI40) and checking that it works.  I then removed all files and folders from the app except those which are referenced in index.html, that just left a few JS, CSS and HTML files and the app continued to work as expected.

I also need a database.  Using my favorite HeidiSQL I setup a simple database record.

"whenisit" is set up as a index field so that there can only be one record for each day.  At present I only utilise a single "complete" flag field, but I could add more info later if I want more detail on what I did.

Starting from this minimalist calendar I added some entries in different formats to find one I like.

Clicking on a date causes the date to have the "event-john-complete" class added and causes the cell to turn green.  In practice I made it a toggle so I can "uncomplete" the event if I made a mistake.  Using JQuery this is a single line command.

At the same time I need to update the database record to show completion.  If there is no record for that date I create one by using the REPLACE command.  This required some thought (because my SQL knowledge is minimal) but when it is working it is very simple.  We make JQery AJAX call to SQL and update / create the record in a single statement.

Finally, I decided to set all dates upto today in the current month to have a pink background when the page is loaded.  This is followed by a read of database records to mark any completed days as green.  Days in the future have a white background.

Finale

Job Done.  I have a simple calendar which encourages me to exercise.  So far the application is working, which means that am actually using it to make my exercise more regular.😄