Habit Tracker Mini Program: Features, Architecture, and Custom Calendar Styling

The author describes the creation of a WeChat mini‑program called "My Daily Routine Check‑in" that helps users record habit check‑ins and practice focused training, aiming to build good habits and reduce procrastination.

Technical stack : the backend API is implemented with PHP and MySQL, while the front‑end is built using UniApp and packaged as a WeChat mini‑program; habit‑related images are stored on Qiniu Cloud.

Interface overview : the home page shows the day's habits, allowing multiple check‑ins per habit; statistics can be viewed by day, week, month, or year; a focus‑training module provides a Pomodoro timer and visual charts.

Custom calendar component : the built‑in uni-calendar component is restyled with the following CSS (kept unchanged):

<style scoped>
  .uni-calendar--hook >>> .uni-calendar__content { border-radius: 20rpx; font-weight: 500; }
  .uni-calendar--hook >>> .uni-calendar__header { height: 40px; }
  .uni-calendar--hook >>> .uni-calendar__weeks-day { height: 35px; font-weight: normal; }
  .uni-calendar--hook >>> .uni-calendar-item__weeks-box-item { height: 60rpx; width: 60rpx; }
  .uni-calendar--hook >>> .uni-calendar-item--signed .uni-calendar-item__weeks-box-item { border-radius: 60rpx; }
  .uni-calendar--hook >>> .uni-calendar-item--un-signed .uni-calendar-item__weeks-box-item { background-color: #f9ae3d; border-radius: 60rpx; }
  .uni-calendar--hook >>> .uni-calendar-item--signed .uni-calendar-item--disable,
  .uni-calendar--hook >>> .uni-calendar-item--un-signed .uni-calendar-item--disable { background-color: transparent; }
  .uni-calendar--hook >>> .uni-calendar-item--signed .uni-calendar-item--extra,
  .uni-calendar--hook >>> .uni-calendar-item--un-signed .uni-calendar-item--extra { display: none; }
  .uni-calendar--hook >>> .uni-calendar-item--signed .uni-calendar-item__weeks-box-text,
  .uni-calendar--hook >>> .uni-calendar-item--un-signed .uni-calendar-item__weeks-box-text { color: #fff; }
  .uni-calendar--hook >>> .uni-calendar-item--isDay { background-color: transparent; color: #f9ae3d; opacity: 1; line-height: normal; }
  .uni-calendar--hook >>> .uni-calendar-item--isDay-text { color: #333; }
  .uni-calendar--hook >>> .uni-calendar-item__weeks-box-circle { background-color: #f9ae3d; display: none; }
  .uni-calendar--hook >>> .uni-calendar-item--checked { background-color: transparent; color: #333; opacity: 1; }
</style>

Focus‑training chart : instead of a third‑party library, the author uses the official echarts‑for‑weixin component to render a pie chart. The chart template and script are shown below:

<template>
  <uni-ec-canvas class="uni-ec-canvas" id="day-canvas" ref="dayCanvas" canvas-id="day-canvas" :ec="ec"></uni-ec-canvas>
</template>
<script>
export default {
  data() {
    return {
      ec: { lazyLoad: true },
      optionDay: {
        color: [],
        series: [{
          type: 'pie',
          data: [],
          label: { formatter: params => { /* format time */ } },
          radius: '70%'
        }]
      }
    };
  },
  methods: {
    getDetails() {
      this.$nextTick(() => {
        setTimeout(() => {
          this.$refs.dayCanvas.init(this.initDayChart);
        }, 300);
      });
    }
  }
};
</script>

Additional features : the personal center allows users to join a group for shared check‑ins, record logs, and even share bonus rewards for early‑morning check‑ins.