calendar-input

It renders a simple grid by default.

code

<calendar-input>
  <input type="date">
</calendar-input>

Styled

Use CSS to style it. Note the classes .today, .selected and .not-in-month on cells.

code

<style>
  .styled {
    width: 300px;
    color: white;
    background-color: rgb(48, 48, 48);
  }
  .styled header,
  .styled label {
    padding: 0.4em;
    background-color: rgb(32, 32, 32);
  }
  .styled section * {
    padding: 0.4em;
    text-align: center;
  }
  .styled .not-in-month {
    opacity: 0.5;
  }
  .styled .today {
    background-color: rgb(188, 188, 188);
    color: rgb(32, 32, 32);
    font-weight: bold;
  }
  .styled .selected {
    background-color: indianred;
    border-radius: 0.4em;
  }
</style>
<div class="styled">
  <calendar-input>
    <input type="date">
  </calendar-input>
</div>

Language

It is rendered in the language of the browser but you can impose one with the language property.

code

<div class="styled">
  <calendar-input language="fa">
    <input type="date">
  </calendar-input>
</div>

Events

Listen to events on the <input> as usual.

code

<div class="styled show-day">
  <calendar-input>
    <input type="date">
  </calendar-input>
</div>

<p style="margin-top: 1em">Selected day: <span id="day">none</span></p>

<script>
  const input = document.querySelector(".show-day input");
const day = document.querySelector("#day");
input.addEventListener("input", (e) => {
  day.textContent = e.target.value;
});
</script>

Selected day: none