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.