Power Platform Canvas Apps Custom Pages API Integration Custom Connector Node.js Fluent UI Power Fx

Canvas App Custom Page POC: Dynamic Calendar with API-Driven Blocked Dates

(P.S: Saturday should be a day off … but not for POCs & Prompt Engg)

Still novice in canvas app development, but leveraging a foundation of solid integration design principles, I prototyped a custom page in Power Platform that consumes external API responses to drive UI behavior.

Highlights

  • Renders a 6x7 calendar grid using vertical galleries
  • Connects to a GET endpoint (Node.js) via a custom connector with year and month query parameters
  • Uses Power Fx with LookUp() logic to dynamically disable specific calendar days based on API response
  • Styling aligned with Fluent UI — including hover, selection, and disabled states
  • Local development powered by ngrok — easily extendable via on-premises data gateway for enterprise-grade deployments

Planned Enhancements

  • Multi-lingual support and locale-specific formats
  • Highlight weekends, holidays, and blackout dates with distinct visual cues
  • Support for blocking date ranges and multi-day restrictions
  • Daily availability drill-down: tap a selected date to view hourly slots via backend APIs
  • Respect user-specific working hours to construct accurate daily time grids
  • Toggle between mock and live API modes for flexible dev/testing
  • Extend navigation to support year views and broader planning scenarios
  • Integrate with resource availability and booking workflows

Captured a short video to showcase the interaction model and design flow.

A small but meaningful step in shaping API-aware UI patterns within the Power Platform — built with curiosity, discipline, and the right architectural foundation.