<script>
  import Calendar from "$/client/components/Calendar.svelte";

  let message = "";


  const format_date = (d) => d.toLocaleDateString("en-US", { year: "numeric", month: "long", day: "numeric" });

  const date_selected = (event) => {
    message = `Date is: ${format_date(event.detail)}`;
  }

  const next_month = (event) => {
    message = `Next! First of Month: ${format_date(event.detail.fom)}`;
  }

  const prev_month = (event) => {
    message = `Previous! First of Month: ${format_date(event.detail.fom)}`;
  }
</script>


<Calendar on:select={ date_selected } on:next={ next_month } on:previous={ prev_month } />

{#if message}
  <h4>{ message }</h4>
{/if}
