Linear Calendar

A Val Town project that integrates Linear tasks with Google Calendar. View your current cycle tasks and drag them onto a calendar to schedule your day.

Features

  • šŸ“‹ View current cycle tasks from Linear (status, project, priority)
  • šŸ“… Weekly calendar view with Linear-inspired dark theme
  • šŸ–±ļø Drag & drop tasks onto the calendar to schedule
  • ā±ļø 30-minute default duration for new events
  • šŸ“ Resize events by dragging the bottom edge
  • šŸ”„ Real-time sync with Google Calendar

Environment Variables

Set these in your Val Town environment:

LINEAR_API_KEY=lin_api_xxxxx
GOOGLE_CLIENT_ID=xxxxx.apps.googleusercontent.com
GOOGLE_CLIENT_SECRET=GOCSPX-xxxxx
GOOGLE_REFRESH_TOKEN=1//xxxxx

Project Structure

general-asks/
ā”œā”€ā”€ backend/
│   ā”œā”€ā”€ database/
│   │   ā”œā”€ā”€ migrations.ts
│   │   └── queries.ts
│   ā”œā”€ā”€ routes/
│   │   ā”œā”€ā”€ linear.ts
│   │   └── calendar.ts
│   └── index.ts          # Main HTTP entry point
ā”œā”€ā”€ frontend/
│   ā”œā”€ā”€ components/
│   │   ā”œā”€ā”€ App.tsx
│   │   ā”œā”€ā”€ Calendar.tsx
│   │   ā”œā”€ā”€ CalendarEvent.tsx
│   │   ā”œā”€ā”€ TaskDetail.tsx
│   │   ā”œā”€ā”€ TaskItem.tsx
│   │   └── TaskList.tsx
│   ā”œā”€ā”€ favicon.svg
│   ā”œā”€ā”€ index.html
│   └── index.tsx
ā”œā”€ā”€ shared/
│   └── types.ts
└── README.md

Usage

  1. Push to Val Town: vt push
  2. Set backend/index.ts as an HTTP val in the Val Town dashboard
  3. Set environment variables in Val Town dashboard
  4. Access your val's URL to use the app