Integrating react-calendar into Svelte

The react-calendar library is a calendar component library written in React.

You can read more about it here: https://projects.wojtekmaj.pl/react-calendar/.

The react-calendar library takes in various props for customization purposes. But for demonstration purposes, we are only going to focus on two props, value and onChange, which allow us to control the selected date of the library.

We pass the selected date through a prop named value. The onChange prop, on the other hand, is used to pass in an event handler that will be called when the value changes from within the calendar component. We saw how we could handle event handlers in a UI library in the previous section when we discussed CodeMirror.

So, here is what I think using the calendar action would look like:

<div
  use:calendar={selectedDate}
  on:change={(event) => selectedDate = event.detail}
/>

Here, event.detail is the data attached to the...