UI: Components

Calendar

A simple calendar with basic navigation. Works with the lang attribute for localization.

With opposite color-scheme

Also, lang="fr-FR", where the week starts on Monday.

With right-to-left

Here, lang="ae-AE" is used.

Event playground

  const app = document.querySelector('ui-calendar');
  app.addEventListener(
    'keydown',
    (e) => e.key === 'Enter' && select(e.target),
  );
  app.addEventListener(
    'click',
    (e) =>
      e.target.hasAttribute('datetime') && select(e.target),
  );
  const select = (node) =>
    console.log(node.getAttribute('datetime') || '');