Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[BUG] [HELP] onDestroy not working? #356

Closed
ReindDooyeweerd opened this issue Jan 27, 2025 · 0 comments
Closed

[BUG] [HELP] onDestroy not working? #356

ReindDooyeweerd opened this issue Jan 27, 2025 · 0 comments
Labels
bug Something isn't working

Comments

@ReindDooyeweerd
Copy link

I wanted to use vanilla-calendar-pro for a Sveltekit project but i am running into an issue when trying to destroy an instance. The Sveltekit component looks like this:

<script lang="ts">
    // Import Svelte components
    import { page } from '$app/state';
    import { onDestroy, onMount } from 'svelte';

    // Import the Calendar class
    // import { Calendar } from 'vanilla-calendar-pro';

    let calendar: any = $state();

    onMount(async () => {
        const { Calendar } = await import('vanilla-calendar-pro');
        console.log('onMount', calendar);
        // Initialize the calendar
        calendar = new Calendar('#calendar', {
            disableAllDates: true,
            enableDates: ['2025-01-26', '2025-01-27', '2025-01-28', '2025-01-29']
        });
        calendar.init();
        console.log('onMount 2', calendar);
    });

    onDestroy(() => {
        console.log('onDestroy', calendar);
        calendar?.destroy();
        console.log('onDestroy 2', calendar);
    });
</script>

<div class="container">
    <div id="calendar"></div>
</div>

When doing a hard refresh on the page the calendar is properly initialized and works like charm, when i navigate away from the page i would expect that the calendar is destroyed but i am seeing this in my console logs:

onDestroy e {type: 'default', inputMode: false, positionToInput: 'left', firstWeekday: 1, monthsToSwitch: 1, …}
onDestroy 2 e {type: 'default', inputMode: false, positionToInput: 'left', firstWeekday: 1, monthsToSwitch: 1, …}

So it looks like it isn't destroyed... and then i navigate to another page where the calendar component should render a calendar and i see this in the logs:

onMount undefined
onMount 2 e {type: 'default', inputMode: false, positionToInput: 'left', firstWeekday: 1, monthsToSwitch: 1, …}

However the calendar itself isnt rendered and when i inspect the element i see an empty <div id="calendar"></div>. Did i found a bug or am i doing something completely stupid (wouldn't be the first time in my life ;) )

Using "vanilla-calendar-pro": "^3.0.3"

@ReindDooyeweerd ReindDooyeweerd added the bug Something isn't working label Jan 27, 2025
@ReindDooyeweerd ReindDooyeweerd changed the title [BUG] onDestroy not working? [BUG] [Help wanted] onDestroy not working? Jan 27, 2025
@ReindDooyeweerd ReindDooyeweerd changed the title [BUG] [Help wanted] onDestroy not working? [BUG] [HELP] onDestroy not working? Jan 27, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants