Hey all, I had a couple issues working with the event handling through the provider.
let api = $state<any>();
const events = $derived( /**...*/ );
function eventCss(ctx: EventContext) {
//...
}
let ThemeProvider = $derived(themeSwapper.mode === 'dark' ? WillowDark : Willow);
const httpProvider = new CalendarHttpProvider('/calendar');
function init() {
api?.setNext(httpProvider);
}
const views = [
//...
];
</script>
<div class="example-calendar" style="height: calc(100vh - 6rem)">
<ThemeProvider>
<Calendar bind:this={api} {init} {events} {date} view="week" {views} {eventCss} />
{#if api}
<Editor {api} />
{/if}
</ThemeProvider>
</div>
The code above has two issues when compared to what the docs say:
- the api.setNext() throws if not null coalesced, suggesting that
bind:this={api} doesn't initialize api
- surely do to the above, all the handlers registered in the providers do not trigger
The fix below seems to fix the problem, and the handlers work.
function init(obj: any) {
api = obj; // initialize the state here
api.setNext(httpProvider);
}
<Calendar {init} {events} {date} view="week" {views} {eventCss} /> // remove the binding
Any idea what's going on? Should I submit an issue on GH?
