Svelte Scheduler

Calendaring component in Svelte

This project is a work-in-progress. It doesn't work as advertised right now, we're just assessing the shape of things. You might consider avoiding it entirely, or opening a lot of PRs :)

Installation

npm install --save-dev @beyonk/svelte-scheduler

Usage

Create an instance of the Scheduler, and pass it a method to fetch your monthly schedules.

In the example below this is a simple JSON file which has nested years, months, and days.

Inside each day is a reference to a component which should be rendered for that day, and a series of props to pass to it.

Basic usage

// App.svelte
<Scheduler bind:fetchSchedule />

<script>
  import Scheduler from '@beyonk/svelte-scheduler'
  import Popdown from './Popdown.svelte'
  import get from 'just-safe-get'

  async function fetchSchedule (year, month) {
    return get(schedules, [ year, month ])
  }

  const schedules = {
    2019: {
      8: {
        22: {
          component: EventList,
          props: {}
        }
      }
    }
  }
</script>

Our EventList component responsively shows a quick day overview.

// EventList.svelte
<p>
  ... whatever you want here.
</p>

Each render, and each time the month is changed, the fetchSchedule method will be called again. fetchSchedule returns a simple json object of days of the month.

Events

The scheduler fires a select event when a valid day is clicked, and sets the class 'is-selected' on that day in the calendar.

// App.svelte
<Scheduler on:select={select} />

<script>
  import Scheduler from '@beyonk/svelte-scheduler'
  import get from 'just-safe-get'

  function select (e) {
    const { year, month, day } = e.details
    // You can use year/month/day to fetch full information about an event.
  }
</script>

Overview

The scheduler can show a day-overview component when a day is clicked. Specify the 'overview' property on your month data.

The overview component receives the same props as your day component.

// App.svelte
<Scheduler bind:fetchSchedule />

<script>
  import Scheduler from '@beyonk/svelte-scheduler'
  import Popdown from './Popdown.svelte'
  import EventList from './EventList.svelte'
  import get from 'just-safe-get'

  async function fetchSchedule (year, month) {
    return get(schedules, [ year, month ])
  }

  const schedules = {
    2019: {
      8: {
        22: {
          component: EventList,
          overview: Popdown
          props: {}
        }
      }
    }
  }
</script>

Our Popdown component lists full event detail.

// Popdown.svelte
<p>
  ... whatever you want here.
</p>