react-availability-calendar
Advanced tools
Comparing version 0.3.11 to 0.3.12
/// <reference types="react" /> | ||
import { MonthlyAvailabilityCalendarProps } from './types'; | ||
export declare const MonthlyAvailabilityCalendar: ({ availabilities, onAvailabilitySelected, onDaySelected, slotLengthMs, slotStepMs, date, style, overrides, }: MonthlyAvailabilityCalendarProps & { | ||
export declare const MonthlyAvailabilityCalendar: ({ availabilities, excludeWeekends, excludeFn, onAvailabilitySelected, onDaySelected, slotLengthMs, slotStepMs, date, style, overrides, }: MonthlyAvailabilityCalendarProps & { | ||
overrides?: { | ||
@@ -5,0 +5,0 @@ ToolBar: import("./overrides/general").OverridableComponentProps<import("./types").ToolBarProps, {}, {}>; |
@@ -176,6 +176,14 @@ 'use strict'; | ||
function availByIndex(days, avails) { | ||
function isWeekend(date) { | ||
return [0, 6].indexOf(date.getDay()) >= 0; | ||
} | ||
function shouldIncludeDate(d, excludeWeekends, excludeFn) { | ||
return (!excludeWeekends || !isWeekend(d)) && (!excludeFn || !excludeFn(d)); | ||
} | ||
function availByIndex(days, avails, excludeWeekends, excludeFn) { | ||
return (days || []).map(function (d) { | ||
return { | ||
hasAvail: avails.some(function (a) { | ||
hasAvail: shouldIncludeDate(d, excludeWeekends, excludeFn) && avails.some(function (a) { | ||
return datesEqual(a.startDate, d); | ||
@@ -366,2 +374,3 @@ }) | ||
monthDaysForDate: monthDaysForDate, | ||
shouldIncludeDate: shouldIncludeDate, | ||
chunkify: chunkify | ||
@@ -1011,2 +1020,4 @@ }; | ||
var availabilities = _ref.availabilities, | ||
excludeWeekends = _ref.excludeWeekends, | ||
excludeFn = _ref.excludeFn, | ||
onAvailabilitySelected = _ref.onAvailabilitySelected, | ||
@@ -1056,6 +1067,10 @@ onDaySelected = _ref.onDaySelected, | ||
var availsByIndex = React.useMemo(function () { | ||
return utils.availByIndex(days, availabilities); | ||
return utils.availByIndex(days, availabilities, excludeWeekends || false, excludeFn); | ||
}, [days, availabilities, utils]); | ||
var viewingDayAvailabilities = React.useMemo(function () { | ||
if (selectedDate !== null) { | ||
if (!utils.shouldIncludeDate(selectedDate, excludeWeekends || false, excludeFn)) { | ||
return []; | ||
} | ||
return (availabilities || []).filter(function (_ref2) { | ||
@@ -1113,2 +1128,4 @@ var startDate = _ref2.startDate; | ||
onCalRangeChange = _ref.onCalRangeChange, | ||
excludeFn = _ref.excludeFn, | ||
excludeWeekends = _ref.excludeWeekends, | ||
slotLengthMs = _ref.slotLengthMs, | ||
@@ -1178,2 +1195,4 @@ slotStepMs = _ref.slotStepMs, | ||
availabilities: availabilities, | ||
excludeFn: excludeFn, | ||
excludeWeekends: excludeWeekends, | ||
date: date, | ||
@@ -1180,0 +1199,0 @@ onAvailabilitySelected: onAvailabilitySelected, |
@@ -1,2 +0,2 @@ | ||
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react"),a=(e=t)&&"object"==typeof e&&"default"in e?e.default:e;function n(){return(n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e}).apply(this,arguments)}function r(e){function t(e){return e.endDate.getTime()-e.startDate.getTime()}function a(e,t){t=t>0?Math.min(864e5,t):Math.max(-864e5,t);var a=(e=Math.min(864e5,Math.max(0,e)))-t;return a<0?a+864e5:a}function n(e,t){var n=e.map((function(e){return[a(e[0],t)%864e5,a(e[1],t)%864e5]})),r=n.map((function(e,t){return e[1]<e[0]?t:-1})).filter((function(e){return e>=0})),o=Array.isArray(r),l=0;for(r=o?r:r[Symbol.iterator]();;){var s;if(o){if(l>=r.length)break;s=r[l++]}else{if((l=r.next()).done)break;s=l.value}var i=n[s];n[s]=[-1,-1],n.push([i[0],864e5]),n.push([0,i[1]])}var u=n.filter((function(e){return e[0]>=0}));return u.sort((function(e,t){return e[0]-t[0]})),u}function r(e,t){if(!t)return 0;var a=new Date(e),n=new Date(a.toLocaleString("en-US",{timeZone:t}));return 36e5*Math.floor((n.getTime()-a.getTime())/36e5+.5)}function o(e,t){return e&&t&&e.getFullYear()===t.getFullYear()&&e.getMonth()===t.getMonth()&&e.getDate()===t.getDate()}function l(e,t,a,o,l){for(var s=[].concat(a),i=new Date(o.getFullYear(),o.getMonth(),o.getDate()).getTime(),u=new Date(l.getFullYear(),l.getMonth(),l.getDate()).getTime(),m=i;m<=u;m+=864e5){var d=n(e,r(m,t)),c=Array.isArray(d),f=0;for(d=c?d:d[Symbol.iterator]();;){var v;if(c){if(f>=d.length)break;v=d[f++]}else{if((f=d.next()).done)break;v=f.value}var h=v;s.push({startDate:new Date(m+h[0]),endDate:new Date(m+h[1])})}s.push({startDate:new Date(m+864e5-1),endDate:new Date(m+864e5)})}return s}return{msInHour:36e5,datesEqual:o,formatAsMonth:function(t){return e(t).format("MMM YYYY")},sameMonth:function(t,a){return o(e(t).startOf("month").toDate(),e(a).startOf("month").toDate())},formatAsDateWithTime:function(t){return e(t).format("ddd, MMM Do h:mma")},formatAsDateJustTime:function(t){return e(t).format("h:mma")},formatAsDate:function(t){return e(t).format("ddd, MMM Do YYYY")},shouldHideWeek:function(t,a,n){return t&&(r=a[0],!o(e(t).startOf("week").toDate(),e(r).startOf("week").toDate()))&&n.length>0;var r},availByIndex:function(e,t){return(e||[]).map((function(e){return{hasAvail:t.some((function(t){return o(t.startDate,e)}))}}))},addBlockOutBookings:l,availabilitiesFromBookings:function(e,t,a,n,r,o){var s,i=Math.max((s=n.getTime(),36e5*Math.floor(s/36e5)+36e5),r.getTime()),u=new Date(i);if(o.getTime()<=u.getTime())return[];var m=[{startDate:u,endDate:o}],d=l(e,t,a,u,o).sort((function(e,t){return e.startDate.getTime()-t.startDate.getTime()})),c=Array.isArray(d),f=0;for(d=c?d:d[Symbol.iterator]();;){var v;if(c){if(f>=d.length)break;v=d[f++]}else{if((f=d.next()).done)break;v=f.value}var h=v,y=m[m.length-1],D=h.startDate.getTime(),g=h.endDate.getTime();if(h.startDate&&h.endDate&&!(D>=g))if(D<y.startDate.getTime())y.startDate=new Date(Math.max(y.startDate.getTime(),g));else if(D<y.endDate.getTime()){var p=y.endDate;y.endDate=new Date(D),g<p.getTime()&&m.push({startDate:new Date(g),endDate:p})}}return m},toStartAndEnd:function(e){var t={startDate:e.start||e[0],endDate:e.end||e[e.length-1]};return t.startDate.getTime()===t.endDate.getTime()&&(t.endDate=new Date(t.endDate.getTime()+864e5)),t},monthRangeForDate:function(t){return{start:e(t).startOf("month").toDate(),end:e(t).endOf("month").toDate()}},monthDaysForDate:function(t){for(var a=e(t).startOf("month"),n=e(t).endOf("month"),r=a.startOf("week"),o=n.endOf("week").diff(r,"days")+1,l=[],s=[],i=r,u=Math.floor(o/7),m=0;m<u;++m){var d=[];l.push(d);for(var c=0;c<7;++c)d.push(i.toDate()),s.push(i.toDate()),i.add(1,"day")}return{weeks:l,days:s}},chunkify:function(e,a,n){var r=[],o=e,l=Array.isArray(o),s=0;for(o=l?o:o[Symbol.iterator]();;){var i;if(l){if(s>=o.length)break;i=o[s++]}else{if((s=o.next()).done)break;i=s.value}for(var u=i,m=u.endDate.getTime(),d=u.startDate.getTime();d<m;d+=n){var c=d,f={startDate:new Date(c),endDate:new Date(Math.min(m,c+a))};t(f)>=a&&r.push(f)}}return r}}}var o={dayClassBase:"rounded-circle",dayClassSelected:"border-primary",dayClassHasAvailability:"border-info",dayClassDefault:"border border-default",slotsContainerStyleShow:{transition:"transform 300ms",transform:"scale(1)"},slotsContainerStyleHide:{transition:"transform 300ms",transform:"scale(0)"},slotContainerCloseClass:"close",slotButtonClass:"btn btn-primary",toolBarStyle:{flexWrap:"nowrap",width:"100%",minHeight:50},toolBarButtonsContainerClass:"border btn-group w-100",toolBarButtonClass:"btn",toolBarLabelClass:"btn btn-link",requestAppointmentLabel:"Request Appointment"},l={format:function(e){throw new Error("not implemented")},startOf:function(e){throw new Error("not implemented")},endOf:function(e){throw new Error("not implemented")},add:function(e,t){throw new Error("not implemented")},diff:function(e,t,a){throw new Error("not implemented")},toDate:function(){throw new Error("not implemented")}},s=a.createContext({moment:function(){return l},utils:r((function(){return l})),theme:o}),i=function(){return t.useContext(s)},u=function(e){var n=e.moment,o=e.theme,l=e.children,i=t.useMemo((function(){return r(n)}),[n]);return a.createElement(s.Provider,{value:{moment:n,utils:i,theme:o}},l)};function m(e,t){return"function"==typeof e?e(t||{}):e}function d(e,t){return"function"==typeof e?e(t||{}):e}function c(e,t,a,r,o,l){return void 0===e?{Root:t.Root,className:d(t.className,a),style:n({},m(t.style,a)),internalProps:t.internalProps}:{Root:e.Root||t.Root,className:d(e.className,a)||d(t.className,a),style:n({},m(t.style,a),{},m(e.style,a)),internalProps:n({},t.internalProps,{},e.internalProps)}}function f(e,t){return c(e?e.ToolBar:void 0,t,{})}function v(e,t){return c(e?e.ToolBarButton:void 0,t,{})}function h(e,t){return c(e?e.Weekdays:void 0,t,{})}function y(e,t){return c(e?e.Weekday:void 0,t,{})}function D(e,t){return c(e?e.DayCells:void 0,t,{})}function g(e,t,a){return c(e?e.DayCell:void 0,t,a)}function p(e,t){return c(e?e.Availabilities:void 0,t,{})}function b(e,t,a){return c(e?e.AvailSlot:void 0,t,a)}var w=function(e){var t=e.localizer.messages,n=e.label,r=e.onNavigate,o=e.overrides,l=i().theme,s=f(o,{style:l.toolBarStyle,className:l.toolBarButtonsContainerClass}),u=s.Root,m=s.style,d=s.className;return u?a.createElement(u,Object.assign({},{localizer:{messages:t},label:n,onNavigate:r})):a.createElement("div",{style:m,className:d,role:"group"},a.createElement(C,{theme:l,overrides:o,onClick:function(){return r("TODAY")},message:t.today}),a.createElement(C,{theme:l,overrides:o,onClick:function(){return r("PREV")},message:t.previous}),a.createElement(C,{theme:l,overrides:o,onClick:function(){return r("NEXT")},message:t.next}),a.createElement("button",{disabled:!0,className:l.toolBarLabelClass,style:{width:110}},a.createElement("span",null,n)))};function C(e){var t=e.message,n=e.onClick,r=v(e.overrides,{className:e.theme.toolBarButtonClass}),o=r.Root,l=r.style,s=r.internalProps,i=r.className;return void 0!==o?a.createElement(o,{message:t,onClicked:n}):a.createElement("button",Object.assign({className:i,onClick:n,style:l},s),t)}var E=["S","M","T","W","Th","F","Sa"],k=function(e){var t=e.overrides,n=h(t,{style:{display:"flex",justifyContent:"flex-start",flexWrap:"nowrap",flexDirection:"row"}}),r=n.Root,o=n.style;if(r)return a.createElement(r,null);var l=y(t,{className:"border border-default",style:{width:50,height:50,marginBottom:10,display:"flex",justifyContent:"center",alignItems:"center"}}),s=l.Root,i=l.className,u=l.style;return a.createElement("div",{style:o},E.map((function(e){return s?a.createElement(s,{weekday:e}):a.createElement("div",{className:i,key:e,style:u},e)})))};function x(e){var t=e.theme,n=e.onAvailabilitySelected,r=e.s,o=e.formatAsDateJustTime,l=b(e.overrides,{className:t.slotButtonClass,style:{minWidth:200}},{date:r.startDate}),s=l.Root,i=l.className,u=l.style;return s?a.createElement(s,Object.assign({},{theme:t,onAvailabilitySelected:n,s:r,formatAsDateJustTime:o})):a.createElement("div",{style:{marginBottom:10}},a.createElement("button",{className:i,disabled:!1,style:u,onClick:function(){return n({startDate:new Date(r.startDate),endDate:new Date(r.endDate)})}},o(new Date(r.startDate))))}var S=function(e){var t=e.viewingDayAvailabilities,n=e.handleUnselect,r=e.onAvailabilitySelected,o=e.show,l=e.slotStepMs,s=e.slotLengthMs,i=e.utils,u=e.theme,m=e.overrides,d=p(m,{style:o?u.slotsContainerStyleShow:u.slotsContainerStyleHide}),c=d.Root,f=d.style;return c?a.createElement(c,Object.assign({},{viewingDayAvailabilities:t,handleUnselect:n,onAvailabilitySelected:r,show:o,slotStepMs:l,slotLengthMs:s,utils:i,theme:u})):a.createElement("div",{style:f},o&&a.createElement("div",{className:"mt-2 mr-1"},a.createElement("button",{type:"button",className:u.slotContainerCloseClass,"aria-label":"Close",style:{outline:"none"},onClick:n},a.createElement("span",{"aria-hidden":"true"},"×")),a.createElement(A,{theme:u,durationMinutes:60,avails:t,onAvailabilitySelected:r,slotLengthMs:s,slotStepMs:l,utils:i,overrides:m}),t.length>7&&a.createElement("button",{type:"button",className:u.slotContainerCloseClass,"aria-label":"Close",style:{outline:"none"},onClick:n},a.createElement("span",{"aria-hidden":"true"},"×"))))},A=function(e){var n=e.avails,r=e.slotLengthMs,o=e.slotStepMs,l=e.onAvailabilitySelected,s=e.theme,i=e.utils,u=e.overrides,m=i.chunkify,d=i.msInHour,c=i.formatAsDate,f=i.formatAsDateJustTime,v=t.useMemo((function(){return m(n.map((function(e){return{startDate:e.startDate,endDate:e.endDate}})),r||1*d,o||.5*d)}),[n,d,m,r,o]);return a.createElement("div",null,a.createElement("h4",null,s.requestAppointmentLabel),a.createElement("h5",null,n&&n.length>0?c(n[0].startDate):""),v.map((function(e,t){return a.createElement(x,Object.assign({key:"b_"+t},{theme:s,onAvailabilitySelected:l,s:e,formatAsDateJustTime:f,overrides:u}))})))},M=function(e){var t=e.date,r=e.shouldDisplay,o=e.dayIndexInWeek,l=e.weekIndexInCalRange,s=e.availsByIndex,i=e.selectedDate,u=e.handleSelected,m=e.moment,d=e.utils,c=e.theme,f=e.overrides,v=7*l+o,h=!!i&&d.datesEqual(t,i),y=s[v].hasAvail,D=g(f,{className:c.dayClassBase+" "+(i&&d.datesEqual(t,i)?c.dayClassSelected:s[v].hasAvail?c.dayClassHasAvailability:c.dayClassDefault),style:{cursor:"pointer",border:i&&d.datesEqual(t,i)?"4px solid":s[v].hasAvail?"3px solid":"",height:50,width:50,display:"flex",justifyContent:"center",alignItems:"center"}},{date:t,isSelected:h,hasAvail:y}),p=D.Root,b=D.style,w=D.className;if(p)return a.createElement(p,Object.assign({},{shouldDisplay:r,date:t,dayIndexInWeek:o,weekIndexInCalRange:l,availsByIndex:s,selectedDate:i,handleSelected:u,moment:m,utils:d,theme:c}));var C=r?b:n({},b,{visibility:"hidden"});return a.createElement("div",{className:w,style:C,onClick:function(){return u(t)}},m(t).format("D"))};function T(e){var t=e.week,n=e.date,r=e.selectedDate,o=e.weekIndexInCalRange,l=e.handleSelected,s=e.availsByIndex,i=e.moment,u=e.utils,m=e.theme,d=e.overrides,c=D(d,{style:{display:"flex",justifyContent:"flex-start",flexWrap:"nowrap",flexDirection:"row"}}),f=c.Root,v=c.style;return f?a.createElement(f,Object.assign({},{date:n,week:t,selectedDate:r,weekIndexInCalRange:o,handleSelected:l,availsByIndex:s,moment:i,utils:u,theme:m})):a.createElement("div",{style:v},t.map((function(e,t){return a.createElement(M,Object.assign({key:"d_"+t},{shouldDisplay:u.sameMonth(e,n),date:e,selectedDate:r,weekIndexInCalRange:o,dayIndexInWeek:t,handleSelected:l,availsByIndex:s,moment:i,utils:u,theme:m,overrides:d}))})))}var O=function(e){var r=e.availabilities,o=e.onAvailabilitySelected,l=e.onDaySelected,s=e.slotLengthMs,u=e.slotStepMs,m=e.date,d=e.style,c=e.overrides,f=i(),v=f.moment,h=f.theme,y=f.utils,D=t.useState(null),g=D[0],p=D[1];t.useEffect((function(){p(null),l&&l(null)}),[m]);var b=function(e){g&&y.datesEqual(e,g)?(p(null),l&&l(null)):(p(e),l&&l(e))},w=t.useMemo((function(){return y.monthDaysForDate(m)}),[m,y]),C=w.days,E=w.weeks,x=t.useMemo((function(){return y.availByIndex(C,r)}),[C,r,y]),A=t.useMemo((function(){return null!==g?(r||[]).filter((function(e){return y.datesEqual(e.startDate,g)})):[]}),[g,r,y]);return a.createElement("div",{style:n({minHeight:368},d)},a.createElement(k,{overrides:c}),E.map((function(e,t){return y.shouldHideWeek(g,e,A)?null:a.createElement(a.Fragment,{key:"w_"+t},a.createElement(T,Object.assign({},{date:m,week:e,selectedDate:g,weekIndexInCalRange:t,handleSelected:b,availsByIndex:x,moment:v,utils:y,theme:h,overrides:c})))})),a.createElement(S,Object.assign({},{show:!!g&&A.length>0,onAvailabilitySelected:o,viewingDayAvailabilities:A,handleUnselect:function(){l&&l(null),p(null)},slotLengthMs:s,slotStepMs:u,utils:y,theme:h,overrides:c})))},B=function(e){var n=e.initialDate,r=e.onAvailabilitySelected,o=e.onDaySelected,l=e.blockOutPeriods,s=e.providerTimeZone,u=e.bookings,m=e.avails,d=e.onCalRangeChange,c=e.slotLengthMs,f=e.slotStepMs,v=e.overrides,h=i(),y=h.moment,D=h.utils,g=t.useState(n||new Date)[0],p=t.useState(D.monthRangeForDate(g)),b=p[0],C=p[1],E=t.useState(g),k=E[0],x=E[1],S=t.useRef(null);t.useEffect((function(){S.current!==b&&(d&&d(b),S.current=b)}),[b,d]);var A=t.useMemo((function(){if(m)return m;var e=D.toStartAndEnd(b);return D.availabilitiesFromBookings(l||[],s,u,new Date,e.startDate,e.endDate)}),[m,u,s,b,g,l,D]);return a.createElement("div",null,a.createElement(w,{onNavigate:function(e){if("TODAY"===e){var t=new Date;return x(t),void C(D.monthRangeForDate(t))}if("NEXT"===e||"PREV"===e){var a=y(k).add("NEXT"===e?1:-1,"month").toDate();x(a),C(D.monthRangeForDate(a))}},label:D.formatAsMonth(k),localizer:{messages:{today:"Today",previous:"Previous",next:"Next"}},overrides:v}),a.createElement(O,{availabilities:A,date:k,onAvailabilitySelected:r,onDaySelected:o,slotLengthMs:c,slotStepMs:f,overrides:v}))};exports.AvailSlot=x,exports.AvailSlots=S,exports.AvailabilityCalendar=function(e){var t=e.moment,r=e.theme,l=function(e,t){if(null==e)return{};var a,n,r={},o=Object.keys(e);for(n=0;n<o.length;n++)t.indexOf(a=o[n])>=0||(r[a]=e[a]);return r}(e,["moment","theme"]);return a.createElement(u,{moment:t,theme:r?n({},o,{},r):o},a.createElement(B,Object.assign({},l)))},exports.createUtils=r,exports.defaultComponents={ToolBar:{},ToolBarButton:{},Weekdays:{},Weekday:{},DayCells:{},DayCell:{},Availabilities:{},AvailSlot:{}},exports.defaultTheme=o,exports.getAvailOverride=b,exports.getAvailsOverride=p,exports.getDayCellOverride=g,exports.getDayCellsOverride=D,exports.getToolBarButtonOverride=v,exports.getToolBarOverride=f,exports.getWeekdayOverride=y,exports.getWeekdaysOverride=h; | ||
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react"),a=(e=t)&&"object"==typeof e&&"default"in e?e.default:e;function n(){return(n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e}).apply(this,arguments)}function r(e){function t(e){return e.endDate.getTime()-e.startDate.getTime()}function a(e,t){t=t>0?Math.min(864e5,t):Math.max(-864e5,t);var a=(e=Math.min(864e5,Math.max(0,e)))-t;return a<0?a+864e5:a}function n(e,t){var n=e.map((function(e){return[a(e[0],t)%864e5,a(e[1],t)%864e5]})),r=n.map((function(e,t){return e[1]<e[0]?t:-1})).filter((function(e){return e>=0})),o=Array.isArray(r),l=0;for(r=o?r:r[Symbol.iterator]();;){var s;if(o){if(l>=r.length)break;s=r[l++]}else{if((l=r.next()).done)break;s=l.value}var i=n[s];n[s]=[-1,-1],n.push([i[0],864e5]),n.push([0,i[1]])}var u=n.filter((function(e){return e[0]>=0}));return u.sort((function(e,t){return e[0]-t[0]})),u}function r(e,t){if(!t)return 0;var a=new Date(e),n=new Date(a.toLocaleString("en-US",{timeZone:t}));return 36e5*Math.floor((n.getTime()-a.getTime())/36e5+.5)}function o(e,t,a){return!(t&&(n=e,[0,6].indexOf(n.getDay())>=0)||a&&a(e));var n}function l(e,t){return e&&t&&e.getFullYear()===t.getFullYear()&&e.getMonth()===t.getMonth()&&e.getDate()===t.getDate()}function s(e,t,a,o,l){for(var s=[].concat(a),i=new Date(o.getFullYear(),o.getMonth(),o.getDate()).getTime(),u=new Date(l.getFullYear(),l.getMonth(),l.getDate()).getTime(),d=i;d<=u;d+=864e5){var m=n(e,r(d,t)),c=Array.isArray(m),f=0;for(m=c?m:m[Symbol.iterator]();;){var v;if(c){if(f>=m.length)break;v=m[f++]}else{if((f=m.next()).done)break;v=f.value}var h=v;s.push({startDate:new Date(d+h[0]),endDate:new Date(d+h[1])})}s.push({startDate:new Date(d+864e5-1),endDate:new Date(d+864e5)})}return s}return{msInHour:36e5,datesEqual:l,formatAsMonth:function(t){return e(t).format("MMM YYYY")},sameMonth:function(t,a){return l(e(t).startOf("month").toDate(),e(a).startOf("month").toDate())},formatAsDateWithTime:function(t){return e(t).format("ddd, MMM Do h:mma")},formatAsDateJustTime:function(t){return e(t).format("h:mma")},formatAsDate:function(t){return e(t).format("ddd, MMM Do YYYY")},shouldHideWeek:function(t,a,n){return t&&(r=a[0],!l(e(t).startOf("week").toDate(),e(r).startOf("week").toDate()))&&n.length>0;var r},availByIndex:function(e,t,a,n){return(e||[]).map((function(e){return{hasAvail:o(e,a,n)&&t.some((function(t){return l(t.startDate,e)}))}}))},addBlockOutBookings:s,availabilitiesFromBookings:function(e,t,a,n,r,o){var l,i=Math.max((l=n.getTime(),36e5*Math.floor(l/36e5)+36e5),r.getTime()),u=new Date(i);if(o.getTime()<=u.getTime())return[];var d=[{startDate:u,endDate:o}],m=s(e,t,a,u,o).sort((function(e,t){return e.startDate.getTime()-t.startDate.getTime()})),c=Array.isArray(m),f=0;for(m=c?m:m[Symbol.iterator]();;){var v;if(c){if(f>=m.length)break;v=m[f++]}else{if((f=m.next()).done)break;v=f.value}var h=v,y=d[d.length-1],D=h.startDate.getTime(),g=h.endDate.getTime();if(h.startDate&&h.endDate&&!(D>=g))if(D<y.startDate.getTime())y.startDate=new Date(Math.max(y.startDate.getTime(),g));else if(D<y.endDate.getTime()){var p=y.endDate;y.endDate=new Date(D),g<p.getTime()&&d.push({startDate:new Date(g),endDate:p})}}return d},toStartAndEnd:function(e){var t={startDate:e.start||e[0],endDate:e.end||e[e.length-1]};return t.startDate.getTime()===t.endDate.getTime()&&(t.endDate=new Date(t.endDate.getTime()+864e5)),t},monthRangeForDate:function(t){return{start:e(t).startOf("month").toDate(),end:e(t).endOf("month").toDate()}},monthDaysForDate:function(t){for(var a=e(t).startOf("month"),n=e(t).endOf("month"),r=a.startOf("week"),o=n.endOf("week").diff(r,"days")+1,l=[],s=[],i=r,u=Math.floor(o/7),d=0;d<u;++d){var m=[];l.push(m);for(var c=0;c<7;++c)m.push(i.toDate()),s.push(i.toDate()),i.add(1,"day")}return{weeks:l,days:s}},shouldIncludeDate:o,chunkify:function(e,a,n){var r=[],o=e,l=Array.isArray(o),s=0;for(o=l?o:o[Symbol.iterator]();;){var i;if(l){if(s>=o.length)break;i=o[s++]}else{if((s=o.next()).done)break;i=s.value}for(var u=i,d=u.endDate.getTime(),m=u.startDate.getTime();m<d;m+=n){var c=m,f={startDate:new Date(c),endDate:new Date(Math.min(d,c+a))};t(f)>=a&&r.push(f)}}return r}}}var o={dayClassBase:"rounded-circle",dayClassSelected:"border-primary",dayClassHasAvailability:"border-info",dayClassDefault:"border border-default",slotsContainerStyleShow:{transition:"transform 300ms",transform:"scale(1)"},slotsContainerStyleHide:{transition:"transform 300ms",transform:"scale(0)"},slotContainerCloseClass:"close",slotButtonClass:"btn btn-primary",toolBarStyle:{flexWrap:"nowrap",width:"100%",minHeight:50},toolBarButtonsContainerClass:"border btn-group w-100",toolBarButtonClass:"btn",toolBarLabelClass:"btn btn-link",requestAppointmentLabel:"Request Appointment"},l={format:function(e){throw new Error("not implemented")},startOf:function(e){throw new Error("not implemented")},endOf:function(e){throw new Error("not implemented")},add:function(e,t){throw new Error("not implemented")},diff:function(e,t,a){throw new Error("not implemented")},toDate:function(){throw new Error("not implemented")}},s=a.createContext({moment:function(){return l},utils:r((function(){return l})),theme:o}),i=function(){return t.useContext(s)},u=function(e){var n=e.moment,o=e.theme,l=e.children,i=t.useMemo((function(){return r(n)}),[n]);return a.createElement(s.Provider,{value:{moment:n,utils:i,theme:o}},l)};function d(e,t){return"function"==typeof e?e(t||{}):e}function m(e,t){return"function"==typeof e?e(t||{}):e}function c(e,t,a,r,o,l){return void 0===e?{Root:t.Root,className:m(t.className,a),style:n({},d(t.style,a)),internalProps:t.internalProps}:{Root:e.Root||t.Root,className:m(e.className,a)||m(t.className,a),style:n({},d(t.style,a),{},d(e.style,a)),internalProps:n({},t.internalProps,{},e.internalProps)}}function f(e,t){return c(e?e.ToolBar:void 0,t,{})}function v(e,t){return c(e?e.ToolBarButton:void 0,t,{})}function h(e,t){return c(e?e.Weekdays:void 0,t,{})}function y(e,t){return c(e?e.Weekday:void 0,t,{})}function D(e,t){return c(e?e.DayCells:void 0,t,{})}function g(e,t,a){return c(e?e.DayCell:void 0,t,a)}function p(e,t){return c(e?e.Availabilities:void 0,t,{})}function b(e,t,a){return c(e?e.AvailSlot:void 0,t,a)}var w=function(e){var t=e.localizer.messages,n=e.label,r=e.onNavigate,o=e.overrides,l=i().theme,s=f(o,{style:l.toolBarStyle,className:l.toolBarButtonsContainerClass}),u=s.Root,d=s.style,m=s.className;return u?a.createElement(u,Object.assign({},{localizer:{messages:t},label:n,onNavigate:r})):a.createElement("div",{style:d,className:m,role:"group"},a.createElement(x,{theme:l,overrides:o,onClick:function(){return r("TODAY")},message:t.today}),a.createElement(x,{theme:l,overrides:o,onClick:function(){return r("PREV")},message:t.previous}),a.createElement(x,{theme:l,overrides:o,onClick:function(){return r("NEXT")},message:t.next}),a.createElement("button",{disabled:!0,className:l.toolBarLabelClass,style:{width:110}},a.createElement("span",null,n)))};function x(e){var t=e.message,n=e.onClick,r=v(e.overrides,{className:e.theme.toolBarButtonClass}),o=r.Root,l=r.style,s=r.internalProps,i=r.className;return void 0!==o?a.createElement(o,{message:t,onClicked:n}):a.createElement("button",Object.assign({className:i,onClick:n,style:l},s),t)}var C=["S","M","T","W","Th","F","Sa"],E=function(e){var t=e.overrides,n=h(t,{style:{display:"flex",justifyContent:"flex-start",flexWrap:"nowrap",flexDirection:"row"}}),r=n.Root,o=n.style;if(r)return a.createElement(r,null);var l=y(t,{className:"border border-default",style:{width:50,height:50,marginBottom:10,display:"flex",justifyContent:"center",alignItems:"center"}}),s=l.Root,i=l.className,u=l.style;return a.createElement("div",{style:o},C.map((function(e){return s?a.createElement(s,{weekday:e}):a.createElement("div",{className:i,key:e,style:u},e)})))};function k(e){var t=e.theme,n=e.onAvailabilitySelected,r=e.s,o=e.formatAsDateJustTime,l=b(e.overrides,{className:t.slotButtonClass,style:{minWidth:200}},{date:r.startDate}),s=l.Root,i=l.className,u=l.style;return s?a.createElement(s,Object.assign({},{theme:t,onAvailabilitySelected:n,s:r,formatAsDateJustTime:o})):a.createElement("div",{style:{marginBottom:10}},a.createElement("button",{className:i,disabled:!1,style:u,onClick:function(){return n({startDate:new Date(r.startDate),endDate:new Date(r.endDate)})}},o(new Date(r.startDate))))}var S=function(e){var t=e.viewingDayAvailabilities,n=e.handleUnselect,r=e.onAvailabilitySelected,o=e.show,l=e.slotStepMs,s=e.slotLengthMs,i=e.utils,u=e.theme,d=e.overrides,m=p(d,{style:o?u.slotsContainerStyleShow:u.slotsContainerStyleHide}),c=m.Root,f=m.style;return c?a.createElement(c,Object.assign({},{viewingDayAvailabilities:t,handleUnselect:n,onAvailabilitySelected:r,show:o,slotStepMs:l,slotLengthMs:s,utils:i,theme:u})):a.createElement("div",{style:f},o&&a.createElement("div",{className:"mt-2 mr-1"},a.createElement("button",{type:"button",className:u.slotContainerCloseClass,"aria-label":"Close",style:{outline:"none"},onClick:n},a.createElement("span",{"aria-hidden":"true"},"×")),a.createElement(A,{theme:u,durationMinutes:60,avails:t,onAvailabilitySelected:r,slotLengthMs:s,slotStepMs:l,utils:i,overrides:d}),t.length>7&&a.createElement("button",{type:"button",className:u.slotContainerCloseClass,"aria-label":"Close",style:{outline:"none"},onClick:n},a.createElement("span",{"aria-hidden":"true"},"×"))))},A=function(e){var n=e.avails,r=e.slotLengthMs,o=e.slotStepMs,l=e.onAvailabilitySelected,s=e.theme,i=e.utils,u=e.overrides,d=i.chunkify,m=i.msInHour,c=i.formatAsDate,f=i.formatAsDateJustTime,v=t.useMemo((function(){return d(n.map((function(e){return{startDate:e.startDate,endDate:e.endDate}})),r||1*m,o||.5*m)}),[n,m,d,r,o]);return a.createElement("div",null,a.createElement("h4",null,s.requestAppointmentLabel),a.createElement("h5",null,n&&n.length>0?c(n[0].startDate):""),v.map((function(e,t){return a.createElement(k,Object.assign({key:"b_"+t},{theme:s,onAvailabilitySelected:l,s:e,formatAsDateJustTime:f,overrides:u}))})))},M=function(e){var t=e.date,r=e.shouldDisplay,o=e.dayIndexInWeek,l=e.weekIndexInCalRange,s=e.availsByIndex,i=e.selectedDate,u=e.handleSelected,d=e.moment,m=e.utils,c=e.theme,f=e.overrides,v=7*l+o,h=!!i&&m.datesEqual(t,i),y=s[v].hasAvail,D=g(f,{className:c.dayClassBase+" "+(i&&m.datesEqual(t,i)?c.dayClassSelected:s[v].hasAvail?c.dayClassHasAvailability:c.dayClassDefault),style:{cursor:"pointer",border:i&&m.datesEqual(t,i)?"4px solid":s[v].hasAvail?"3px solid":"",height:50,width:50,display:"flex",justifyContent:"center",alignItems:"center"}},{date:t,isSelected:h,hasAvail:y}),p=D.Root,b=D.style,w=D.className;if(p)return a.createElement(p,Object.assign({},{shouldDisplay:r,date:t,dayIndexInWeek:o,weekIndexInCalRange:l,availsByIndex:s,selectedDate:i,handleSelected:u,moment:d,utils:m,theme:c}));var x=r?b:n({},b,{visibility:"hidden"});return a.createElement("div",{className:w,style:x,onClick:function(){return u(t)}},d(t).format("D"))};function T(e){var t=e.week,n=e.date,r=e.selectedDate,o=e.weekIndexInCalRange,l=e.handleSelected,s=e.availsByIndex,i=e.moment,u=e.utils,d=e.theme,m=e.overrides,c=D(m,{style:{display:"flex",justifyContent:"flex-start",flexWrap:"nowrap",flexDirection:"row"}}),f=c.Root,v=c.style;return f?a.createElement(f,Object.assign({},{date:n,week:t,selectedDate:r,weekIndexInCalRange:o,handleSelected:l,availsByIndex:s,moment:i,utils:u,theme:d})):a.createElement("div",{style:v},t.map((function(e,t){return a.createElement(M,Object.assign({key:"d_"+t},{shouldDisplay:u.sameMonth(e,n),date:e,selectedDate:r,weekIndexInCalRange:o,dayIndexInWeek:t,handleSelected:l,availsByIndex:s,moment:i,utils:u,theme:d,overrides:m}))})))}var O=function(e){var r=e.availabilities,o=e.excludeWeekends,l=e.excludeFn,s=e.onAvailabilitySelected,u=e.onDaySelected,d=e.slotLengthMs,m=e.slotStepMs,c=e.date,f=e.style,v=e.overrides,h=i(),y=h.moment,D=h.theme,g=h.utils,p=t.useState(null),b=p[0],w=p[1];t.useEffect((function(){w(null),u&&u(null)}),[c]);var x=function(e){b&&g.datesEqual(e,b)?(w(null),u&&u(null)):(w(e),u&&u(e))},C=t.useMemo((function(){return g.monthDaysForDate(c)}),[c,g]),k=C.days,A=C.weeks,M=t.useMemo((function(){return g.availByIndex(k,r,o||!1,l)}),[k,r,g]),O=t.useMemo((function(){return null!==b&&g.shouldIncludeDate(b,o||!1,l)?(r||[]).filter((function(e){return g.datesEqual(e.startDate,b)})):[]}),[b,r,g]);return a.createElement("div",{style:n({minHeight:368},f)},a.createElement(E,{overrides:v}),A.map((function(e,t){return g.shouldHideWeek(b,e,O)?null:a.createElement(a.Fragment,{key:"w_"+t},a.createElement(T,Object.assign({},{date:c,week:e,selectedDate:b,weekIndexInCalRange:t,handleSelected:x,availsByIndex:M,moment:y,utils:g,theme:D,overrides:v})))})),a.createElement(S,Object.assign({},{show:!!b&&O.length>0,onAvailabilitySelected:s,viewingDayAvailabilities:O,handleUnselect:function(){u&&u(null),w(null)},slotLengthMs:d,slotStepMs:m,utils:g,theme:D,overrides:v})))},B=function(e){var n=e.initialDate,r=e.onAvailabilitySelected,o=e.onDaySelected,l=e.blockOutPeriods,s=e.providerTimeZone,u=e.bookings,d=e.avails,m=e.onCalRangeChange,c=e.excludeFn,f=e.excludeWeekends,v=e.slotLengthMs,h=e.slotStepMs,y=e.overrides,D=i(),g=D.moment,p=D.utils,b=t.useState(n||new Date)[0],x=t.useState(p.monthRangeForDate(b)),C=x[0],E=x[1],k=t.useState(b),S=k[0],A=k[1],M=t.useRef(null);t.useEffect((function(){M.current!==C&&(m&&m(C),M.current=C)}),[C,m]);var T=t.useMemo((function(){if(d)return d;var e=p.toStartAndEnd(C);return p.availabilitiesFromBookings(l||[],s,u,new Date,e.startDate,e.endDate)}),[d,u,s,C,b,l,p]);return a.createElement("div",null,a.createElement(w,{onNavigate:function(e){if("TODAY"===e){var t=new Date;return A(t),void E(p.monthRangeForDate(t))}if("NEXT"===e||"PREV"===e){var a=g(S).add("NEXT"===e?1:-1,"month").toDate();A(a),E(p.monthRangeForDate(a))}},label:p.formatAsMonth(S),localizer:{messages:{today:"Today",previous:"Previous",next:"Next"}},overrides:y}),a.createElement(O,{availabilities:T,excludeFn:c,excludeWeekends:f,date:S,onAvailabilitySelected:r,onDaySelected:o,slotLengthMs:v,slotStepMs:h,overrides:y}))};exports.AvailSlot=k,exports.AvailSlots=S,exports.AvailabilityCalendar=function(e){var t=e.moment,r=e.theme,l=function(e,t){if(null==e)return{};var a,n,r={},o=Object.keys(e);for(n=0;n<o.length;n++)t.indexOf(a=o[n])>=0||(r[a]=e[a]);return r}(e,["moment","theme"]);return a.createElement(u,{moment:t,theme:r?n({},o,{},r):o},a.createElement(B,Object.assign({},l)))},exports.createUtils=r,exports.defaultComponents={ToolBar:{},ToolBarButton:{},Weekdays:{},Weekday:{},DayCells:{},DayCell:{},Availabilities:{},AvailSlot:{}},exports.defaultTheme=o,exports.getAvailOverride=b,exports.getAvailsOverride=p,exports.getDayCellOverride=g,exports.getDayCellsOverride=D,exports.getToolBarButtonOverride=v,exports.getToolBarOverride=f,exports.getWeekdayOverride=y,exports.getWeekdaysOverride=h; | ||
//# sourceMappingURL=react-availability-calendar.cjs.production.min.js.map |
@@ -169,6 +169,14 @@ import React, { useMemo, useContext, useState, useEffect, useRef } from 'react'; | ||
function availByIndex(days, avails) { | ||
function isWeekend(date) { | ||
return [0, 6].indexOf(date.getDay()) >= 0; | ||
} | ||
function shouldIncludeDate(d, excludeWeekends, excludeFn) { | ||
return (!excludeWeekends || !isWeekend(d)) && (!excludeFn || !excludeFn(d)); | ||
} | ||
function availByIndex(days, avails, excludeWeekends, excludeFn) { | ||
return (days || []).map(function (d) { | ||
return { | ||
hasAvail: avails.some(function (a) { | ||
hasAvail: shouldIncludeDate(d, excludeWeekends, excludeFn) && avails.some(function (a) { | ||
return datesEqual(a.startDate, d); | ||
@@ -359,2 +367,3 @@ }) | ||
monthDaysForDate: monthDaysForDate, | ||
shouldIncludeDate: shouldIncludeDate, | ||
chunkify: chunkify | ||
@@ -1004,2 +1013,4 @@ }; | ||
var availabilities = _ref.availabilities, | ||
excludeWeekends = _ref.excludeWeekends, | ||
excludeFn = _ref.excludeFn, | ||
onAvailabilitySelected = _ref.onAvailabilitySelected, | ||
@@ -1049,6 +1060,10 @@ onDaySelected = _ref.onDaySelected, | ||
var availsByIndex = useMemo(function () { | ||
return utils.availByIndex(days, availabilities); | ||
return utils.availByIndex(days, availabilities, excludeWeekends || false, excludeFn); | ||
}, [days, availabilities, utils]); | ||
var viewingDayAvailabilities = useMemo(function () { | ||
if (selectedDate !== null) { | ||
if (!utils.shouldIncludeDate(selectedDate, excludeWeekends || false, excludeFn)) { | ||
return []; | ||
} | ||
return (availabilities || []).filter(function (_ref2) { | ||
@@ -1106,2 +1121,4 @@ var startDate = _ref2.startDate; | ||
onCalRangeChange = _ref.onCalRangeChange, | ||
excludeFn = _ref.excludeFn, | ||
excludeWeekends = _ref.excludeWeekends, | ||
slotLengthMs = _ref.slotLengthMs, | ||
@@ -1171,2 +1188,4 @@ slotStepMs = _ref.slotStepMs, | ||
availabilities: availabilities, | ||
excludeFn: excludeFn, | ||
excludeWeekends: excludeWeekends, | ||
date: date, | ||
@@ -1173,0 +1192,0 @@ onAvailabilitySelected: onAvailabilitySelected, |
@@ -67,2 +67,4 @@ import { MomentCtrFunc } from './moment-types/moment-subset'; | ||
moment: MomentCtrFunc; | ||
excludeWeekends?: boolean; | ||
excludeFn?: (date: Date) => boolean; | ||
theme?: CalendarThemeProp; | ||
@@ -82,2 +84,4 @@ onCalRangeChange?: (range: Range) => any; | ||
availabilities: AvailabilityEvent[]; | ||
excludeWeekends?: boolean; | ||
excludeFn?: (date: Date) => boolean; | ||
date: Date; | ||
@@ -84,0 +88,0 @@ style?: CSSProperties; |
@@ -12,3 +12,3 @@ import { Range, MsSinceMidnightRange, AvailabilityEvent, Booking } from '../types'; | ||
shouldHideWeek: (selectedDate: Date | null, week: Date[], viewingDayAvailabilities: AvailabilityEvent[]) => boolean | null; | ||
availByIndex: (days: Date[], avails: AvailabilityEvent[]) => { | ||
availByIndex: (days: Date[], avails: AvailabilityEvent[], excludeWeekends: boolean, excludeFn?: ((date: Date) => boolean) | undefined) => { | ||
hasAvail: boolean; | ||
@@ -30,3 +30,4 @@ }[]; | ||
}; | ||
shouldIncludeDate: (d: Date, excludeWeekends: boolean, excludeFn?: ((date: Date) => boolean) | undefined) => boolean; | ||
chunkify: (intervals: AvailabilityEvent[], chunkLenMs: number, stepLenMs: number) => AvailabilityEvent[]; | ||
}; |
{ | ||
"version": "0.3.11", | ||
"version": "0.3.12", | ||
"license": "MIT", | ||
@@ -24,3 +24,3 @@ "main": "dist/index.js", | ||
"peerDependencies": { | ||
"react": ">=16" | ||
"react": ">=16.8" | ||
}, | ||
@@ -27,0 +27,0 @@ "prettier": { |
@@ -11,4 +11,12 @@ # React Availability Calendar | ||
## Example installation | ||
`yarn add react-availability-calendar moment` (or `npm install`) | ||
## typescript definitions included | ||
## Props: | ||
Provide bookings, from which avails will be derived, or `avails` directly | ||
```js | ||
@@ -21,5 +29,9 @@ export interface AvailabilityCalendarProps { | ||
bookings: Booking[]; | ||
avails?: AvailabilityEvent[]; | ||
initialDate: Date | null; | ||
onAvailabilitySelected: (e: AvailabilityEvent) => any; | ||
onDaySelected?: (d: Date | null) => any; | ||
blockOutPeriods?: MsSinceMidnightRange[]; | ||
excludeWeekends?: boolean; | ||
excludeFn?: (date: Date) => boolean; | ||
slotLengthMs?: number; | ||
@@ -42,2 +54,6 @@ slotStepMs?: number; | ||
### non-typescript example: | ||
- [Example repo](https://github.com/nyura123/react-availability-calendar-example-js/) | ||
### Usage: | ||
@@ -108,2 +124,52 @@ | ||
## Customizability via overrides | ||
````js | ||
const overrides = | ||
{ | ||
...defaultComponents, | ||
// ToolBar: { Root: (p: any) => <div>{JSON.stringify(p)}</div> }, | ||
ToolBar: { | ||
className: "border btn-group", | ||
style: { minHeight: undefined } | ||
}, | ||
ToolBarButton: { | ||
className: "btn btn-outline-info", | ||
style: { outline: "none" } | ||
}, | ||
Weekday: { | ||
style: { | ||
borderWidth: 0, | ||
borderStyle: "solid", | ||
borderBottomWidth: 1, | ||
borderRightWidth: 1, | ||
borderColor: "#dddddd" | ||
}, | ||
className: "none" | ||
}, | ||
AvailSlot: { | ||
className: p => | ||
myAvailSlotLogic(p.date) | ||
? "btn btn-success" | ||
: "btn btn-outline-primary" | ||
}, | ||
DayCell: { | ||
style: p => | ||
p.isSelected | ||
? { transition: "width 200ms, height 200ms", height: 60, width: 60 } | ||
: { transition: "width 200ms, height 200ms" }, | ||
className: p => | ||
myDayLogic(p.date) | ||
? "rounded-circle border-success" | ||
: p.isSelected || p.hasAvail | ||
? "rounded-circle border-primary" | ||
: "rounded-circle border-default" | ||
} | ||
}; | ||
// ... | ||
<AvailabilityCalendar overrides={overrides} {...restOfProps} /> | ||
// ... | ||
``` | ||
### Examples | ||
@@ -122,1 +188,2 @@ | ||
## Bootstrapped with [TSDX](https://github.com/palmerhq/tsdx) | ||
```` |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
367339
2808
185