@utrecht/calendar-react 1.0.17 → 1.1.0

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.
package/dist/css.mjs CHANGED
@@ -173,6 +173,30 @@ function addMonths(dirtyDate, dirtyAmount) {
173
173
  }
174
174
  }
175
175
 
176
+ /**
177
+ * @name isWeekend
178
+ * @category Weekday Helpers
179
+ * @summary Does the given date fall on a weekend?
180
+ *
181
+ * @description
182
+ * Does the given date fall on a weekend?
183
+ *
184
+ * @param {Date|Number} date - the date to check
185
+ * @returns {Boolean} the date falls on a weekend
186
+ * @throws {TypeError} 1 argument required
187
+ *
188
+ * @example
189
+ * // Does 5 October 2014 fall on a weekend?
190
+ * const result = isWeekend(new Date(2014, 9, 5))
191
+ * //=> true
192
+ */
193
+ function isWeekend(dirtyDate) {
194
+ requiredArgs(1, arguments);
195
+ var date = toDate(dirtyDate);
196
+ var day = date.getDay();
197
+ return day === 0 || day === 6;
198
+ }
199
+
176
200
  /**
177
201
  * @name addMilliseconds
178
202
  * @category Millisecond Helpers
@@ -3604,26 +3628,26 @@ const IconArrowRight = ({ title, titleId, ...props }) => (jsxs("svg", { width: "
3604
3628
 
3605
3629
  const IconArrowRightDouble = ({ title, titleId, ...props }) => (jsxs("svg", { fill: "none", width: "100%", height: "100%", xmlns: "http://www.w3.org/2000/svg", "aria-labelledby": titleId, ...props, children: [title ? jsx("title", { id: titleId, children: title }) : null, jsx("path", { d: "M6.41 6 5 7.41 9.58 12 5 16.59 6.41 18l6-6-6-6Z", fill: "currentColor" }), jsx("path", { d: "m13 6-1.41 1.41L16.17 12l-4.58 4.59L13 18l6-6-6-6Z", fill: "currentColor" })] }));
3606
3630
 
3607
- function createCalendar(today) {
3631
+ function createCalendar(today, displayWeekend) {
3608
3632
  const start = startOfWeek(startOfMonth(today), {
3609
3633
  weekStartsOn: 1 /* Monday */,
3610
3634
  });
3611
3635
  const end = endOfWeek(addWeeks(start, 5), {
3612
3636
  weekStartsOn: 1 /* Monday */,
3613
3637
  });
3614
- return eachDayOfInterval({ start, end });
3638
+ return eachDayOfInterval({ start, end }).filter((date) => displayWeekend || !isWeekend(date));
3615
3639
  }
3616
3640
  /**
3617
3641
  * Calendar Component
3618
3642
  * powered by date-fns, so that make it easy to use the `date-fns` date functions & locale
3619
3643
  * */
3620
- const Calendar = ({ onCalendarClick, events, currentDate, locale: locale$1 = locale, previousYearButtonTitle = 'Previous year', nextYearButtonTitle = 'Next year', previousMonthButtonTitle = 'Previous month', nextMonthButtonTitle = 'Next month', minDate, maxDate, }) => {
3644
+ const Calendar = ({ onCalendarClick, events, currentDate, locale: locale$1 = locale, previousYearButtonTitle = 'Previous year', nextYearButtonTitle = 'Next year', previousMonthButtonTitle = 'Previous month', nextMonthButtonTitle = 'Next month', displayWeekend = true, displayYearNavigation = true, minDate, maxDate, }) => {
3621
3645
  const [visibleMonth, setVisibleMonth] = useState(currentDate || new Date());
3622
3646
  const [selectedDate, setSelectedDate] = useState(currentDate);
3623
- const calendar = createCalendar(visibleMonth);
3647
+ const calendar = createCalendar(visibleMonth, displayWeekend);
3624
3648
  const start = startOfWeek(visibleMonth, { weekStartsOn: 1 });
3625
3649
  const end = endOfWeek(visibleMonth, { weekStartsOn: 1 });
3626
- const currentWeek = eachDayOfInterval({ start, end }).map((day) => day);
3650
+ const currentWeek = eachDayOfInterval({ start, end }).filter((day) => displayWeekend || !isWeekend(day));
3627
3651
  const chunksWeeks = chunk(calendar, calendar.length / 6);
3628
3652
  const weeks = chunksWeeks.map((week) => week.map((date) => {
3629
3653
  const currentEvent = events && events.length > 0 && events.find((e) => isSameDay(endOfDay(parseISO(e.date)), date));
@@ -3644,7 +3668,8 @@ const Calendar = ({ onCalendarClick, events, currentDate, locale: locale$1 = loc
3644
3668
  };
3645
3669
  }
3646
3670
  }));
3647
- return (jsxs("div", { className: "utrecht-calendar", children: [jsx(CalendarNavigation, { children: jsx(CalendarNavigationButtons, { previousIcon: jsx(IconArrowLeftDouble, { title: previousYearButtonTitle }), nextIcon: jsx(IconArrowRightDouble, { title: nextYearButtonTitle }), onPreviousClick: () => setVisibleMonth(setYear(visibleMonth, getYear(visibleMonth) - 1)), onNextClick: () => setVisibleMonth(addYears(visibleMonth, 1)), children: jsx(CalendarNavigationButtons, { previousIcon: jsx(IconArrowLeft, { title: previousMonthButtonTitle }), nextIcon: jsx(IconArrowRight, { title: nextMonthButtonTitle }), onPreviousClick: () => setVisibleMonth(setMonth(visibleMonth, visibleMonth.getMonth() - 1)), onNextClick: () => setVisibleMonth(addMonths(visibleMonth, 1)), children: jsx(CalendarNavigationLabel, { dateTime: format(visibleMonth, 'yyyy-mm'), children: format(visibleMonth, 'LLLL y', { locale: locale$1 }) }) }) }) }), jsxs("table", { className: "utrecht-calendar__table", role: "grid", children: [jsx(CalendarTableWeeksContainer, { children: currentWeek &&
3671
+ const monthNavigation = (jsx(CalendarNavigationButtons, { previousIcon: jsx(IconArrowLeft, { title: previousMonthButtonTitle }), nextIcon: jsx(IconArrowRight, { title: nextMonthButtonTitle }), onPreviousClick: () => setVisibleMonth(setMonth(visibleMonth, visibleMonth.getMonth() - 1)), onNextClick: () => setVisibleMonth(addMonths(visibleMonth, 1)), children: jsx(CalendarNavigationLabel, { dateTime: format(visibleMonth, 'yyyy-mm'), children: format(visibleMonth, 'LLLL y', { locale: locale$1 }) }) }));
3672
+ return (jsxs("div", { className: "utrecht-calendar", children: [jsx(CalendarNavigation, { children: !displayYearNavigation ? (monthNavigation) : (jsx(CalendarNavigationButtons, { previousIcon: jsx(IconArrowLeftDouble, { title: previousYearButtonTitle }), nextIcon: jsx(IconArrowRightDouble, { title: nextYearButtonTitle }), onPreviousClick: () => setVisibleMonth(setYear(visibleMonth, getYear(visibleMonth) - 1)), onNextClick: () => setVisibleMonth(addYears(visibleMonth, 1)), children: monthNavigation })) }), jsxs("table", { className: "utrecht-calendar__table", role: "grid", children: [jsx(CalendarTableWeeksContainer, { children: currentWeek &&
3648
3673
  currentWeek.length > 0 &&
3649
3674
  currentWeek.map((day, index) => (jsx(CalendarTableWeeksItem, { scope: "col", abbr: format(day, 'EEEE', { locale: locale$1 }), children: format(day, 'EEEEEE', { locale: locale$1 }) }, index))) }), jsx(CalendarTableDaysContainer, { children: weeks &&
3650
3675
  weeks.length > 0 &&