Skip to main content
The clock store manages the application’s current time and date, integrating with the Bell schedule system to provide real-time period information and countdown timers.

​
State Properties

​
urlDate
Ref<Date>
The base date parsed from URL query parameters. Used as the starting point for time calculations.
​
clockMode
'current' | 'day'
Determines how the clock behaves:
  • 'current': Live countdown mode with real-time updates
  • 'day': Day overview mode showing the full day schedule at 0:00
​
startTime
number
Timestamp (milliseconds) when the clock was started or reset.
​
currentTime
Ref<number>
Current timestamp (milliseconds) updated every second by the clock interval.

​
Computed Properties

​
date

const date: ComputedRef<Date>
The current application date, calculated by adding the elapsed time since startTime to urlDate. In 'day' mode, returns the date normalized to midnight (0:00). 
const date = computed((): Date => {
  const d = new Date(urlDate.value.getTime() + (currentTime.value - startTime.value));
  if (clockMode.value === 'current') return d;
  const normalized = new Date(d);
  normalized.setHours(0, 0, 0, 0);
  return normalized;
});

​
bell

const bell: ComputedRef<Bell>
A Bell instance for the current date, automatically updated with the current schedules and selected schedule mode. This provides access to period information, countdown timers, and schedule data. 
const bell = computed((): Bell => {
  return new Bell(date.value, scheduleStore.schedules, scheduleStore.scheduleMode);
});

​
Actions

​
pageLoaded

function pageLoaded(route: RouteLocationNormalized): void
Initializes the clock when a page loads. Sets the start time, starts the clock interval, determines the mode from route parameters, and parses the date/time from the URL.
​
route
RouteLocationNormalized
required
The current route object containing query parameters for date and time.
Query Parameters:
  • date: Triggers day mode (format: MM/DD/YYYY or MM-DD-YYYY)
  • time: Forces current mode and sets a specific time (format: HH:MM:SS or HH.MM.SS)
import useClockStore from '@/stores/clock';

export default {
  setup() {
    const clockStore = useClockStore();
    const route = useRoute();
    
    onMounted(() => {
      clockStore.pageLoaded(route);
    });
  }
}

​
startClock

function startClock(): void
Starts the clock interval, updating currentTime every second. Automatically stops any existing interval before starting a new one. 
import useClockStore from '@/stores/clock';

const clockStore = useClockStore();
clockStore.startClock(); // Begin live updates

​
stopClock

function stopClock(): void
Stops the clock interval, freezing the current time. Useful when switching to day mode or when pausing time updates. 
clockStore.stopClock(); // Pause time updates

​
setStartTime

function setStartTime(): void
Sets the startTime to the current timestamp. Called when resetting the clock or initializing.

​
setModeFromRoute

function setModeFromRoute(route: RouteLocationNormalized): void
Determines the clock mode based on URL query parameters:
  • If date parameter exists (without time): Sets to 'day' mode
  • If time parameter exists or no date: Sets to 'current' mode
​
route
RouteLocationNormalized
required
The route object to parse for mode determination.

​
Integration with Bell

The clock store works seamlessly with the Bell utility to provide real-time schedule information: 
import useClockStore from '@/stores/clock';

export default {
  setup() {
    const clockStore = useClockStore();
    const route = useRoute();
    
    // Initialize clock
    onMounted(() => {
      clockStore.pageLoaded(route);
    });
    
    // Access current period info
    const currentPeriod = computed(() => clockStore.bell.period);
    const isSchoolDay = computed(() => clockStore.bell.isSchoolDay);
    const secondsUntilNext = computed(() => 
      clockStore.bell.getSecondsUntilNextTarget()
    );
    
    return {
      currentPeriod,
      isSchoolDay,
      secondsUntilNext
    };
  }
}

​
Common Use Cases

import useClockStore from '@/stores/clock';

const clockStore = useClockStore();
const route = useRoute();

onMounted(() => {
  clockStore.pageLoaded(route);
});

// Get seconds until next period change
const countdown = computed(() => {
  return clockStore.bell.getSecondsUntilNextTarget();
});

const currentPeriod = computed(() => {
  const period = clockStore.bell.period;
  if (!period || 'beforeSchool' in period) return 'Before School';
  if ('afterSchool' in period) return 'After School';
  return period.name;
});

// Navigate with query params for testing
router.push({ 
  query: { 
    date: '03-15-2026',
    time: '10:30:00'
  }
});

// Clock will initialize with this date/time

​
Type Definitions

type ClockMode = 'current' | 'day';

interface ClockStore {
  urlDate: Ref<Date>;
  clockMode: Ref<ClockMode>;
  startTime: Ref<number>;
  currentTime: Ref<number>;
  date: ComputedRef<Date>;
  bell: ComputedRef<Bell>;
  pageLoaded(route: RouteLocationNormalized): void;
  stopClock(): void;
  startClock(): void;
  setStartTime(): void;
  setModeFromRoute(route: RouteLocationNormalized): void;
}
The clock store is initialized on page load and maintains a 1-second update interval when in 'current' mode. Always call pageLoaded() in your component’s onMounted hook.

Build docs developers (and LLMs) love

Get started for freeTalk to us