Budget Calendar

Programming A personal project, used to track earnings and expenditures, resulting in a monthly forecast of my finances via the web.
The Challenge

Paying bills one day in late 2016 it dawned on me I'd been using the same Excel workbook for my budgeting since November 2004. That's one workbook with 144 sheets! My document had (obviously) served its purpose well, but manually creating new months, copying and pasting repeating bills and making math connections between cells became daunting. There had to be a better way.

A quick Google search revealed there are plenty of budgeting applications out there, but none that would give me a daily totals in a month view and didn’t link directly to my bank accounts.

The Solution

Using FullCalendar as my foundation, I was able to build the modal to input my numbers using my basic HTML/CSS/JavaScript skills. I relied on the web to figure out how to record and edit these inputs into a database, populate the days of the calendar, output a daily sum, and create repeating events.

Over 8 months, and with help from the web and a co-worker, I programmed a convenient web-based budget calendar.

Excel vs web-based calendars comparison
Excel vs Web versions
Divide...

At the beginning, this project seemed out of reach. By writing down what functionality I wanted my site to have at the start, I was able to orgainze this project into manageable parts. With each step I would search the web for a tutorial, take time to wrap my head around what the code was doing, then deconstruct, reconstruct, modify and make it work for me. The limited time I sat down with a developer provided momentum to help me move forward with the increasingly difficult tasks.

... and Conquer

Overall, this project leaves me with a great sense of accomplishment after every hour or day I spend with it. Programming works the problem solving side of my brain differently than the graphic design side, but I find myself breaking down complex design tasks similarly to the way I chipped away at this calendar's features. While working on either kind of task, I constantly ask myself, "Does this do what I think it should do?" And keep finessing until it's just right. There have been so many moments throughout the process when something clicks, and I am able to make it better.

Calendar Features
New entry
New entry

Options available for a new entry include adding a new color coded category and creating repeating events.

Edit entry
Edit entry

Existing entries can be edited. If a repeating event, apply changes to one or all.

Daily total adjustment
Adjust day total

Clicking on a daily total allows you to update the amount according to current funds.

Database structure
Database structure

Four databases store various information needed to create and edit the entries.