# Calendar

[component-header:sl-date-picker]

Calendar allows for a user to select dates or even edit events.

```html preview
<sl-date-picker id="cal"></sl-date-picker>

<script>
    const el = document.getElementById('cal');
    el.addEventListener('valueChange', evt => {
        console.log(evt.detail);
    });
</script>
```

[component-metadata:sl-date-picker]