https://github.com/beyonk-group/svelte-scheduler
Scheduling and Calendaring component for Svelte
https://github.com/beyonk-group/svelte-scheduler
beyonk calendar component dates diary events journal scheduler svelte
Last synced: 10 months ago
JSON representation
Scheduling and Calendaring component for Svelte
- Host: GitHub
- URL: https://github.com/beyonk-group/svelte-scheduler
- Owner: beyonk-group
- Created: 2019-08-19T11:26:10.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T05:15:06.000Z (over 3 years ago)
- Last Synced: 2025-05-30T13:48:31.421Z (11 months ago)
- Topics: beyonk, calendar, component, dates, diary, events, journal, scheduler, svelte
- Language: JavaScript
- Size: 1.02 MB
- Stars: 6
- Watchers: 3
- Forks: 2
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Svelte Scheduler
[](http://standardjs.com) [](https://circleci.com/gh/beyonk-adventures/svelte-scheduler) [](https://svelte.dev)
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.
```jsx
Basic usage
// App.svelte
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: {}
}
}
}
}
```
Our EventList component responsively shows a quick day overview.
```jsx
// EventList.svelte
... whatever you want here.
```
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
```jsx
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
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.
}
```
## Overview
```jsx
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
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: {}
}
}
}
}
```
Our Popdown component lists full event detail.
```jsx
// Popdown.svelte
... whatever you want here.
```