layerchart 2.0.0-next.41 → 2.0.0-next.42

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -107,7 +107,7 @@
107
107
  yearDays.map((date) => {
108
108
  const cellData = dataByDate.get(date) ?? { date };
109
109
  return {
110
- x: timeWeek.count(timeYear(date), date) * cellSize[0],
110
+ x: timeWeek.count(start, date) * cellSize[0],
111
111
  y: date.getDay() * cellSize[1],
112
112
  color: ctx.config.c ? ctx.cGet(cellData) : 'transparent',
113
113
  data: cellData,
@@ -136,14 +136,19 @@
136
136
 
137
137
  {#if monthPath}
138
138
  {#each yearMonths as date}
139
- <MonthPath {date} {cellSize} {...extractLayerProps(monthPath, 'lc-calendar-month-path')} />
139
+ <MonthPath
140
+ {date}
141
+ startOfRange={start}
142
+ {cellSize}
143
+ {...extractLayerProps(monthPath, 'lc-calendar-month-path')}
144
+ />
140
145
  {/each}
141
146
  {/if}
142
147
 
143
148
  {#if monthLabel}
144
149
  {#each yearMonths as date}
145
150
  <Text
146
- x={timeWeek.count(timeYear.floor(date), timeWeek.ceil(date)) * cellSize[0]}
151
+ x={timeWeek.count(start, timeWeek.ceil(date)) * cellSize[0]}
147
152
  value={format(date, 'month', { variant: 'short' })}
148
153
  capHeight="7px"
149
154
  {...extractLayerProps(monthLabel, 'lc-calendar-month-label')}
@@ -15,6 +15,11 @@
15
15
  */
16
16
  cellSize: number | [number, number];
17
17
 
18
+ /**
19
+ * The start date of the calendar (used to calculate week offsets).
20
+ */
21
+ startOfRange: Date;
22
+
18
23
  /**
19
24
  * A bindable reference to the underlying `<path>` element.
20
25
  *
@@ -38,6 +43,7 @@
38
43
  let {
39
44
  date,
40
45
  cellSize: cellSizeProp,
46
+ startOfRange,
41
47
  pathRef: pathRefProp = $bindable(),
42
48
  class: className,
43
49
  ...restProps
@@ -54,12 +60,12 @@
54
60
 
55
61
  // start of month
56
62
  const startDayOfWeek = $derived(date.getDay());
57
- const startWeek = $derived(timeWeek.count(timeYear(date), date));
63
+ const startWeek = $derived(timeWeek.count(startOfRange, date));
58
64
 
59
65
  // end of month
60
66
  const monthEnd = $derived(endOfInterval('month', date));
61
67
  const endDayOfWeek = $derived(monthEnd.getDay());
62
- const endWeek = $derived(timeWeek.count(timeYear(monthEnd), monthEnd));
68
+ const endWeek = $derived(timeWeek.count(startOfRange, monthEnd));
63
69
 
64
70
  const pathData = $derived(`
65
71
  M${(startWeek + 1) * cellSize[0]},${startDayOfWeek * cellSize[1]}
@@ -11,6 +11,10 @@ export type MonthPathPropsWithoutHTML = {
11
11
  * - array - sets [width, height].
12
12
  */
13
13
  cellSize: number | [number, number];
14
+ /**
15
+ * The start date of the calendar (used to calculate week offsets).
16
+ */
17
+ startOfRange: Date;
14
18
  /**
15
19
  * A bindable reference to the underlying `<path>` element.
16
20
  *
package/package.json CHANGED
@@ -5,7 +5,7 @@
5
5
  "license": "MIT",
6
6
  "repository": "techniq/layerchart",
7
7
  "homepage": "https://layerchart.com",
8
- "version": "2.0.0-next.41",
8
+ "version": "2.0.0-next.42",
9
9
  "devDependencies": {
10
10
  "@changesets/cli": "^2.29.6",
11
11
  "@iconify-json/lucide": "^1.2.62",