stacks-calendar

$npx mdskill add stacksjs/stacks/stacks-calendar

Generate calendar event export URLs for Google, Outlook, Yahoo, or ICS.

  • Creates calendar links for sharing events across providers.
  • Depends on @stacksjs/calendar-api and CalendarLink interface.
  • Uses event properties like title, time, timezone, and address.
  • Returns provider-specific URLs or ICS file content.

SKILL.md

.github/skills/stacks-calendarView on GitHub ↗
---
name: stacks-calendar
description: Use when working with calendar functionality in Stacks — exporting events to Google Calendar, Outlook, Yahoo, or ICS format, the CalendarLink interface for event definitions, timezone handling, all-day events, or calendar URL generation. Covers @stacksjs/calendar-api.
license: MIT
compatibility: Bun >= 1.3.0, TypeScript
allowed-tools: Read Edit Write Bash Grep Glob
---

# Stacks Calendar

Calendar event export to 4 calendar providers.

## Key Paths
- Core package: `storage/framework/core/calendar/src/`
- Package: `@stacksjs/calendar-api`

## Export Functions

```typescript
import { exportCalendarGoogle, exportCalendarIcs, exportCalendarOutlook, exportCalendarYahoo } from '@stacksjs/calendar-api'

const event: CalendarLink = {
  title: 'Team Meeting',
  description: 'Weekly standup',
  from: new Date('2024-06-15T10:00:00'),
  to: new Date('2024-06-15T11:00:00'),
  address: '123 Main St, City',
  timezone: 'America/New_York',
  allDay: false
}

// Generate URLs
const googleUrl = exportCalendarGoogle(event)
// → https://calendar.google.com/calendar/render?action=TEMPLATE&text=...

const icsContent = exportCalendarIcs(event)
// → BEGIN:VCALENDAR\nBEGIN:VEVENT\n...

const outlookUrl = exportCalendarOutlook(event)
// → https://outlook.live.com/calendar/0/deeplink/compose?...

const yahooUrl = exportCalendarYahoo(event)
// → https://calendar.yahoo.com/?v=60&title=...
```

## CalendarLink Interface

```typescript
interface CalendarLink {
  title: string
  description?: string
  from: Date              // start time
  to: Date                // end time
  allDay?: boolean        // all-day event (ignores time)
  address?: string        // location
  timezone?: string       // IANA timezone (e.g., 'America/New_York')
}
```

## Calendar Store Types

```typescript
interface CalendarStore {
  day: number
  month: number
  year: number
  currentMonthYear: string
  datesOfMonth: number[]
  currentWeekView: WeekDates[]
}

interface Events {
  date: string
  title: string
  description?: string
  month: number
  day: number
  year: number
  time?: Time
}

interface Time { from: string, to: string }
interface WeekDates { month: number, date: number }
```

## All-Day Events

```typescript
const allDayEvent: CalendarLink = {
  title: 'Company Holiday',
  from: new Date('2024-12-25'),
  to: new Date('2024-12-25'),
  allDay: true  // only date matters, no time component
}
```

## Format Differences

| Feature | Google | ICS | Outlook | Yahoo |
|---------|--------|-----|---------|-------|
| URL-based | Yes | No (file) | Yes | Yes |
| Timezone | URL param | VTIMEZONE | URL param | URL param |
| All-day | Date only | DATE value | isAllDay=true | st= format |
| Description | details= | DESCRIPTION | body= | desc= |

## Gotchas
- Note package name is `@stacksjs/calendar-api` (not `@stacksjs/calendar`)
- ICS export returns file content (not a URL) — serve as `.ics` download
- All-day events use date-only format, ignoring time components
- Timezone handling varies by provider — ICS includes VTIMEZONE block
- Google Calendar uses UTC format in URLs
- For task scheduling (cron), use `@stacksjs/scheduler` instead
- ICS generates a unique UID per event for calendar deduplication

More from stacksjs/stacks

SkillDescription
stacks-actionsUse when working with Stacks server actions — creating actions in app/Actions/, auto-generated API actions from the useApi model trait, the 80+ default framework actions (auth, dashboard, commerce, content, deployment, jobs), action request/response handling, or action registration. Covers @stacksjs/actions and storage/framework/defaults/actions/.
stacks-aiUse when integrating AI capabilities into a Stacks application — using Anthropic/OpenAI/Ollama/AWS Bedrock drivers, image generation (DALL-E), vision analysis, RAG/vector search, embeddings, MCP (Model Context Protocol) clients, text summarization, sentiment analysis, content classification, personalization, or the buddy AI assistant. Covers @stacksjs/ai and config/ai.ts.
stacks-aliasUse when working with path aliases in a Stacks project — import resolution, module aliasing, or debugging import paths. Covers @stacksjs/alias which defines 260+ path mappings for the entire framework.
stacks-analyticsUse when adding analytics to a Stacks application — configuring Fathom or self-hosted analytics, generating tracking scripts, privacy-friendly analytics setup, or the analytics configuration. Covers @stacksjs/analytics and config/analytics.ts.
stacks-apiUse when building, modifying, or debugging API endpoints in a Stacks application — defining routes, handling requests, API middleware, working with the API server, HTTP client (fetcher), API resources, or OpenAPI generation. Covers both @stacksjs/api utilities and the stacks-api server implementation.
stacks-arraysUse when working with array utilities in Stacks — statistical operations (average, median, mode, standard deviation, z-score, percentile, covariance), array manipulation (unique, flatten, partition, shuffle, sample, move), containment checks, or the Arr facade. Covers @stacksjs/arrays.
stacks-authUse when implementing authentication, authorization, passkeys, TOTP/2FA, RBAC, gates, policies, session auth, token management, email verification, password resets, or rate limiting in a Stacks application. Covers the @stacksjs/auth package, config/auth.ts, app/Gates.ts, and app/Middleware/.
stacks-auto-importsUse when working with the Stacks auto-import system — understanding how browser and server auto-imports work, configuring auto-imported functions/models/composables, the auto-import manifests, type generation, or how globals are injected. Covers the auto-import pipeline at storage/framework/auto-imports/.
stacks-brandkitUse when defining or exploring a brand identity for a Stacks project and you want premium brand-kit REFERENCE IMAGES first - logo directions, palettes, typography specimens, identity boards, and application/mockup decks. Generates IMAGES ONLY, never code. Trained for minimalist, cinematic, editorial, dark-tech, luxury, cultural, security, gaming, developer-tool, and consumer-app brand systems with intentional logo concepting, sparse type, strong symbolic meaning, and disciplined palettes a coding step can build against.
stacks-browseUse for headless browser QA on Stacks applications — navigation, screenshots, responsive testing, console/network monitoring, and accessibility snapshots. Dependency-free: drives a system browser over the Chrome DevTools Protocol using only Bun (no Playwright/Puppeteer). Invoke with /stacks-browse.