Skip to content

Commit e149e85

Browse files
pzmarzly6eDesign
authored andcommitted
Improve docs (#44)
* chore: fix markdownlint warnings * chore: docs
1 parent 9a300cf commit e149e85

File tree

1 file changed

+43
-10
lines changed

1 file changed

+43
-10
lines changed

README.md

+43-10
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,49 @@
11
# svelte-calendar
2-
A small date picker built with Svelte. Demo available here: [svelte-calendar](https://6edesign.github.io/svelte-calendar/)
32

4-
# Basic usage (svelte v3):
3+
A small date picker built with Svelte 3. Demo available here: [demo page].
4+
5+
## Basic usage
6+
7+
```html
8+
<Datepicker />
9+
```
10+
11+
## With custom settings
12+
513
```html
614
<Datepicker
7-
format="{dateFormat}"
15+
format={dateFormat}
816
start={threeDaysInPast}
917
end={inThirtyDays}
1018
selectableCallback={noWeekendsSelectableCallback}
1119
/>
1220
```
13-
`start` & `end` are Date objects.
1421

15-
`format` Date formatting uses [timeUtils](https://github.com/6eDesign/timeUtils) formatting.
22+
`start` and `end` are [`Date`] objects.
23+
24+
`format` Date formatting uses [`timeUtils`] formatting (MM/DD/YYYY by default).
25+
26+
`selectableCallback` should be a function that accepts a single date as an argument and returns true (if selectable) or false (if unavailable).
27+
28+
More examples can be found on the [demo page].
29+
30+
## Binding data
31+
32+
```html
33+
<Datepicker
34+
bind:selected
35+
bind:formattedSelected
36+
bind:dateChosen
37+
/>
38+
```
39+
40+
`selected` is a [`Date`] object. `formattedSelected` is a string - it's the `Date` object formatted using [`timeUtils`].
1641

17-
`selectableCallback` should be a function that accepts a single date as an argument and return true (if selectable) or false (if unavailable).
42+
`dateChosen` is a boolean, false by default, true after user selection.
1843

19-
## Developing/Modifying Svelte-Calendar Guide:
20-
*Note that you will need to have [Node.js](https://nodejs.org) installed.*
44+
## Developing/Modifying Svelte-Calendar Guide
45+
46+
*Note that you will need to have [Node.js] installed.*
2147

2248
Install the dependencies...
2349

@@ -26,10 +52,17 @@ cd svelte-calendar
2652
npm install
2753
```
2854

29-
...then start [Rollup](https://rollupjs.org):
55+
...then start [Rollup]:
3056

3157
```bash
3258
npm run dev
3359
```
3460

35-
Navigate to [localhost:5000](http://localhost:5000). You should see your app running. Edit a component file in `src`, save it, and your browser will reload the page so you can see your changes automatically.
61+
Navigate to [localhost:5000]. You should see your app running. Edit a component file in `src`, save it, and your browser will reload the page so you can see your changes automatically.
62+
63+
[demo page]: https://6edesign.github.io/svelte-calendar/
64+
[`timeUtils`]: https://github.com/6eDesign/timeUtils
65+
[`Date`]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date
66+
[Node.js]: https://nodejs.org
67+
[Rollup]: https://rollupjs.org
68+
[localhost:5000]: http://localhost:5000

0 commit comments

Comments
 (0)