Skip to content

Add Calendar component with date selection and navigation#333

Closed
Copilot wants to merge 6 commits intodevfrom
copilot/create-calendar-component
Closed

Add Calendar component with date selection and navigation#333
Copilot wants to merge 6 commits intodevfrom
copilot/create-calendar-component

Conversation

Copy link
Contributor

Copilot AI commented Feb 9, 2026

Implements Calendar component for migrating ASP.NET Web Forms Calendar controls to Blazor with minimal markup changes.

Implementation

Core Component

  • Table-based rendering matching Web Forms HTML output
  • Selection modes: None, Day, DayWeek, DayWeekMonth
  • Month/year navigation with customizable text
  • Event callbacks: OnSelectionChanged, OnDayRender, OnVisibleMonthChanged

Display & Formatting

  • Day name formats: Full, Short, FirstLetter, FirstTwoLetters, Shortest
  • Title formats: Month, MonthYear
  • Configurable first day of week, cell padding/spacing
  • Toggle title bar, day headers, grid lines, navigation

Styling

  • CSS class-based styling for day types: today, selected, weekend, other month
  • Compatible with existing Web Forms stylesheets
  • Custom TitleStyleCss, DayStyleCss, SelectedDayStyleCss, etc.

Code Safety

  • Culture-safe substring operations for day name formatting
  • Synchronous OnDayRender event handling to allow day property modification before rendering

Usage

<Calendar @bind-SelectedDate="selectedDate" 
          SelectionMode="DayWeek"
          ShowGridLines="true"
          DayNameFormat="Short"
          OnSelectionChanged="HandleSelection" />

@code {
    private DateTime selectedDate = DateTime.Today;
    
    private void HandleSelection()
    {
        // selectedDate contains the selected date
    }
}

Testing & Documentation

  • 19 unit tests covering rendering, selection, navigation, formatting
  • Comprehensive documentation in docs/EditorControls/Calendar.md
  • Sample page with live examples at /ControlSamples/Calendar

Screenshot

Calendar Component

Shows basic calendar, selection modes, custom formatting, and styled variations.

Original prompt

This section details on the original issue you should resolve

<issue_title>Create Calendar component</issue_title>
<issue_description>We need the Calendar component created with all features from the ASP.NET control</issue_description>

Comments on the Issue (you are @copilot in this section)


💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

Copilot AI and others added 5 commits February 9, 2026 17:14
Co-authored-by: csharpfritz <78577+csharpfritz@users.noreply.github.com>
Co-authored-by: csharpfritz <78577+csharpfritz@users.noreply.github.com>
Co-authored-by: csharpfritz <78577+csharpfritz@users.noreply.github.com>
Co-authored-by: csharpfritz <78577+csharpfritz@users.noreply.github.com>
Copilot AI changed the title [WIP] Add Calendar component with all features from ASP.NET control Add Calendar component with date selection and navigation Feb 9, 2026
Copilot AI requested a review from csharpfritz February 9, 2026 17:29
@csharpfritz csharpfritz marked this pull request as ready for review February 9, 2026 19:42
@csharpfritz
Copy link
Collaborator

@copilot add the individual style objects to this component to mirror the existing control. We should add a marker to indicate we don't recommend their use

csharpfritz added a commit to csharpfritz/BlazorWebFormsComponents that referenced this pull request Feb 10, 2026
…ends#333)

- Create CalendarSelectionMode enum (None, Day, DayWeek, DayWeekMonth)
- Refactor Calendar.SelectionMode from string to CalendarSelectionMode enum
- Remove .GetAwaiter().GetResult() blocking call in CreateDayRenderArgs
- Add Caption, CaptionAlign, UseAccessibleHeader properties
- Update tests and samples to use enum values
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Create Calendar component

2 participants

Comments