@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 +31 -6
- package/dist/css.mjs.map +1 -1
- package/dist/index.d.ts +3 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.mjs +31 -6
- package/dist/index.mjs.map +1 -1
- package/package.json +3 -3
- package/src/index.test.tsx +40 -0
- package/src/index.tsx +31 -18
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 }).
|
|
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
|
-
|
|
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 &&
|