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') || '');