soCalendar is a beautiful & simple calendar date picker in TypeScript designed to be beautifully simple, intuitive and lightweight. It is build to be accessible and using modern semantic markup.
Check out the soCalendar demo.
import "socalendar/css"; // or "socalendar/css.min"
import { soCalendar } from "socalendar";
<link href="https://cdn.jsdelivr.net/npm/socalendar/dist/css/socalendar.min.css" rel="stylesheet">`
<script src="https://cdn.jsdelivr.net/npm/socalendar/dist/js/socalendar.browser.min.js"></script>
<script>
const calendar = new SoCalendar();
</script>
Designed and prototyped in Figma, you can see the basic interactions to see what it looks like.
Built in TypeScript & SCSS, it uses Vite to help build and test changes quickly as part of the development process.
npm install
npm run dev
soCalendar was designed and developed by Stewart Orr (https://www.stewartorr.co.uk/socalendar).
The icons are from the beautiful library Phosphor Icons.
The font used in the calendar is Oswald