Calendar - Advanced Customization / Month & Year Selects

[TheGroobi]

Change Type

Correction

Proposed Changes

The Advanced Customization Section is missing the type="" attribute inside the documentation.

<CalendarPrimitive.Root
  {weekdayFormat}
  class={cn("rounded-md border p-3", className)}
  bind:value={value as never}
  bind:placeholder
  {...restProps}
  type="single" // added to work properly
>

I copied the whole component with month and year options and couldn't figure out why it wasn't working since there are no errors when type is not specifies when restProps are spread

brave_x4AnjNC6oP.mp4

Browser: Brave

[TheGroobi]

Also i found out that the state is not being preserved in the current version of code in the docs

Right now the docs for month and day select have this:

(...)
<Calendar.GridBody>
    {#each month.weeks as weekDates}
        <Calendar.GridRow class="mt-2 w-full">
            {#each weekDates as date}
                <Calendar.Cell {date} month={month.value}>
                    <Calendar.Day />
                </Calendar.Cell>
            {/each}
        </Calendar.GridRow>
    {/each}
</Calendar.GridBody>
(...)

brave_Kuexi5LfzT.mp4

It's a custom element but i pretty much copied the whole thing from the docs and just changed the locale + added type="single"

My fix:

(...)
<Calendar.GridBody>
    {#each month.weeks as weekDates}
        <Calendar.GridRow class="mt-2 w-full">
            {#each weekDates as date}
                <Calendar.Cell {date} month={month.value}>
                    {#if date.day === placeholder.day}
                        <Calendar.Day data-selected />
                    {:else}
                        <Calendar.Day />
                    {/if}
                </Calendar.Cell>
            {/each}
        </Calendar.GridRow>
    {/each}
</Calendar.GridBody>
(...)

[huntabyte]

It's meant to be saved as a component and then you use it like this:

<MyCustomCalendar type="single" />
<MyCustomCalendar type="multiple" />

when you hard code it into the component you cannot do the above.

[TheGroobi]

Yea i guess that makes sense, but due to how the docs have ...restParams the compiler does not error out when the
type is not specified

<script lang="ts">
  let {
    value = $bindable(),
    placeholder = $bindable(),
    weekdayFormat,
    class: className,
    ...restProps
  }: WithoutChildrenOrChild<CalendarRootProps> = $props();
</script>

<!-- no error-->

<MyCustomCalendar />

<script lang="ts">
  let {
    value = $bindable(),
    placeholder = $bindable(),
    weekdayFormat,
    class: className,
    type,  //  added 
    ...restProps
  }: WithoutChildrenOrChild<CalendarRootProps> = $props();
</script>

<!-- errors out that type is not specified-->
<MyCustomCalendar />

<!-- No error-->
<MyCustomCalendar type="single" />

[ieedan]

From my testing it does error if type isn't added to the object. Since the type isn't changed at all by doing that.

The error also doesn't change:

Type '{}' is not assignable to type 'WithoutChildrenOrChild<CalendarRootProps> | **undefined'.**

The error is pretty unhelpful though, it would be nice if Svelte was able to improve this.

[huntabyte]

Sorry, this is one of the annoyances with having to destructure all $bindable props is that destructuring + discriminated is a recipe for disaster.

This is how we get around those errors in the calendar.svelte component. Accept TypeScript defeat inside the component to have proper types when you use calendar.svelte everywhere else in the app.