Calendar Widget

Add an accessible month calendar to your website. Visitors can page through months, see today at a glance and spot the dates you mark, such as events, closures or deadlines.

Time & Date Tool Runs in your browser Free · no ads

Customize your widget

Theme
Auto follows the visitor's light/dark setting.
Style
Attribution on your page
Optional and entirely your choice. The exact line is shown in the code below; it links to the tool with rel="nofollow".
More options
Starting values
Leave blank to use the widget's defaults. Visitors can still change every value.

Live preview

Exactly what your visitors will see

Embed code

<iframe src="https://a2z.tools/embed/w/calendar-widget" title="Calendar by A2Z Tools" width="100%" height="470" style="border:0;width:100%" loading="lazy" allow="clipboard-write"></iframe>

A plain iframe. Works everywhere, including site builders that strip scripts. Adjust height if your content needs more room.

Works with

How it works

The calendar shows six weeks around the current month, with the week starting on Sunday or Monday (from the visitor's locale, or fixed by you). Today has an outline and each marked date has a dot and bold number, so colour is never the only signal. It follows the WAI-ARIA grid pattern: the grid is one tab stop, the arrow keys move by a day or a week, Home and End jump to the ends of the week and Page Up and Page Down change month (with Shift, year). Selecting a day shows its full date, how many days away it is and the label you gave it. Marked dates are validated, and any that are not real dates are listed in a note.

Method

  • Grid = 42 days starting on the week-start day on or before the 1st of the month
  • Dates are calendar-day numbers (proleptic Gregorian), so the grid is identical in every time zone
  • v_marks = comma-separated YYYY-MM-DD dates, each with an optional :label (up to 200)

Limitations

  • No week numbers, recurring events or iCalendar (.ics) import; every marked date is listed in the embed code.
  • Marked dates carry a short label only - no times, links or colours per event.
  • At most 200 marked dates; entries such as 2026-02-30 or 26/12/2026 are rejected and listed in a note under the grid instead of being guessed.
  • Gregorian calendar only; lunar and religious calendars are not shown alongside.

Where publishers use it

  • Clubs and societies marking meeting and match days
  • Shops and clinics marking holiday closures
  • Schools showing term dates and exam days
  • Event organisers highlighting sessions across a month

Questions

How do I mark dates?

Add v_marks to the embed code, for example v_marks=2026-12-24:Closed early,2026-12-25:Closed. The label is shown when a visitor selects the day.

Can the week start on Monday?

Yes: v_start=mon (or sun). Without it the calendar follows the visitor's locale.

Can it be used with a keyboard or screen reader?

Yes. It is a single tab stop; arrow keys, Home/End and Page Up/Down move around, Enter selects, and every day announces its full date, whether it is today and any label.

Can I open it on a particular month?

Yes: v_month=2026-12 shows December 2026 first.

Sources

  1. WAI-ARIA Authoring Practices Guide: Grid pattern - W3C WAI . Single tab stop and arrow, Home/End and Page Up/Down keyboard model
  2. ISO 8601 date and time format - ISO . YYYY-MM-DD marked dates; ISO weeks start on Monday
  3. chrono-Compatible Low-Level Date Algorithms - Howard Hinnant . Month grids and weekdays from serial day numbers

Cite or recommend this tool

If you reference this tool in an article, course or documentation, these formats are ready to copy. They are optional - nothing is added to your site unless you paste it.

A2Z Tools Calendar
https://a2z.tools/embed/calendar-widget

Related widgets

More Time & Date widgets →

Preview

CustomizeGet code