Calendar.svelte

This is a simple single Svelte component to help create a calendar month view. It's not headless, but allows you to pass the date cell as a slot, for more flexibility of how and what each cell displays.

Depends on date-fns.

View it in action!

Look at src/routes/+page.svelte for usage, and src/lib/Calendar.svelte for implementation. Feel free to copy this code to you own project, since I didn't bother publishing it to npm as a package.

API

Props

• start_on_sunday boolean
  • starts a week on sunday instead of monday, false by default
• view_date Date
  • sets the month the view starts in

Style Props

• --header-margin
• --month-font-weight
• --month-font-size
• --week-days-color
• --week-days-font-weight
• --week-days-margin
• --cell-height