WEB APPLICATION · PRODUCT DESIGN

CANVAS CALENDAR

Canvas Calendar is a desktop-first student calendar designed to reduce the visual clutter of the default Canvas LMS calendar. It emphasizes the current and upcoming weeks, makes courses easier to distinguish, and surfaces the assignments that need attention first.

React · TypeScript · Vite · ical.js · Cloudflare Workers · HTML/CSS

Fictional Fall 2027 calendar with course chips, highlighted weeks, and Due Soon sidebar
Fictional Chemistry assignment details with local completion control

PROJECT SNAPSHOT

A clearer view of the work ahead

Type
Web Application · Product Design
Status
Live desktop-first v1.0
Technologies
React, TypeScript, Vite, ical.js, Cloudflare Workers, HTML/CSS
  • Canvas ICS calendar integration
  • Course color customization
  • Due Soon and Overdue prioritization
  • Local assignment completion
  • Manual assignment creation
  • Course filtering
  • Backup and restore
  • Responsive calendar interface
LIVE DEMO
Assignment interaction with due date and personal completion status Demo course settings with Chemistry color customization palette

Problem

The default Canvas calendar presents many assignments with similar visual weight, making it difficult to quickly identify courses and prioritize upcoming work.

Solution

I designed a simpler month-focused interface using clear course colors, an urgency-based Due Soon list, local assignment completion, and progressive disclosure for assignments further in the future.