A habit tracker running in the Obsidian Datacore plugin that saves daily habit records directly in the frontmatter of your daily notes, providing a visual tracking interface.
Based on this code, the following modifications were made:
- Split the JS and CSS code into separate files
- Add dark/light theme adaptation
- Change the habits frontmatter to array format while maintaining backward compatibility with the previous object format
- Habit Check-in - Click habit cards to toggle between completed/incomplete status
- Value Recording - Record specific values for each habit (pages, minutes, miles, hours)
- Calendar View - Display habit completion status for the last 6 days
- Statistics & Analytics - View habit trends, monthly/yearly goal progress
- Historical Data - Browse and edit all historical records
| Habit | ID | Unit | Default Value |
|---|---|---|---|
| π Reading | reading |
pages | 25 pages |
| π§ββοΈ Meditation | meditation |
minutes | 20 minutes |
| ποΈ Weight Lifting | weightlifting |
minutes | 45 minutes |
| πββοΈ Run | run |
miles | 2 miles |
| βοΈ Writing | writing |
minutes | 30 minutes |
| π΄ Sleep | sleep |
hours | 8 hours |
- Monthly Perfect Days Goal: 20 days (all habits completed)
- Yearly Perfect Days Goal: 250 days
Notes/Daily Notes/YYYY-MM-DD.md
---
created: 2026-04-14
tags:
- daily
habits:
- reading: true
- reading_duration: 25
- meditation: true
- meditation_duration: 20
- weightlifting: true
- weightlifting_duration: 45
- writing: true
- writing_duration: 30
- run: true
- run_duration: 2
- sleep: true
- sleep_duration: 8
---- Habit Status:
truemeans completed,falsemeans incomplete - Value Fields: Format is
{habitID}_duration - Incomplete habits: Can be omitted from frontmatter
- Array format: Habits are stored in array format (backward compatible with object format)
- Displays current date
- Arrow buttons to switch dates
- Date format:
MMMM dd, yyyy(e.g., April 14, 2026)
- Shows last 6 days (today + previous 5 days)
- 3x2 grid layout
- Each card shows:
- Day of week and date
- 6 habit buttons (click to toggle)
- Completion progress bar and percentage
- Selected date has highlighted border
- Goal Progress Cards:
- Monthly perfect days progress
- Yearly perfect days progress
- Current perfect day streak
- Detailed Habit Statistics (individual cards per habit):
- Last 30 days total
- Year-to-Date (YTD) total
- Trend percentage (β/β)
- Table showing all daily notes
- 20 records per page with pagination
- Direct editing in table:
- Click β/β to toggle habit status
- Click values to modify specific amounts
- Displays daily completion percentage
- Toggle Habits: Click habit cards to toggle completion status
- Modify Values: Click on completed habit values, enter new value, press Enter or blur to save
- Auto-save: All changes are immediately written to frontmatter
- Datacore plugin installed and enabled
Notes/Daily Notes/folder exists
- Create a
habit-tracker.cssfile and paste the CSS code into it, Put the CSS file in.obsidian/snippetsand enable it viaSettings β Appearance β CSS snippets - Create a
habit-tracker.mdfile and paste the JS code into it
```datacorejsx
[paste js code]
```- Ensure daily note files exist
- Click habit cards to start checking in
- Values will auto-populate with defaults
- Click values to modify to actual amounts
Edit the HABITS constant:
const HABITS = [
{ id: 'reading', emoji: 'π', label: 'Pages', defaultDuration: 25, unit: 'pages' },
// Add new habit
{ id: 'newhabit', emoji: 'π―', label: 'New Habit', defaultDuration: 10, unit: 'minutes' }
];Edit the GOALS constant:
const GOALS = {
perfectDays: {
monthly: 20, // Modify monthly goal
yearly: 250 // Modify yearly goal
}
};Change the loop count in CalendarView component:
for (let i = 0; i < 6; i++) { // 6 = number of days to display
dates.push(currentDate.minus({ days: i }));
}In HistoricalView component:
const itemsPerPage = 20; // Change to desired numberThe code uses Obsidian's CSS variables and automatically adapts to dark/light themes:
var(--background-primary)- Main backgroundvar(--background-secondary)- Secondary backgroundvar(--text-normal)- Normal textvar(--interactive-accent)- Accent colorvar(--color-green/red/yellow)- Progress bar colors
When you switch Obsidian themes, the interface colors will automatically follow.
Use the historical data view to quickly modify multiple days of habit records without opening each note file.
Check YTD data in the statistics view to understand annual habit completion.
Completing all 6 habits earns a "Perfect Day," automatically counted and displayed in goal progress.
- Reading: Record actual pages read
- Exercise: Record duration (minutes)
- Running: Record mileage (miles)
- Sleep: Record hours
- File Path: Ensure daily notes are in
Notes/Daily Notes/path - File Naming: Must use
YYYY-MM-DDformat - Datacore Plugin: Must be enabled and properly configured
- Array Format: New data saves as array format, old data automatically compatible
- Performance: Pagination provides smoother browsing with large amounts of historical data
- Morning: Open habit tracker, click completed habits (e.g., Sleep)
- Daytime: After completing exercise, click and modify actual duration
- Evening: Record reading pages, meditation duration, etc.
- Weekend: Check statistics view, analyze weekly completion
- Month End: Review monthly perfect days goal progress
Q: Clicking habits doesn't respond? A: Check if file path is correct and note files exist.
Q: Modified values not saving? A: Press Enter or click elsewhere to blur the input field.
Q: Historical data not showing? A: Check if daily note frontmatter format is correct.
Q: Colors incorrect in dark mode? A: Ensure separate CSS file is used or code includes complete styles.
Free to use, modify, and share.
Enjoy your habit tracking journey! π―