Skip to content

Add month/year header dropdowns for Calendar navigation#7

Merged
barelyhuman merged 5 commits into
mainfrom
copilot/add-year-month-dropdowns
Apr 23, 2026
Merged

Add month/year header dropdowns for Calendar navigation#7
barelyhuman merged 5 commits into
mainfrom
copilot/add-year-month-dropdowns

Conversation

Copy link
Copy Markdown
Contributor

Copilot AI commented Apr 22, 2026

This change replaces the static month/year header text with interactive dropdowns so users can directly jump to a target month and year. The new controls are class-addressable to support the same styling model used across the rest of the component.

  • Header navigation controls

    • Replaced the header label with two selects:
      • Month: .preachjs-calendar--header-month
      • Year: .preachjs-calendar--header-year
    • Kept previous/next arrow behavior unchanged.
  • Date transition correctness

    • Added shared rollover-safe date update logic for dropdown changes.
    • Handles invalid day rollover when switching month/year (e.g., 31st → shorter month, leap-year transitions) by clamping to valid day-of-month.
  • Styling surface

    • Added header selector container/select styling in the example app to demonstrate how month/year dropdowns can be themed consistently with existing calendar styles.
  • Coverage update

    • Added focused E2E coverage for selecting month and year from dropdowns and asserting the rendered calendar context updates accordingly.
<select
  class="preachjs-calendar--header-month"
  value={String(monthInView)}
  onChange={e => {
    activeDate$.value = updateDateFromParts(activeDate$.value, {
      month: +e.target.value,
    })
  }}
>
  {monthOptions.map(month => (
    <option value={String(month.value)}>{month.label}</option>
  ))}
</select>

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

  • download.cypress.io
    • Triggering command: /usr/local/bin/node node index.js --exec install (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

Copilot AI linked an issue Apr 22, 2026 that may be closed by this pull request
Copilot AI changed the title [WIP] Add year and month dropdowns for selection Add month/year header dropdowns for Calendar navigation Apr 22, 2026
Copilot AI requested a review from barelyhuman April 22, 2026 14:40
@barelyhuman barelyhuman marked this pull request as ready for review April 23, 2026 05:37
@barelyhuman barelyhuman merged commit b22a37c into main Apr 23, 2026
1 check passed
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.

[FEAT] Year and Month Dropdowns

3 participants