Your First App

Let's build a simple calendar navigation to understand useTemporal's power.

Basic Setup

First, create a temporal instance:

import { createTemporal, usePeriod, divide } from '@allystudio/usetemporal'

// Create temporal instance
const temporal = createTemporal()

// Get current month
const month = usePeriod(temporal, 'month')

// Divide into days
const days = divide(temporal.adapter, month.value, 'day')

console.log(`${month.value.date.toLocaleDateString('en', { month: 'long', year: 'numeric' })}`)
console.log(`This month has ${days.length} days`)

Add Navigation

Navigate between time periods:

import { next, previous, go } from '@allystudio/usetemporal'

// Navigate to next month
temporal.browsing.value = next(temporal.adapter, month.value)

// Navigate to previous month  
temporal.browsing.value = previous(temporal.adapter, month.value)

// Jump 3 months ahead
temporal.browsing.value = go(temporal.adapter, month.value, 3)

Simple Calendar Component

Here's a minimal calendar showing the divide pattern:

<template>
  <div>
    <header>
      <button @click="goMonth(-1)">←</button>
      <h2>{{ monthName }}</h2>
      <button @click="goMonth(1)">→</button>
    </header>
    
    <div class="days">
      <div v-for="day in days" :key="day.date.toISOString()">
        {{ day.date.getDate() }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { createTemporal, usePeriod, divide, go } from '@allystudio/usetemporal'

const temporal = createTemporal()
const month = usePeriod(temporal, 'month')
const days = computed(() => divide(temporal.adapter, month.value, 'day'))

const monthName = computed(() => 
  month.value.date.toLocaleDateString('en', { 
    month: 'long', 
    year: 'numeric' 
  })
)

function goMonth(direction) {
  temporal.browsing.value = go(temporal.adapter, month.value, direction)
}
</script>

<style scoped>
.days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
</style>

What's Happening?

1. Reactive Updates: When temporal.browsing changes, month updates automatically
2. Automatic Recalculation: The days computed property recalculates when month changes
3. Clean Navigation: The go() function creates new periods without mutations

Try These Experiments

1. Show week numbers:

const weeks = divide(temporal.adapter, month.value, 'week')
console.log(`This month spans ${weeks.length} weeks`)

2. Highlight today:

import { isSame } from '@allystudio/usetemporal'

const isToday = (day) => 
  isSame(temporal.adapter, day.date, new Date(), 'day')

3. Show hours in a day:

const today = days.find(d => isToday(d))
const hours = divide(temporal.adapter, today, 'hour')

Next Steps

• See Complete Examples for full implementations
• Learn about Operations
• Explore Date Adapters