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.

Can I mark closures, events or deadlines?

Yes. List them as v_marks=2026-12-25:Closed,2026-12-31:Early close and each marked day is highlighted with its label, which suits shop closures, term dates, launch days and booking deadlines.

Should the week start on Sunday or Monday?

It depends on your readers: calendars in the United States, Canada and Japan usually start on Sunday, while the UK and most of Europe follow ISO 8601 and start on Monday. Set v_start=sun or v_start=mon to match.

Does it follow the visitor's language?

Month and weekday names come from the page locale through the browser's Intl API, so a French embed shows janvier and lundi while the dates and marks stay the same.

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 →

  • Countdown Timer

    Time & Date Clock & time

    Live days, hours, minutes and seconds to a date you set, with an "event has started" message.

    Get code

  • Business Days Calculator

    Time & Date Calculator

    Count working days between dates or add N business days, with your weekend and holidays.

    Get code

  • Date Difference Calculator

    Time & Date Calculator

    Years, months and days between two dates or date-times, plus totals in days, weeks and hours.

    Get code

  • Moon Phase

    Time & Date Tool

    Today's Moon phase drawn to scale, with illumination, age and the next full and new moon.

    Get code

  • Age Calculator

    Time & Date Calculator

    Exact age in years, months and days, totals in months, weeks and days, and the next birthday.

    Get code

  • Time Zone Converter

    Time & Date Converter

    Convert a date and time between any two time zones, with daylight-saving gaps and overlaps explained.

    Get code

Preview

CustomizeGet code