diff --git a/backend/src/Taskdeck.Api/Controllers/WorkspaceController.cs b/backend/src/Taskdeck.Api/Controllers/WorkspaceController.cs
index 0a9302661..e3483712d 100644
--- a/backend/src/Taskdeck.Api/Controllers/WorkspaceController.cs
+++ b/backend/src/Taskdeck.Api/Controllers/WorkspaceController.cs
@@ -74,4 +74,33 @@ public async Task<IActionResult> UpdateOnboarding(
         var result = await _workspaceService.UpdateOnboardingAsync(userId, dto, cancellationToken);
         return result.IsSuccess ? Ok(result.Value) : result.ToErrorActionResult();
     }
+
+    /// <summary>
+    /// Get cards with due dates within the specified date range across all accessible boards.
+    /// Returns calendar items suitable for calendar/timeline visualization.
+    /// </summary>
+    /// <param name="from">Start of the date range (inclusive). Defaults to start of current month.</param>
+    /// <param name="to">End of the date range (exclusive). Defaults to end of current month.</param>
+    /// <response code="200">Returns calendar cards for the date range.</response>
+    /// <response code="400">Invalid date range (from >= to or span > 90 days).</response>
+    /// <response code="401">Authentication required.</response>
+    [HttpGet("calendar")]
+    [ProducesResponseType(typeof(WorkspaceCalendarDto), StatusCodes.Status200OK)]
+    [ProducesResponseType(StatusCodes.Status400BadRequest)]
+    [ProducesResponseType(StatusCodes.Status401Unauthorized)]
+    public async Task<IActionResult> GetCalendar(
+        [FromQuery] DateTimeOffset? from,
+        [FromQuery] DateTimeOffset? to,
+        CancellationToken cancellationToken = default)
+    {
+        if (!TryGetCurrentUserId(out var userId, out var errorResult))
+            return errorResult!;
+
+        var now = DateTimeOffset.UtcNow;
+        var effectiveFrom = from ?? new DateTimeOffset(now.Year, now.Month, 1, 0, 0, 0, TimeSpan.Zero);
+        var effectiveTo = to ?? effectiveFrom.AddMonths(1);
+
+        var result = await _workspaceService.GetCalendarAsync(userId, effectiveFrom, effectiveTo, cancellationToken);
+        return result.IsSuccess ? Ok(result.Value) : result.ToErrorActionResult();
+    }
 }
diff --git a/backend/src/Taskdeck.Application/DTOs/WorkspaceDtos.cs b/backend/src/Taskdeck.Application/DTOs/WorkspaceDtos.cs
index f070e8223..ccc5e7bfb 100644
--- a/backend/src/Taskdeck.Application/DTOs/WorkspaceDtos.cs
+++ b/backend/src/Taskdeck.Application/DTOs/WorkspaceDtos.cs
@@ -85,3 +85,22 @@ public record WorkspaceNextActionDto(
     string TargetSurface,
     Guid? BoardId = null,
     int? AttentionCount = null);
+
+public record WorkspaceCalendarCardDto(
+    Guid CardId,
+    Guid BoardId,
+    string BoardName,
+    Guid ColumnId,
+    string ColumnName,
+    string Title,
+    DateTimeOffset DueDate,
+    bool IsBlocked,
+    string? BlockReason,
+    bool IsOverdue,
+    DateTimeOffset UpdatedAt);
+
+public record WorkspaceCalendarDto(
+    DateTimeOffset From,
+    DateTimeOffset To,
+    int TotalCards,
+    IReadOnlyList<WorkspaceCalendarCardDto> Cards);
diff --git a/backend/src/Taskdeck.Application/Interfaces/ICardRepository.cs b/backend/src/Taskdeck.Application/Interfaces/ICardRepository.cs
index 6522e2dbe..bae234f30 100644
--- a/backend/src/Taskdeck.Application/Interfaces/ICardRepository.cs
+++ b/backend/src/Taskdeck.Application/Interfaces/ICardRepository.cs
@@ -41,4 +41,14 @@ Task<IEnumerable<Card>> GetBlockedByBoardIdAsync(
         Guid boardId,
         Guid? labelId = null,
         CancellationToken cancellationToken = default);
+
+    /// <summary>
+    /// Get cards with due dates falling within the specified date range across multiple boards.
+    /// Returns cards ordered by due date ascending.
+    /// </summary>
+    Task<IEnumerable<Card>> GetByDueDateRangeAsync(
+        IEnumerable<Guid> boardIds,
+        DateTimeOffset from,
+        DateTimeOffset to,
+        CancellationToken cancellationToken = default);
 }
diff --git a/backend/src/Taskdeck.Application/Services/IWorkspaceService.cs b/backend/src/Taskdeck.Application/Services/IWorkspaceService.cs
index ea5799f77..7af64a7d0 100644
--- a/backend/src/Taskdeck.Application/Services/IWorkspaceService.cs
+++ b/backend/src/Taskdeck.Application/Services/IWorkspaceService.cs
@@ -16,4 +16,9 @@ Task<Result<WorkspaceOnboardingDto>> UpdateOnboardingAsync(
         Guid userId,
         UpdateWorkspaceOnboardingDto dto,
         CancellationToken cancellationToken = default);
+    Task<Result<WorkspaceCalendarDto>> GetCalendarAsync(
+        Guid userId,
+        DateTimeOffset from,
+        DateTimeOffset to,
+        CancellationToken cancellationToken = default);
 }
diff --git a/backend/src/Taskdeck.Application/Services/WorkspaceService.cs b/backend/src/Taskdeck.Application/Services/WorkspaceService.cs
index 41259f53a..6e05503e6 100644
--- a/backend/src/Taskdeck.Application/Services/WorkspaceService.cs
+++ b/backend/src/Taskdeck.Application/Services/WorkspaceService.cs
@@ -252,6 +252,61 @@ public async Task<Result<WorkspaceOnboardingDto>> UpdateOnboardingAsync(
         return Result.Success(onboarding);
     }
 
+    public async Task<Result<WorkspaceCalendarDto>> GetCalendarAsync(
+        Guid userId,
+        DateTimeOffset from,
+        DateTimeOffset to,
+        CancellationToken cancellationToken = default)
+    {
+        if (userId == Guid.Empty)
+            return Result.Failure<WorkspaceCalendarDto>(ErrorCodes.ValidationError, "User ID cannot be empty");
+
+        if (from >= to)
+            return Result.Failure<WorkspaceCalendarDto>(ErrorCodes.ValidationError, "The 'from' date must be before the 'to' date");
+
+        // Cap range to 90 days to prevent unbounded queries
+        var maxRange = TimeSpan.FromDays(90);
+        if (to - from > maxRange)
+            return Result.Failure<WorkspaceCalendarDto>(ErrorCodes.ValidationError, "Date range cannot exceed 90 days");
+
+        var accessibleBoards = (await _unitOfWork.Boards.GetReadableByUserIdAsync(
+                userId,
+                includeArchived: false,
+                cancellationToken))
+            .ToList();
+
+        if (accessibleBoards.Count == 0)
+        {
+            return Result.Success(new WorkspaceCalendarDto(from, to, 0, []));
+        }
+
+        var cards = (await _unitOfWork.Cards.GetByDueDateRangeAsync(
+                accessibleBoards.Select(b => b.Id),
+                from,
+                to,
+                cancellationToken))
+            .ToList();
+
+        var referenceTime = DateTimeOffset.UtcNow;
+
+        var calendarCards = cards
+            .Select(c => new WorkspaceCalendarCardDto(
+                c.Id,
+                c.BoardId,
+                c.Board?.Name ?? "Unknown",
+                c.ColumnId,
+                c.Column?.Name ?? "Unknown",
+                c.Title,
+                c.DueDate!.Value,
+                c.IsBlocked,
+                c.BlockReason,
+                ResolveDueBucket(c.DueDate, referenceTime) == TodayDueBucket.Overdue,
+                c.UpdatedAt))
+            .ToList();
+
+        return Result.Success(new WorkspaceCalendarDto(from, to, calendarCards.Count, calendarCards));
+    }
+
     private async Task<UserPreference> EnsurePreferenceAsync(Guid userId, CancellationToken cancellationToken)
     {
         return await _unitOfWork.UserPreferences.GetOrCreateDefaultByUserIdAsync(userId, cancellationToken);
diff --git a/backend/src/Taskdeck.Infrastructure/Repositories/CardRepository.cs b/backend/src/Taskdeck.Infrastructure/Repositories/CardRepository.cs
index d15973a55..bab5f4864 100644
--- a/backend/src/Taskdeck.Infrastructure/Repositories/CardRepository.cs
+++ b/backend/src/Taskdeck.Infrastructure/Repositories/CardRepository.cs
@@ -237,4 +237,35 @@ public async Task<IEnumerable<Card>> GetBlockedByBoardIdAsync(
 
         return await query.ToListAsync(cancellationToken);
     }
+
+    public async Task<IEnumerable<Card>> GetByDueDateRangeAsync(
+        IEnumerable<Guid> boardIds,
+        DateTimeOffset from,
+        DateTimeOffset to,
+        CancellationToken cancellationToken = default)
+    {
+        var materializedBoardIds = boardIds
+            .Where(id => id != Guid.Empty)
+            .Distinct()
+            .ToList();
+
+        if (materializedBoardIds.Count == 0)
+            return [];
+
+        const int maxResults = 500;
+
+        return await _dbSet
+            .AsNoTracking()
+            .Where(c =>
+                materializedBoardIds.Contains(c.BoardId) &&
+                c.DueDate.HasValue &&
+                c.DueDate.Value >= from &&
+                c.DueDate.Value < to)
+            .Include(c => c.Board)
+            .Include(c => c.Column)
+            .OrderBy(c => c.DueDate)
+            .ThenBy(c => c.BoardId)
+            .Take(maxResults)
+            .ToListAsync(cancellationToken);
+    }
 }
diff --git a/backend/tests/Taskdeck.Application.Tests/Services/WorkspaceServiceTests.cs b/backend/tests/Taskdeck.Application.Tests/Services/WorkspaceServiceTests.cs
index aef8fbaf6..bfac477e7 100644
--- a/backend/tests/Taskdeck.Application.Tests/Services/WorkspaceServiceTests.cs
+++ b/backend/tests/Taskdeck.Application.Tests/Services/WorkspaceServiceTests.cs
@@ -463,4 +463,175 @@ public async Task UpdateOnboardingAsync_ShouldDismissAndReplayState()
         replayResult.Value.Visibility.Should().Be(WorkspaceOnboardingVisibilityContract.Active);
         preference.OnboardingDismissedAt.Should().BeNull();
     }
+
+    // ── GetCalendarAsync ──────────────────────────────────────────────────────────
+
+    [Fact]
+    public async Task GetCalendarAsync_ShouldReturnValidationError_WhenUserIdIsEmpty()
+    {
+        var result = await _service.GetCalendarAsync(
+            Guid.Empty,
+            DateTimeOffset.UtcNow,
+            DateTimeOffset.UtcNow.AddDays(30));
+
+        result.IsSuccess.Should().BeFalse();
+        result.ErrorCode.Should().Be(ErrorCodes.ValidationError);
+        result.ErrorMessage.Should().Contain("User ID cannot be empty");
+    }
+
+    [Fact]
+    public async Task GetCalendarAsync_ShouldReturnValidationError_WhenFromIsAfterTo()
+    {
+        var userId = Guid.NewGuid();
+        var now = DateTimeOffset.UtcNow;
+
+        var result = await _service.GetCalendarAsync(userId, now.AddDays(10), now);
+
+        result.IsSuccess.Should().BeFalse();
+        result.ErrorCode.Should().Be(ErrorCodes.ValidationError);
+        result.ErrorMessage.Should().Contain("'from' date must be before the 'to' date");
+    }
+
+    [Fact]
+    public async Task GetCalendarAsync_ShouldReturnValidationError_WhenRangeExceeds90Days()
+    {
+        var userId = Guid.NewGuid();
+        var from = DateTimeOffset.UtcNow;
+        var to = from.AddDays(91);
+
+        var result = await _service.GetCalendarAsync(userId, from, to);
+
+        result.IsSuccess.Should().BeFalse();
+        result.ErrorCode.Should().Be(ErrorCodes.ValidationError);
+        result.ErrorMessage.Should().Contain("90 days");
+    }
+
+    [Fact]
+    public async Task GetCalendarAsync_ShouldReturnEmptyResult_WhenNoAccessibleBoards()
+    {
+        var userId = Guid.NewGuid();
+        var from = DateTimeOffset.UtcNow;
+        var to = from.AddDays(30);
+
+        _boardRepositoryMock
+            .Setup(r => r.GetReadableByUserIdAsync(userId, false, default))
+            .ReturnsAsync([]);
+
+        var result = await _service.GetCalendarAsync(userId, from, to);
+
+        result.IsSuccess.Should().BeTrue();
+        result.Value.TotalCards.Should().Be(0);
+        result.Value.Cards.Should().BeEmpty();
+    }
+
+    [Fact]
+    public async Task GetCalendarAsync_ShouldReturnCardsWithDueDates()
+    {
+        var userId = Guid.NewGuid();
+        var columnId = Guid.NewGuid();
+        var from = new DateTimeOffset(2026, 4, 1, 0, 0, 0, TimeSpan.Zero);
+        var to = new DateTimeOffset(2026, 5, 1, 0, 0, 0, TimeSpan.Zero);
+
+        var board = new Board("Test Board", ownerId: userId);
+        var card = new Card(board.Id, columnId, "Test Card", dueDate: new DateTimeOffset(2026, 4, 15, 0, 0, 0, TimeSpan.Zero));
+
+        _boardRepositoryMock
+            .Setup(r => r.GetReadableByUserIdAsync(userId, false, default))
+            .ReturnsAsync(new List<Board> { board });
+
+        _cardRepositoryMock
+            .Setup(r => r.GetByDueDateRangeAsync(
+                It.IsAny<IEnumerable<Guid>>(),
+                from,
+                to,
+                default))
+            .ReturnsAsync(new List<Card> { card });
+
+        var result = await _service.GetCalendarAsync(userId, from, to);
+
+        result.IsSuccess.Should().BeTrue();
+        result.Value.TotalCards.Should().Be(1);
+        result.Value.Cards.Should().HaveCount(1);
+        result.Value.Cards[0].Title.Should().Be("Test Card");
+        result.Value.Cards[0].BoardId.Should().Be(board.Id);
+    }
+
+    [Fact]
+    public async Task GetCalendarAsync_ShouldMarkOverdueCards()
+    {
+        var userId = Guid.NewGuid();
+        var columnId = Guid.NewGuid();
+        var from = new DateTimeOffset(2020, 1, 1, 0, 0, 0, TimeSpan.Zero);
+        var to = new DateTimeOffset(2020, 2, 1, 0, 0, 0, TimeSpan.Zero);
+
+        var board = new Board("Test Board", ownerId: userId);
+        var pastDueDate = new DateTimeOffset(2020, 1, 15, 0, 0, 0, TimeSpan.Zero);
+        var card = new Card(board.Id, columnId, "Past Due Card", dueDate: pastDueDate);
+
+        _boardRepositoryMock
+            .Setup(r => r.GetReadableByUserIdAsync(userId, false, default))
+            .ReturnsAsync(new List<Board> { board });
+
+        _cardRepositoryMock
+            .Setup(r => r.GetByDueDateRangeAsync(
+                It.IsAny<IEnumerable<Guid>>(),
+                from,
+                to,
+                default))
+            .ReturnsAsync(new List<Card> { card });
+
+        var result = await _service.GetCalendarAsync(userId, from, to);
+
+        result.IsSuccess.Should().BeTrue();
+        result.Value.Cards[0].IsOverdue.Should().BeTrue();
+    }
+
+    [Fact]
+    public async Task GetCalendarAsync_ShouldIncludeBlockedStatus()
+    {
+        var userId = Guid.NewGuid();
+        var columnId = Guid.NewGuid();
+        var from = DateTimeOffset.UtcNow;
+        var to = from.AddDays(30);
+
+        var board = new Board("Test Board", ownerId: userId);
+        var card = new Card(board.Id, columnId, "Blocked Card", dueDate: from.AddDays(5));
+        card.Block("Waiting on dependency");
+
+        _boardRepositoryMock
+            .Setup(r => r.GetReadableByUserIdAsync(userId, false, default))
+            .ReturnsAsync(new List<Board> { board });
+
+        _cardRepositoryMock
+            .Setup(r => r.GetByDueDateRangeAsync(
+                It.IsAny<IEnumerable<Guid>>(),
+                from,
+                to,
+                default))
+            .ReturnsAsync(new List<Card> { card });
+
+        var result = await _service.GetCalendarAsync(userId, from, to);
+
+        result.IsSuccess.Should().BeTrue();
+        result.Value.Cards[0].IsBlocked.Should().BeTrue();
+        result.Value.Cards[0].BlockReason.Should().Be("Waiting on dependency");
+    }
+
+    [Fact]
+    public async Task GetCalendarAsync_ShouldReturnFromAndToInResponse()
+    {
+        var userId = Guid.NewGuid();
+        var from = new DateTimeOffset(2026, 4, 1, 0, 0, 0, TimeSpan.Zero);
+        var to = new DateTimeOffset(2026, 5, 1, 0, 0, 0, TimeSpan.Zero);
+
+        _boardRepositoryMock
+            .Setup(r => r.GetReadableByUserIdAsync(userId, false, default))
+            .ReturnsAsync([]);
+
+        var result = await _service.GetCalendarAsync(userId, from, to);
+
+        result.IsSuccess.Should().BeTrue();
+        result.Value.From.Should().Be(from);
+        result.Value.To.Should().Be(to);
+    }
 }
diff --git a/frontend/taskdeck-web/src/api/workspaceApi.ts b/frontend/taskdeck-web/src/api/workspaceApi.ts
index 502802f42..c979c7a70 100644
--- a/frontend/taskdeck-web/src/api/workspaceApi.ts
+++ b/frontend/taskdeck-web/src/api/workspaceApi.ts
@@ -1,5 +1,6 @@
 import http from './http'
 import type {
+  CalendarData,
   HomeSummary,
   TodaySummary,
   UpdateWorkspaceOnboardingDto,
@@ -19,6 +20,12 @@ export const workspaceApi = {
     return data
   },
 
+  async getCalendar(from: string, to: string): Promise<CalendarData> {
+    const params = new URLSearchParams({ from, to })
+    const { data } = await http.get<CalendarData>(`/workspace/calendar?${params}`)
+    return data
+  },
+
   async getPreferences(): Promise<WorkspacePreference> {
     const { data } = await http.get<WorkspacePreference>('/workspace/preferences')
     return data
diff --git a/frontend/taskdeck-web/src/components/shell/ShellSidebar.vue b/frontend/taskdeck-web/src/components/shell/ShellSidebar.vue
index c80983ab5..c8fcef9f4 100644
--- a/frontend/taskdeck-web/src/components/shell/ShellSidebar.vue
+++ b/frontend/taskdeck-web/src/components/shell/ShellSidebar.vue
@@ -151,6 +151,16 @@ const navCatalog: NavItem[] = [
     secondaryModes: ['guided', 'agent'],
     keywords: 'chat automation assistant board context',
   },
+  {
+    id: 'calendar',
+    label: 'Calendar',
+    icon: 'D',
+    path: '/workspace/calendar',
+    flag: null,
+    primaryModes: ['workbench'],
+    secondaryModes: ['guided', 'agent'],
+    keywords: 'calendar timeline planning due dates schedule deadlines',
+  },
   {
     id: 'metrics',
     label: 'Metrics',
diff --git a/frontend/taskdeck-web/src/composables/useWorkspaceHelp.ts b/frontend/taskdeck-web/src/composables/useWorkspaceHelp.ts
index 898c8ed16..0f8311c32 100644
--- a/frontend/taskdeck-web/src/composables/useWorkspaceHelp.ts
+++ b/frontend/taskdeck-web/src/composables/useWorkspaceHelp.ts
@@ -8,6 +8,7 @@ export const workspaceHelpTopics = [
   'review',
   'inbox',
   'board',
+  'calendar',
   'activity-selectors',
   'board-access-selectors',
   'saved-views',
diff --git a/frontend/taskdeck-web/src/router/index.ts b/frontend/taskdeck-web/src/router/index.ts
index 7eb6e3566..da9028bca 100644
--- a/frontend/taskdeck-web/src/router/index.ts
+++ b/frontend/taskdeck-web/src/router/index.ts
@@ -39,6 +39,7 @@ const ReviewView = () => import('../views/ReviewView.vue')
 const DevToolsView = () => import('../views/DevToolsView.vue')
 const SavedViewsView = () => import('../views/SavedViewsView.vue')
 const MetricsView = () => import('../views/MetricsView.vue')
+const CalendarView = () => import('../views/CalendarView.vue')
 const AgentsView = () => import('../views/AgentsView.vue')
 const AgentRunsView = () => import('../views/AgentRunsView.vue')
 const AgentRunDetailView = () => import('../views/AgentRunDetailView.vue')
@@ -143,6 +144,14 @@ const router = createRouter({
       meta: { requiresShell: true },
     },
 
+    // Calendar/timeline planning route
+    {
+      path: '/workspace/calendar',
+      name: 'workspace-calendar',
+      component: CalendarView,
+      meta: { requiresShell: true },
+    },
+
     // Automation routes
     {
       path: '/workspace/automations',
diff --git a/frontend/taskdeck-web/src/tests/api/workspaceApi.spec.ts b/frontend/taskdeck-web/src/tests/api/workspaceApi.spec.ts
index 444d2d628..cca82f4b8 100644
--- a/frontend/taskdeck-web/src/tests/api/workspaceApi.spec.ts
+++ b/frontend/taskdeck-web/src/tests/api/workspaceApi.spec.ts
@@ -53,4 +53,22 @@ describe('workspaceApi', () => {
 
     expect(http.put).toHaveBeenCalledWith('/workspace/onboarding', { action: 'dismiss' })
   })
+
+  it('loads calendar data with from/to parameters', async () => {
+    vi.mocked(http.get).mockResolvedValue({ data: { from: '2026-04-01', to: '2026-05-01', totalCards: 0, cards: [] } })
+
+    const from = '2026-04-01T00:00:00.000Z'
+    const to = '2026-05-01T00:00:00.000Z'
+    await workspaceApi.getCalendar(from, to)
+
+    expect(http.get).toHaveBeenCalledWith(
+      expect.stringContaining('/workspace/calendar?'),
+    )
+    expect(http.get).toHaveBeenCalledWith(
+      expect.stringContaining('from='),
+    )
+    expect(http.get).toHaveBeenCalledWith(
+      expect.stringContaining('to='),
+    )
+  })
 })
diff --git a/frontend/taskdeck-web/src/tests/router/workspaceRouteStability.spec.ts b/frontend/taskdeck-web/src/tests/router/workspaceRouteStability.spec.ts
index cc429167e..928c8f01e 100644
--- a/frontend/taskdeck-web/src/tests/router/workspaceRouteStability.spec.ts
+++ b/frontend/taskdeck-web/src/tests/router/workspaceRouteStability.spec.ts
@@ -428,6 +428,7 @@ describe('unexpected origin and path redirect protection (#687)', () => {
     '/workspace/boards',
     '/workspace/boards/board-1',
     '/workspace/metrics',
+    '/workspace/calendar',
     '/workspace/inbox',
     '/workspace/review',
     '/workspace/activity',
diff --git a/frontend/taskdeck-web/src/tests/views/CalendarView.spec.ts b/frontend/taskdeck-web/src/tests/views/CalendarView.spec.ts
new file mode 100644
index 000000000..9da4f1eed
--- /dev/null
+++ b/frontend/taskdeck-web/src/tests/views/CalendarView.spec.ts
@@ -0,0 +1,309 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import CalendarView from '../../views/CalendarView.vue'
+import type { CalendarData } from '../../types/workspace'
+
+const routerMocks = vi.hoisted(() => ({
+  push: vi.fn(),
+}))
+
+// Freeze time to April 2026 to match mock data
+const MOCK_DATE = new Date('2026-04-05T12:00:00Z')
+
+const mockCalendarData: CalendarData = {
+  from: '2026-04-01T00:00:00Z',
+  to: '2026-05-01T00:00:00Z',
+  totalCards: 3,
+  cards: [
+    {
+      cardId: 'card-1',
+      boardId: 'board-1',
+      boardName: 'Alpha Board',
+      columnId: 'col-1',
+      columnName: 'In Progress',
+      title: 'Ship feature X',
+      dueDate: '2026-04-10T00:00:00Z',
+      isBlocked: false,
+      blockReason: null,
+      isOverdue: false,
+      updatedAt: '2026-04-05T12:00:00Z',
+    },
+    {
+      cardId: 'card-2',
+      boardId: 'board-2',
+      boardName: 'Beta Board',
+      columnId: 'col-2',
+      columnName: 'Todo',
+      title: 'Fix urgent bug',
+      dueDate: '2026-04-03T00:00:00Z',
+      isBlocked: false,
+      blockReason: null,
+      isOverdue: true,
+      updatedAt: '2026-04-02T12:00:00Z',
+    },
+    {
+      cardId: 'card-3',
+      boardId: 'board-1',
+      boardName: 'Alpha Board',
+      columnId: 'col-1',
+      columnName: 'In Progress',
+      title: 'Blocked task',
+      dueDate: '2026-04-15T00:00:00Z',
+      isBlocked: true,
+      blockReason: 'Waiting on API key',
+      isOverdue: false,
+      updatedAt: '2026-04-05T12:00:00Z',
+    },
+  ],
+}
+
+const mockGetCalendar = vi.fn<(from: string, to: string) => Promise<CalendarData>>()
+
+vi.mock('../../api/workspaceApi', () => ({
+  workspaceApi: {
+    getCalendar: (...args: [string, string]) => mockGetCalendar(...args),
+  },
+}))
+
+vi.mock('vue-router', () => ({
+  useRouter: () => ({
+    push: routerMocks.push,
+  }),
+}))
+
+vi.mock('../../components/workspace/WorkspaceHelpCallout.vue', () => ({
+  default: {
+    template: '<div data-testid="workspace-help-callout" />',
+    props: ['topic', 'title', 'description'],
+  },
+}))
+
+async function waitForUi() {
+  await Promise.resolve()
+  await Promise.resolve()
+  await Promise.resolve()
+}
+
+describe('CalendarView', () => {
+  beforeEach(() => {
+    vi.useFakeTimers()
+    vi.setSystemTime(MOCK_DATE)
+    vi.clearAllMocks()
+    mockGetCalendar.mockResolvedValue(mockCalendarData)
+  })
+
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+
+  it('loads calendar data on mount', async () => {
+    mount(CalendarView)
+    await waitForUi()
+
+    expect(mockGetCalendar).toHaveBeenCalledTimes(1)
+  })
+
+  it('renders the page title and hero description', async () => {
+    const wrapper = mount(CalendarView)
+    await waitForUi()
+
+    expect(wrapper.text()).toContain('Calendar')
+    expect(wrapper.text()).toContain('Planning')
+    expect(wrapper.text()).toContain('due-date-backed work')
+  })
+
+  it('shows loading state while fetching', async () => {
+    // Never resolve
+    mockGetCalendar.mockReturnValue(new Promise(() => {}))
+    const wrapper = mount(CalendarView)
+    await waitForUi()
+
+    expect(wrapper.text()).toContain('Loading calendar data')
+  })
+
+  it('shows error state when fetch fails', async () => {
+    mockGetCalendar.mockRejectedValue(new Error('Network error'))
+    const wrapper = mount(CalendarView)
+    await waitForUi()
+
+    expect(wrapper.text()).toContain('Network error')
+  })
+
+  it('shows error state with retry button', async () => {
+    mockGetCalendar.mockRejectedValue(new Error('Server down'))
+    const wrapper = mount(CalendarView)
+    await waitForUi()
+
+    const retryBtn = wrapper.find('.td-btn--ghost.td-btn--sm')
+    expect(retryBtn.exists()).toBe(true)
+    expect(retryBtn.text()).toContain('Retry')
+  })
+
+  it('shows empty state when no cards have due dates', async () => {
+    mockGetCalendar.mockResolvedValue({
+      from: '2026-04-01T00:00:00Z',
+      to: '2026-05-01T00:00:00Z',
+      totalCards: 0,
+      cards: [],
+    })
+    const wrapper = mount(CalendarView)
+    await waitForUi()
+
+    expect(wrapper.text()).toContain('No due dates this month')
+  })
+
+  it('renders card count for the month', async () => {
+    const wrapper = mount(CalendarView)
+    await waitForUi()
+
+    expect(wrapper.text()).toContain('3 cards this month')
+  })
+
+  it('renders calendar grid with weekday headers', async () => {
+    const wrapper = mount(CalendarView)
+    await waitForUi()
+
+    const weekdays = wrapper.findAll('.td-calendar__weekday')
+    expect(weekdays).toHaveLength(7)
+    expect(weekdays[0].text()).toBe('Sun')
+    expect(weekdays[6].text()).toBe('Sat')
+  })
+
+  it('renders cards in the calendar grid', async () => {
+    const wrapper = mount(CalendarView)
+    await waitForUi()
+
+    const cardElements = wrapper.findAll('.td-cal-card')
+    expect(cardElements.length).toBeGreaterThan(0)
+    expect(wrapper.text()).toContain('Ship feature X')
+  })
+
+  it('applies overdue class to overdue cards', async () => {
+    const wrapper = mount(CalendarView)
+    await waitForUi()
+
+    const overdueCards = wrapper.findAll('.td-cal-card--overdue')
+    expect(overdueCards.length).toBeGreaterThan(0)
+  })
+
+  it('applies blocked class to blocked cards', async () => {
+    const wrapper = mount(CalendarView)
+    await waitForUi()
+
+    const blockedCards = wrapper.findAll('.td-cal-card--blocked')
+    expect(blockedCards.length).toBeGreaterThan(0)
+  })
+
+  it('navigates to board on card click in calendar grid', async () => {
+    const wrapper = mount(CalendarView)
+    await waitForUi()
+
+    const card = wrapper.find('.td-cal-card')
+    await card.trigger('click')
+
+    expect(routerMocks.push).toHaveBeenCalled()
+    const pushedPath = routerMocks.push.mock.calls[0][0] as string
+    expect(pushedPath).toMatch(/\/workspace\/boards\/board-/)
+  })
+
+  it('switches to timeline view', async () => {
+    const wrapper = mount(CalendarView)
+    await waitForUi()
+
+    const buttons = wrapper.findAll('.td-calendar__hero-actions .td-btn')
+    const timelineBtn = buttons.find(b => b.text() === 'Timeline')
+    expect(timelineBtn).toBeDefined()
+    await timelineBtn!.trigger('click')
+
+    expect(wrapper.findAll('.td-timeline-group').length).toBeGreaterThan(0)
+  })
+
+  it('renders timeline cards with status indicators', async () => {
+    const wrapper = mount(CalendarView)
+    await waitForUi()
+
+    // Switch to timeline
+    const buttons = wrapper.findAll('.td-calendar__hero-actions .td-btn')
+    const timelineBtn = buttons.find(b => b.text() === 'Timeline')
+    await timelineBtn!.trigger('click')
+
+    expect(wrapper.text()).toContain('Ship feature X')
+    expect(wrapper.text()).toContain('Fix urgent bug')
+    expect(wrapper.text()).toContain('Blocked task')
+    expect(wrapper.text()).toContain('Overdue')
+    expect(wrapper.text()).toContain('Blocked')
+  })
+
+  it('shows block reason in timeline view for blocked cards', async () => {
+    const wrapper = mount(CalendarView)
+    await waitForUi()
+
+    const buttons = wrapper.findAll('.td-calendar__hero-actions .td-btn')
+    const timelineBtn = buttons.find(b => b.text() === 'Timeline')
+    await timelineBtn!.trigger('click')
+
+    expect(wrapper.text()).toContain('Waiting on API key')
+  })
+
+  it('renders month navigation', async () => {
+    const wrapper = mount(CalendarView)
+    await waitForUi()
+
+    const nav = wrapper.find('.td-calendar__nav')
+    expect(nav.exists()).toBe(true)
+    expect(nav.text()).toContain('Today')
+  })
+
+  it('navigates to next month on arrow click', async () => {
+    const wrapper = mount(CalendarView)
+    await waitForUi()
+
+    const initialCallCount = mockGetCalendar.mock.calls.length
+
+    const nextBtn = wrapper.findAll('.td-calendar__nav .td-btn--ghost')[1]
+    await nextBtn.trigger('click')
+    await waitForUi()
+
+    // Should have fetched again
+    expect(mockGetCalendar.mock.calls.length).toBeGreaterThan(initialCallCount)
+  })
+
+  it('navigates to previous month on arrow click', async () => {
+    const wrapper = mount(CalendarView)
+    await waitForUi()
+
+    const initialCallCount = mockGetCalendar.mock.calls.length
+
+    const prevBtn = wrapper.findAll('.td-calendar__nav .td-btn--ghost')[0]
+    await prevBtn.trigger('click')
+    await waitForUi()
+
+    expect(mockGetCalendar.mock.calls.length).toBeGreaterThan(initialCallCount)
+  })
+
+  it('navigates to board from timeline card click', async () => {
+    const wrapper = mount(CalendarView)
+    await waitForUi()
+
+    const buttons = wrapper.findAll('.td-calendar__hero-actions .td-btn')
+    const timelineBtn = buttons.find(b => b.text() === 'Timeline')
+    await timelineBtn!.trigger('click')
+
+    const card = wrapper.find('.td-timeline-card')
+    await card.trigger('click')
+
+    expect(routerMocks.push).toHaveBeenCalled()
+  })
+
+  it('shows board and column names in timeline meta', async () => {
+    const wrapper = mount(CalendarView)
+    await waitForUi()
+
+    const buttons = wrapper.findAll('.td-calendar__hero-actions .td-btn')
+    const timelineBtn = buttons.find(b => b.text() === 'Timeline')
+    await timelineBtn!.trigger('click')
+
+    expect(wrapper.text()).toContain('Alpha Board')
+    expect(wrapper.text()).toContain('In Progress')
+  })
+})
diff --git a/frontend/taskdeck-web/src/types/workspace.ts b/frontend/taskdeck-web/src/types/workspace.ts
index 7efbc23bc..0674628f1 100644
--- a/frontend/taskdeck-web/src/types/workspace.ts
+++ b/frontend/taskdeck-web/src/types/workspace.ts
@@ -107,3 +107,24 @@ export interface TodaySummary {
   blockedCards: TodayAgendaCard[]
   recommendedActions: HomeRecommendedAction[]
 }
+
+export interface CalendarCard {
+  cardId: string
+  boardId: string
+  boardName: string
+  columnId: string
+  columnName: string
+  title: string
+  dueDate: string
+  isBlocked: boolean
+  blockReason: string | null
+  isOverdue: boolean
+  updatedAt: string
+}
+
+export interface CalendarData {
+  from: string
+  to: string
+  totalCards: number
+  cards: CalendarCard[]
+}
diff --git a/frontend/taskdeck-web/src/views/CalendarView.vue b/frontend/taskdeck-web/src/views/CalendarView.vue
new file mode 100644
index 000000000..bd4ec0575
--- /dev/null
+++ b/frontend/taskdeck-web/src/views/CalendarView.vue
@@ -0,0 +1,750 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import { workspaceApi } from '../api/workspaceApi'
+import WorkspaceHelpCallout from '../components/workspace/WorkspaceHelpCallout.vue'
+import type { CalendarCard, CalendarData } from '../types/workspace'
+
+const router = useRouter()
+
+const loading = ref(false)
+const error = ref<string | null>(null)
+const calendarData = ref<CalendarData | null>(null)
+
+/** Current view month (first day of month in UTC). */
+const viewDate = ref(startOfMonth(new Date()))
+
+/** Active view mode: 'calendar' for monthly grid, 'timeline' for linear list. */
+const viewMode = ref<'calendar' | 'timeline'>('calendar')
+
+function startOfMonth(date: Date): Date {
+  return new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), 1))
+}
+
+/** Returns the first day of the next month (exclusive upper bound for date range queries). */
+function startOfNextMonth(date: Date): Date {
+  return new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth() + 1, 1))
+}
+
+const monthLabel = computed(() => {
+  const d = viewDate.value
+  return d.toLocaleDateString('en-US', { year: 'numeric', month: 'long', timeZone: 'UTC' })
+})
+
+function navigateMonth(delta: number) {
+  const d = viewDate.value
+  viewDate.value = new Date(Date.UTC(d.getUTCFullYear(), d.getUTCMonth() + delta, 1))
+}
+
+function goToToday() {
+  viewDate.value = startOfMonth(new Date())
+}
+
+async function fetchCalendar() {
+  loading.value = true
+  error.value = null
+
+  try {
+    const from = viewDate.value.toISOString()
+    const to = startOfNextMonth(viewDate.value).toISOString()
+    calendarData.value = await workspaceApi.getCalendar(from, to)
+  } catch (e: unknown) {
+    calendarData.value = null
+    const msg = e instanceof Error ? e.message : 'Failed to load calendar data'
+    error.value = msg
+  } finally {
+    loading.value = false
+  }
+}
+
+/** Group cards by their due date (date-only string key). */
+const cardsByDate = computed<Record<string, CalendarCard[]>>(() => {
+  if (!calendarData.value) return {}
+
+  const groups: Record<string, CalendarCard[]> = {}
+  for (const card of calendarData.value.cards) {
+    const dateKey = card.dueDate.slice(0, 10) // YYYY-MM-DD
+    if (!groups[dateKey]) {
+      groups[dateKey] = []
+    }
+    groups[dateKey].push(card)
+  }
+  return groups
+})
+
+/** Build the calendar grid: weeks containing day cells. */
+const calendarWeeks = computed(() => {
+  const year = viewDate.value.getUTCFullYear()
+  const month = viewDate.value.getUTCMonth()
+  const firstDay = new Date(Date.UTC(year, month, 1))
+  const lastDay = new Date(Date.UTC(year, month + 1, 0))
+
+  // Start from the Sunday before (or the first day if it is Sunday)
+  const startDow = firstDay.getUTCDay()
+  const gridStart = new Date(Date.UTC(year, month, 1 - startDow))
+
+  const weeks: { date: Date; dateKey: string; isCurrentMonth: boolean; isToday: boolean }[][] = []
+  const today = new Date()
+  const todayKey = `${today.getUTCFullYear()}-${String(today.getUTCMonth() + 1).padStart(2, '0')}-${String(today.getUTCDate()).padStart(2, '0')}`
+
+  let cursor = new Date(gridStart)
+  while (cursor <= lastDay || weeks.length === 0 || weeks[weeks.length - 1].length < 7) {
+    if (!weeks.length || weeks[weeks.length - 1].length === 7) {
+      weeks.push([])
+    }
+
+    const dateKey = `${cursor.getUTCFullYear()}-${String(cursor.getUTCMonth() + 1).padStart(2, '0')}-${String(cursor.getUTCDate()).padStart(2, '0')}`
+    weeks[weeks.length - 1].push({
+      date: new Date(cursor),
+      dateKey,
+      isCurrentMonth: cursor.getUTCMonth() === month,
+      isToday: dateKey === todayKey,
+    })
+
+    cursor = new Date(Date.UTC(cursor.getUTCFullYear(), cursor.getUTCMonth(), cursor.getUTCDate() + 1))
+
+    // Stop after 6 weeks max
+    if (weeks.length >= 6 && weeks[weeks.length - 1].length === 7) break
+  }
+
+  return weeks
+})
+
+/** Timeline: sorted list of cards for the current month. */
+const timelineCards = computed(() => {
+  if (!calendarData.value) return []
+  return [...calendarData.value.cards].sort(
+    (a, b) => new Date(a.dueDate).getTime() - new Date(b.dueDate).getTime(),
+  )
+})
+
+/** Timeline: group by date for section headers. */
+const timelineGroups = computed(() => {
+  const groups: { dateKey: string; dateLabel: string; cards: CalendarCard[] }[] = []
+  let currentKey = ''
+
+  for (const card of timelineCards.value) {
+    const dateKey = card.dueDate.slice(0, 10)
+    if (dateKey !== currentKey) {
+      currentKey = dateKey
+      groups.push({
+        dateKey,
+        dateLabel: new Date(dateKey + 'T00:00:00Z').toLocaleDateString('en-US', {
+          weekday: 'short',
+          month: 'short',
+          day: 'numeric',
+          timeZone: 'UTC',
+        }),
+        cards: [],
+      })
+    }
+    groups[groups.length - 1].cards.push(card)
+  }
+
+  return groups
+})
+
+function formatDueDate(value: string): string {
+  return new Date(value).toLocaleDateString('en-US', {
+    month: 'short',
+    day: 'numeric',
+    timeZone: 'UTC',
+  })
+}
+
+function openBoard(boardId: string) {
+  void router.push(`/workspace/boards/${boardId}`)
+}
+
+function cardStatusClass(card: CalendarCard): string {
+  if (card.isOverdue) return 'td-cal-card--overdue'
+  if (card.isBlocked) return 'td-cal-card--blocked'
+  return ''
+}
+
+function cardStatusLabel(card: CalendarCard): string {
+  if (card.isOverdue) return 'Overdue'
+  if (card.isBlocked) return 'Blocked'
+  return 'On track'
+}
+
+// Fetch on mount and when viewDate changes
+onMounted(fetchCalendar)
+watch(viewDate, fetchCalendar)
+</script>
+
+<template>
+  <div class="td-calendar" role="region" aria-label="Calendar planning view">
+    <header class="td-calendar__hero td-panel">
+      <div class="td-calendar__hero-copy">
+        <span class="td-calendar__eyebrow" aria-hidden="true">Planning</span>
+        <h1 class="td-page-title">Calendar</h1>
+        <p class="td-calendar__subtitle">
+          See due-date-backed work across all boards in a single view. Spot overdue items, plan ahead, and jump to any card's board context.
+        </p>
+      </div>
+      <div class="td-calendar__hero-actions">
+        <button
+          class="td-btn td-btn--secondary"
+          :class="{ 'td-btn--active': viewMode === 'calendar' }"
+          @click="viewMode = 'calendar'"
+        >
+          Grid
+        </button>
+        <button
+          class="td-btn td-btn--secondary"
+          :class="{ 'td-btn--active': viewMode === 'timeline' }"
+          @click="viewMode = 'timeline'"
+        >
+          Timeline
+        </button>
+      </div>
+    </header>
+
+    <WorkspaceHelpCallout
+      topic="calendar"
+      title="What is the Calendar for?"
+      description="The Calendar shows all cards with due dates across your boards. Use it to spot scheduling conflicts, track deadlines, and navigate to board context for any card."
+    />
+
+    <!-- Month navigation -->
+    <div class="td-calendar__nav td-panel">
+      <button
+        class="td-btn td-btn--ghost"
+        aria-label="Previous month"
+        @click="navigateMonth(-1)"
+      >
+        &larr;
+      </button>
+      <span class="td-calendar__month-label">{{ monthLabel }}</span>
+      <button
+        class="td-btn td-btn--ghost"
+        aria-label="Next month"
+        @click="navigateMonth(1)"
+      >
+        &rarr;
+      </button>
+      <button class="td-btn td-btn--ghost td-calendar__today-btn" @click="goToToday">
+        Today
+      </button>
+      <span
+        v-if="calendarData"
+        class="td-calendar__card-count"
+        aria-live="polite"
+      >
+        {{ calendarData.totalCards }} card{{ calendarData.totalCards === 1 ? '' : 's' }} this month
+      </span>
+    </div>
+
+    <!-- Loading state -->
+    <div v-if="loading" class="td-panel td-calendar__placeholder" aria-live="polite">
+      Loading calendar data...
+    </div>
+
+    <!-- Error state -->
+    <div v-else-if="error" class="td-alert td-alert--error" role="alert">
+      {{ error }}
+      <button class="td-btn td-btn--ghost td-btn--sm" @click="fetchCalendar">Retry</button>
+    </div>
+
+    <!-- Empty state -->
+    <div
+      v-else-if="calendarData && calendarData.totalCards === 0"
+      class="td-panel td-calendar__empty"
+      role="status"
+    >
+      <p class="td-calendar__empty-title">No due dates this month</p>
+      <p class="td-calendar__empty-desc">
+        Cards with due dates will appear here. Set due dates on your board cards to see them in the calendar.
+      </p>
+    </div>
+
+    <!-- Calendar grid view -->
+    <template v-else-if="calendarData && viewMode === 'calendar'">
+      <div class="td-calendar__grid" role="grid" aria-label="Calendar grid">
+        <div class="td-calendar__weekdays" role="row">
+          <div
+            v-for="day in ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']"
+            :key="day"
+            class="td-calendar__weekday"
+            role="columnheader"
+          >
+            {{ day }}
+          </div>
+        </div>
+        <div
+          v-for="(week, wi) in calendarWeeks"
+          :key="wi"
+          class="td-calendar__week"
+          role="row"
+        >
+          <div
+            v-for="day in week"
+            :key="day.dateKey"
+            class="td-calendar__day"
+            :class="{
+              'td-calendar__day--other-month': !day.isCurrentMonth,
+              'td-calendar__day--today': day.isToday,
+              'td-calendar__day--has-cards': (cardsByDate[day.dateKey]?.length ?? 0) > 0,
+            }"
+            role="gridcell"
+            :aria-label="`${day.date.toLocaleDateString('en-US', { month: 'long', day: 'numeric', timeZone: 'UTC' })}, ${cardsByDate[day.dateKey]?.length ?? 0} cards`"
+          >
+            <span class="td-calendar__day-number">{{ day.date.getUTCDate() }}</span>
+            <div v-if="cardsByDate[day.dateKey]" class="td-calendar__day-cards">
+              <button
+                v-for="card in cardsByDate[day.dateKey].slice(0, 3)"
+                :key="card.cardId"
+                class="td-cal-card"
+                :class="cardStatusClass(card)"
+                :title="`${card.title} - ${card.boardName} / ${card.columnName} (${cardStatusLabel(card)})`"
+                @click="openBoard(card.boardId)"
+              >
+                <span class="td-cal-card__title">{{ card.title }}</span>
+              </button>
+              <span
+                v-if="cardsByDate[day.dateKey].length > 3"
+                class="td-calendar__more"
+              >
+                +{{ cardsByDate[day.dateKey].length - 3 }} more
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+
+    <!-- Timeline view -->
+    <template v-else-if="calendarData && viewMode === 'timeline'">
+      <div class="td-calendar__timeline" role="list" aria-label="Timeline">
+        <div
+          v-for="group in timelineGroups"
+          :key="group.dateKey"
+          class="td-timeline-group"
+        >
+          <div class="td-timeline-group__header">
+            <span class="td-timeline-group__date">{{ group.dateLabel }}</span>
+            <span class="td-timeline-group__count">{{ group.cards.length }} card{{ group.cards.length === 1 ? '' : 's' }}</span>
+          </div>
+          <ul class="td-timeline-group__cards">
+            <li
+              v-for="card in group.cards"
+              :key="card.cardId"
+              class="td-timeline-card-wrapper"
+            >
+              <button
+                class="td-timeline-card td-panel"
+                :class="cardStatusClass(card)"
+                @click="openBoard(card.boardId)"
+              >
+              <div class="td-timeline-card__header">
+                <span class="td-timeline-card__title">{{ card.title }}</span>
+                <span
+                  class="td-timeline-card__status"
+                  :class="{
+                    'td-timeline-card__status--overdue': card.isOverdue,
+                    'td-timeline-card__status--blocked': card.isBlocked,
+                  }"
+                >
+                  {{ cardStatusLabel(card) }}
+                </span>
+              </div>
+              <div class="td-timeline-card__meta">
+                <span class="td-timeline-card__board">{{ card.boardName }}</span>
+                <span class="td-timeline-card__separator" aria-hidden="true">/</span>
+                <span class="td-timeline-card__column">{{ card.columnName }}</span>
+                <span class="td-timeline-card__due">Due {{ formatDueDate(card.dueDate) }}</span>
+              </div>
+              <p
+                v-if="card.blockReason"
+                class="td-timeline-card__block-reason"
+              >
+                Blocked: {{ card.blockReason }}
+              </p>
+            </button>
+            </li>
+          </ul>
+        </div>
+
+        <div v-if="timelineGroups.length === 0" class="td-panel td-calendar__empty" role="status">
+          <p class="td-calendar__empty-title">No due dates this month</p>
+          <p class="td-calendar__empty-desc">
+            Cards with due dates will appear here.
+          </p>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.td-calendar {
+  display: flex;
+  flex-direction: column;
+  gap: var(--td-space-5);
+  padding: var(--td-space-8);
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.td-calendar__hero {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: var(--td-space-5);
+}
+
+.td-calendar__hero-copy {
+  flex: 1;
+  min-width: 280px;
+}
+
+.td-calendar__eyebrow {
+  font-family: 'Space Grotesk', system-ui, sans-serif;
+  font-size: var(--td-font-xs);
+  font-weight: 700;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+  color: var(--td-color-ember);
+}
+
+.td-calendar__subtitle {
+  color: var(--td-text-secondary);
+  font-size: var(--td-font-sm);
+  margin-top: var(--td-space-2);
+}
+
+.td-calendar__hero-actions {
+  display: flex;
+  gap: var(--td-space-3);
+}
+
+.td-btn--active {
+  background: var(--td-color-ember-dim);
+  color: var(--td-color-ember);
+  border-color: var(--td-color-ember);
+}
+
+/* Month navigation */
+.td-calendar__nav {
+  display: flex;
+  align-items: center;
+  gap: var(--td-space-4);
+  padding: var(--td-space-4) var(--td-space-5);
+}
+
+.td-calendar__month-label {
+  font-family: 'Space Grotesk', system-ui, sans-serif;
+  font-size: var(--td-font-lg);
+  font-weight: 700;
+  color: var(--td-text-primary);
+  min-width: 180px;
+  text-align: center;
+}
+
+.td-calendar__today-btn {
+  margin-left: auto;
+}
+
+.td-calendar__card-count {
+  font-size: var(--td-font-sm);
+  color: var(--td-text-tertiary);
+}
+
+/* Loading & empty states */
+.td-calendar__placeholder {
+  padding: var(--td-space-10);
+  text-align: center;
+  color: var(--td-text-tertiary);
+}
+
+.td-calendar__empty {
+  padding: var(--td-space-10);
+  text-align: center;
+}
+
+.td-calendar__empty-title {
+  font-size: var(--td-font-lg);
+  font-weight: 700;
+  color: var(--td-text-primary);
+  margin-bottom: var(--td-space-3);
+}
+
+.td-calendar__empty-desc {
+  color: var(--td-text-secondary);
+  font-size: var(--td-font-sm);
+}
+
+/* Calendar grid */
+.td-calendar__grid {
+  background: var(--td-surface-container);
+  border-radius: var(--td-radius-lg);
+  overflow: hidden;
+  box-shadow: var(--td-shadow-sm);
+}
+
+.td-calendar__weekdays {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  background: var(--td-surface-container-high);
+}
+
+.td-calendar__weekday {
+  padding: var(--td-space-3) var(--td-space-2);
+  font-family: 'Space Grotesk', system-ui, sans-serif;
+  font-size: var(--td-font-xs);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: var(--td-text-tertiary);
+  text-align: center;
+}
+
+.td-calendar__week {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  border-top: 1px solid var(--td-border-ghost);
+}
+
+.td-calendar__day {
+  min-height: 100px;
+  padding: var(--td-space-2);
+  border-right: 1px solid var(--td-border-ghost);
+  display: flex;
+  flex-direction: column;
+  gap: var(--td-space-1);
+}
+
+.td-calendar__day:last-child {
+  border-right: none;
+}
+
+.td-calendar__day--other-month {
+  opacity: 0.35;
+}
+
+.td-calendar__day--today {
+  background: var(--td-color-ember-dim);
+}
+
+.td-calendar__day--today .td-calendar__day-number {
+  color: var(--td-color-ember);
+  font-weight: 700;
+}
+
+.td-calendar__day-number {
+  font-size: var(--td-font-sm);
+  font-weight: 600;
+  color: var(--td-text-secondary);
+  padding: var(--td-space-1);
+}
+
+.td-calendar__day-cards {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  overflow: hidden;
+}
+
+.td-cal-card {
+  display: block;
+  width: 100%;
+  padding: var(--td-space-1) var(--td-space-2);
+  border-radius: var(--td-radius-sm);
+  background: var(--td-surface-container-high);
+  border: none;
+  border-left: 3px solid var(--td-color-success);
+  cursor: pointer;
+  text-align: left;
+  transition: background var(--td-transition-fast);
+  font-family: inherit;
+}
+
+.td-cal-card:hover {
+  background: var(--td-surface-bright);
+}
+
+.td-cal-card:focus-visible {
+  box-shadow: var(--td-focus-ring);
+  outline: none;
+}
+
+.td-cal-card--overdue {
+  border-left-color: var(--td-color-error);
+}
+
+.td-cal-card--blocked {
+  border-left-color: var(--td-color-warning);
+}
+
+.td-cal-card__title {
+  font-size: var(--td-font-xs);
+  color: var(--td-text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: block;
+}
+
+.td-calendar__more {
+  font-size: var(--td-font-xs);
+  color: var(--td-text-tertiary);
+  padding: 0 var(--td-space-2);
+}
+
+/* Timeline view */
+.td-calendar__timeline {
+  display: flex;
+  flex-direction: column;
+  gap: var(--td-space-5);
+}
+
+.td-timeline-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--td-space-3);
+}
+
+.td-timeline-group__header {
+  display: flex;
+  align-items: center;
+  gap: var(--td-space-4);
+  padding: var(--td-space-3) 0;
+  border-bottom: 1px solid var(--td-border-ghost);
+}
+
+.td-timeline-group__date {
+  font-family: 'Space Grotesk', system-ui, sans-serif;
+  font-size: var(--td-font-base);
+  font-weight: 700;
+  color: var(--td-text-primary);
+}
+
+.td-timeline-group__count {
+  font-size: var(--td-font-xs);
+  color: var(--td-text-tertiary);
+}
+
+.td-timeline-group__cards {
+  display: flex;
+  flex-direction: column;
+  gap: var(--td-space-3);
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.td-timeline-card-wrapper {
+  display: contents;
+}
+
+.td-timeline-card {
+  display: block;
+  width: 100%;
+  padding: var(--td-space-4) var(--td-space-5);
+  border: none;
+  border-left: 4px solid var(--td-color-success);
+  cursor: pointer;
+  text-align: left;
+  font-family: inherit;
+  transition: background var(--td-transition-fast);
+}
+
+.td-timeline-card:hover {
+  background: var(--td-surface-bright);
+}
+
+.td-timeline-card:focus-visible {
+  box-shadow: var(--td-focus-ring);
+  outline: none;
+}
+
+.td-timeline-card.td-cal-card--overdue {
+  border-left-color: var(--td-color-error);
+}
+
+.td-timeline-card.td-cal-card--blocked {
+  border-left-color: var(--td-color-warning);
+}
+
+.td-timeline-card__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--td-space-4);
+}
+
+.td-timeline-card__title {
+  font-size: var(--td-font-base);
+  font-weight: 600;
+  color: var(--td-text-primary);
+}
+
+.td-timeline-card__status {
+  font-family: 'Space Grotesk', system-ui, sans-serif;
+  font-size: var(--td-font-xs);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  padding: var(--td-space-1) var(--td-space-3);
+  border-radius: var(--td-radius-sm);
+  background: var(--td-color-success-light);
+  color: var(--td-color-success);
+}
+
+.td-timeline-card__status--overdue {
+  background: var(--td-color-error-light);
+  color: var(--td-color-error);
+}
+
+.td-timeline-card__status--blocked {
+  background: var(--td-color-warning-light);
+  color: var(--td-color-warning);
+}
+
+.td-timeline-card__meta {
+  display: flex;
+  align-items: center;
+  gap: var(--td-space-2);
+  margin-top: var(--td-space-2);
+  font-size: var(--td-font-sm);
+  color: var(--td-text-secondary);
+}
+
+.td-timeline-card__separator {
+  color: var(--td-text-tertiary);
+}
+
+.td-timeline-card__due {
+  margin-left: auto;
+  color: var(--td-text-tertiary);
+}
+
+.td-timeline-card__block-reason {
+  margin-top: var(--td-space-2);
+  font-size: var(--td-font-xs);
+  color: var(--td-color-warning);
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .td-calendar {
+    padding: var(--td-space-4);
+  }
+
+  .td-calendar__day {
+    min-height: 60px;
+    padding: var(--td-space-1);
+  }
+
+  .td-cal-card__title {
+    font-size: 0.5625rem;
+  }
+
+  .td-calendar__day-cards {
+    max-height: 40px;
+    overflow: hidden;
+  }
+}
+</style>