How to get the date clicked from the InlineCalendar view

[mylastore]

How do I get the date that was clicked from the InlineCalendar view?

Can you enable discussion here on GitHub for this type of question?

[mylastore]

I figure this out but not sure if there is a better way, anyways here's the code.

<script>
  import dayjs from 'dayjs'
  import {InlineCalendar} from 'svelte-calendar'

  let store

  const theme = {
    calendar: {
      width: '600px',
      shadow: '0px 0px 5px rgba(0, 0, 0, 0.25)'
    }
  }
</script>

<div class="container mt-5">
  <div class="d-flex justify-content-center">
    <InlineCalendar {theme} bind:store/>
  </div>
  {#if $store?.hasChosen}
    <div class="text-center mt-3">
      <strong>DATE SELECTED:</strong> {dayjs($store.selected).format('MMM D, YYYY')}
    </div>
  {/if}
</div>

[gevera]

That's the correct way

[devluxca]

My abstraction to this component is

// name of component: DatePicker.svelte
<script>
    import 'dayjs/locale/pt-br.js';
    import dayjs from 'dayjs';
    import { InlineCalendar, Swappable } from 'svelte-calendar';

    export let onChange

    const theme = {
        calendar: {
            width: '600px',
            shadow: '0px 0px 5px rgba(0, 0, 0, 0.25)',
            colors: {
                background: {
                    highlight: '#68B096'
                }
            }
        }
    };

    let store
    let locale = 'pt-br'
    dayjs.locale(locale)

    $: $store?.selected ? onChange(new Date($store?.selected)) : () => {}
</script>

<Swappable value={{ locale }} vertical={false}>
    <InlineCalendar {theme} format={'DD/MM/YYYY'} start={new Date()} bind:store />
</Swappable>

and use:

<script>

let date
const changeDate = (newDate) => { date = newDate }
</script>

<DatePicker onChange={changeDate}