Availability Input Component

Reusable Svelte component for inputting, combining, and visualising personal time availability.

🌐 Take me to the demo!

Anticipated use-case is for applications where multiple people need to find a common time to meet, similar to schej.it or when2meet

Usage

Add to your project with npm i availability-input (view on npm)

Quick-Start

<script>
  import { Availability, blankAvailability, constructUniformDatetimeRanges, getTodayWeek, timeToInt } from "availability-input"
</script>

<Availability availabilities={
  blankAvailability(
    constructUniformDatetimeRanges(
      getTodayWeek(),
      [timeToInt("7:00 am"), timeToInt("10:00 pm")]
    ),
  )}
/>

Props are documented on the AvailabilityProps interface

For more examples, view the Storybook files

Import the styles

Tailwind Add @source '../node_modules/availability-input/dist' to app.css (why?)

No Tailwind

Developing

1. Install pnpm
2. Install dependencies: pnpm install
3. Run Storybook to preview and test: npm run storybook
4. Run automated tests in watch mode: npm run test:unit