svelte-range-calendar 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2018–2026 Wojciech Maj
+Copyright (c) 2026 Adhi Ravishankar
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,60 @@
-# Temporary Holding Version
+# svelte-range-calendar
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+A calendar for your Svelte 5 app, with century, decade, year and month views and range selection. Svelte port of [React-Calendar](https://github.com/wojtekmaj/react-calendar).
+
+## Installation
+
+```sh
+npm install svelte-range-calendar
+```
+
+Requires Svelte 5 or later.
+
+## Usage
+
+```svelte
+<script lang="ts">
+  import Calendar from 'svelte-range-calendar';
+
+  let value = $state<Date | [Date | null, Date | null] | null>(new Date());
+</script>
+
+<Calendar onChange={(nextValue) => (value = nextValue)} selectRange {value} />
+```
+
+Styles are imported automatically. Elements use BEM class names starting with `svelte-calendar`.
+
+`value` is controlled: update it from `onChange`. With `selectRange`, `onChange` is called with `[from, to]` once both ends are selected (`to` is the end of the last day).
+
+## Props
+
+| Prop name                                                                                                                    | Description                                                                                                    | Default value                                    |
+| ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ |
+| value                                                                                                                        | A `Date`, a date string, or a `[from, to]` array of them.                                                      | n/a                                              |
+| onChange                                                                                                                     | `(value, event) => void`, called when the user selects a value.                                                | n/a                                              |
+| selectRange                                                                                                                  | Whether the user selects a range.                                                                              | `false`                                          |
+| allowPartialRange                                                                                                            | Whether `onChange` is called with `[from, null]` after the first click of a range.                             | `false`                                          |
+| returnValue                                                                                                                  | `"start"`, `"end"` or `"range"`; which date `onChange` receives when `selectRange` is off.                     | `"start"`                                        |
+| minDate, maxDate                                                                                                             | Dates the user can select. Partially overlapping periods stay selectable.                                      | n/a                                              |
+| minDetail, maxDetail                                                                                                         | Least and most detailed view: `"century"`, `"decade"`, `"year"`, `"month"`.                                    | `"century"`, `"month"`                           |
+| view (bindable), defaultView                                                                                                 | Displayed view.                                                                                                | `maxDetail`                                      |
+| activeStartDate (bindable), defaultActiveStartDate                                                                           | Beginning of the displayed period.                                                                             | start of the value, or today                     |
+| goToRangeStartOnSelect                                                                                                       | Whether to go to the start of the value when it changes.                                                       | `true`                                           |
+| locale, calendarType                                                                                                         | Locale, and `"gregory"`, `"hebrew"`, `"islamic"` or `"iso8601"`. The type defaults to one matching the locale. | browser locale                                   |
+| showNavigation, showNeighboringMonth, showWeekNumbers, showFixedNumberOfWeeks, showNeighboringDecade, showNeighboringCentury | Display options.                                                                                               | `true`, `true`, `false`, `false`, `true`, `true` |
+| prevLabel, nextLabel, prev2Label, next2Label                                                                                 | Navigation button content. `null` hides the button.                                                            | `‹`, `›`, `«`, `»`                               |
+| prevAriaLabel, nextAriaLabel, prev2AriaLabel, next2AriaLabel, navigationAriaLabel, navigationAriaLive                        | Accessibility labels.                                                                                          | n/a                                              |
+| navigationLabel                                                                                                              | Snippet receiving `{ date, label, locale, view }`.                                                             | n/a                                              |
+| tileClassName, tileContent, tileDisabled                                                                                     | Class (or function), snippet and predicate receiving `{ activeStartDate, date, view }`.                        | n/a                                              |
+| formatDay, formatLongDate, formatMonth, formatMonthYear, formatShortWeekday, formatWeekday, formatYear                       | `(locale, date) => string` formatters.                                                                         | `Intl.DateTimeFormat`                            |
+| onActiveStartDateChange, onViewChange, onDrillDown, onDrillUp                                                                | Called with `{ action, activeStartDate, value, view }`.                                                        | n/a                                              |
+| onClickDay, onClickMonth, onClickYear, onClickDecade                                                                         | `(date, event) => void`.                                                                                       | n/a                                              |
+| class                                                                                                                        | Class name(s) added along with `"svelte-calendar"`.                                                            | n/a                                              |
+
+## Part of a monorepo
+
+`svelte-range-calendar` is part of the [svelte-datetime-pickers monorepo](https://github.com/adhiravishankar/svelte-datetime-pickers). See the [live demo and Storybook](https://adhiravishankar.github.io/svelte-datetime-pickers/).
+
+## License
+
+The MIT License.

package/dist/Calendar.css

@@ -0,0 +1,183 @@
+.svelte-calendar {
+  width: 350px;
+  max-width: 100%;
+  background: white;
+  border: 1px solid #a0a096;
+  font-family: Arial, Helvetica, sans-serif;
+  line-height: 1.125em;
+}
+
+.svelte-calendar,
+.svelte-calendar *,
+.svelte-calendar *:before,
+.svelte-calendar *:after {
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+.svelte-calendar button {
+  margin: 0;
+  border: 0;
+  outline: none;
+}
+
+.svelte-calendar button:enabled:hover {
+  cursor: pointer;
+}
+
+.svelte-calendar__navigation {
+  display: flex;
+  height: 44px;
+  margin-bottom: 1em;
+}
+
+.svelte-calendar__navigation button {
+  min-width: 44px;
+  background: none;
+}
+
+.svelte-calendar__navigation button:disabled {
+  background-color: #f0f0f0;
+}
+
+.svelte-calendar__navigation button:enabled:hover,
+.svelte-calendar__navigation button:enabled:focus {
+  background-color: #e6e6e6;
+}
+
+.svelte-calendar__month-view {
+  display: flex;
+  align-items: flex-end;
+}
+
+.svelte-calendar__month-view__body {
+  flex-grow: 1;
+  min-width: 0;
+}
+
+.svelte-calendar__month-view__weekdays {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  text-align: center;
+  text-transform: uppercase;
+  font: inherit;
+  font-size: 0.75em;
+  font-weight: bold;
+}
+
+.svelte-calendar__month-view__weekdays__weekday {
+  padding: 0.5em;
+}
+
+.svelte-calendar__month-view__weekdays__weekday abbr {
+  text-decoration: none;
+}
+
+.svelte-calendar__month-view__weekNumbers {
+  display: grid;
+  grid-auto-rows: auto;
+  width: 12.5%;
+  flex-shrink: 0;
+}
+
+.svelte-calendar__month-view__weekNumbers .svelte-calendar__tile {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 10px 0;
+  font: inherit;
+  font-size: 0.75em;
+  font-weight: bold;
+}
+
+.svelte-calendar__tiles {
+  display: grid;
+}
+
+.svelte-calendar__month-view__days {
+  grid-template-columns: repeat(7, 1fr);
+}
+
+.svelte-calendar__year-view__months,
+.svelte-calendar__decade-view__years,
+.svelte-calendar__century-view__decades {
+  grid-template-columns: repeat(3, 1fr);
+}
+
+.svelte-calendar__month-view__days__day--weekend {
+  color: #d10000;
+}
+
+.svelte-calendar__month-view__days__day--neighboringMonth,
+.svelte-calendar__decade-view__years__year--neighboringDecade,
+.svelte-calendar__century-view__decades__decade--neighboringCentury {
+  color: #757575;
+}
+
+.svelte-calendar__year-view .svelte-calendar__tile,
+.svelte-calendar__decade-view .svelte-calendar__tile,
+.svelte-calendar__century-view .svelte-calendar__tile {
+  padding: 2em 0.5em;
+}
+
+.svelte-calendar__tile {
+  max-width: 100%;
+  padding: 10px 6.6667px;
+  background: none;
+  text-align: center;
+  font: inherit;
+  font-size: 0.833em;
+}
+
+.svelte-calendar__tile abbr {
+  text-decoration: none;
+}
+
+.svelte-calendar__tile:disabled {
+  background-color: #f0f0f0;
+  color: #ababab;
+}
+
+.svelte-calendar__month-view__days__day--neighboringMonth:disabled,
+.svelte-calendar__decade-view__years__year--neighboringDecade:disabled,
+.svelte-calendar__century-view__decades__decade--neighboringCentury:disabled {
+  color: #cdcdcd;
+}
+
+.svelte-calendar__tile:enabled:hover,
+.svelte-calendar__tile:enabled:focus {
+  background-color: #e6e6e6;
+}
+
+.svelte-calendar__tile--now {
+  background: #ffff76;
+}
+
+.svelte-calendar__tile--now:enabled:hover,
+.svelte-calendar__tile--now:enabled:focus {
+  background: #ffffa9;
+}
+
+.svelte-calendar__tile--hasActive {
+  background: #76baff;
+}
+
+.svelte-calendar__tile--hasActive:enabled:hover,
+.svelte-calendar__tile--hasActive:enabled:focus {
+  background: #a9d4ff;
+}
+
+.svelte-calendar__tile--active {
+  background: #006edc;
+  color: white;
+}
+
+.svelte-calendar__tile--active:enabled:hover,
+.svelte-calendar__tile--active:enabled:focus {
+  background: #1087ff;
+}
+
+.svelte-calendar--selectRange .svelte-calendar__tile--hover {
+  background-color: #e6e6e6;
+}