{
    "componentChunkName": "component---src-templates-article-page-template-js",
    "path": "/how-to/modify-time-intervals/",
    "result": {"data":{"markdownRemark":{"frontmatter":{"title":"Modify booking time intervals in FTW-hourly","slug":"modify-time-intervals","updated":"2022-08-29T00:00:00.000Z","category":"how-to-listing","ingress":"This guide describes how to modify booking time intervals in FTW-hourly","skills":null},"htmlAst":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In Flex, listings can have either day-based or time-based availability.\nFor listings with time-based availability, the available\n"},{"type":"element","tagName":"a","properties":{"href":"https://www.sharetribe.com/api-reference/marketplace.html#time-slots","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"time slots"}]},{"type":"text","value":"\nare returned from the API as continuous stretches of time. The client\napplication must therefore split the availability into suitable booking\nlengths."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The default behavior of the FTW-hourly template is to split the\ncontinuous availability stretch into one hour bookable intervals. This\nhow-to guide illustrates a handful of different cases on modifying\nbooking lengths."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"set-booking-length-to-30-minutes","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#set-booking-length-to-30-minutes","ariaLabel":"set booking length to 30 minutes permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"Set booking length to 30 minutes"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The simplest use case is to create uniform 30 minute booking slots.\nStart with adding a constant for the booking length in minutes."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" timeSlotMinutes "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"30"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Time slot handling is done using a few helper functions in\nsrc/util/dates.js"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"shell"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-shell"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-shell"]},"children":[{"type":"text","value":"└── src\n    └── util\n        └── dates.js"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"getStartHours"}]},{"type":"text","value":" and "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"getEndHours"}]},{"type":"text","value":" return a list of timepoints that are\ndisplayed as the booking's possible start and end moments,\nrespectively. They both use the same helper function "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"getSharpHours"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"getSharpHours"}]},{"type":"text","value":", in turn, by default retrieves the sharp hours that\nexist within the availability time slot. It uses the\n"},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"findBookingUnitBoundaries"}]},{"type":"text","value":" function, which is a recursive function\nthat checks whether the current boundary (e.g. sharp hour) passed to\nit falls within the availability time slot.\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"If the current boundary is within the availability time slot, the\nfunction calls itself with the next boundary and cumulates the\nboundary results into an array."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"If the current boundary does not fall within the availability time\nslot, the function returns the cumulated results from the previous\niterations."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"findBookingUnitBoundaries"}]},{"type":"text","value":" takes a "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"nextBoundaryFn"}]},{"type":"text","value":" parameter that it\nuses to determine the next boundary value to pass to itself."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"the function passed to "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"findBookingUnitBoundaries"}]},{"type":"text","value":" as "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"nextBoundaryFn"}]},{"type":"text","value":"\nby default is "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"findNextBoundary"}]},{"type":"text","value":", which is what we need to modify\nfirst. The "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"findNextBoundary"}]},{"type":"text","value":" function increments the current boundary\nby a predefined value."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"export"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function-variable","function"]},"children":[{"type":"text","value":"findNextBoundary"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","parameter"]},"children":[{"type":"text","value":"timeZone"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" currentMomentOrDate"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"=>"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"moment"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"currentMomentOrDate"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"clone"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"tz"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"timeZone"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"add"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"1"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'hour'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// The default handling uses hours"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"startOf"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'hour'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// By default, the time slot is rounded to the start of the hour"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"toDate"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"add-a-custom-rounding-function-for-momentjs","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#add-a-custom-rounding-function-for-momentjs","ariaLabel":"add a custom rounding function for momentjs permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"Add a custom rounding function for moment.js"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"FTW-hourly uses the "},{"type":"element","tagName":"a","properties":{"href":"https://momentjs.com/timezone/","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"moment-timezone"}]},{"type":"text","value":"\nlibrary to modify times and dates and convert them between the listing's\ntime zone and the user's time zone."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"By default, the "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"findNextBoundary"}]},{"type":"text","value":" function uses\n"},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"moment.startOf('hour')"}]},{"type":"text","value":" to round the booking slots to the top of each\nhour. However, since we are now dealing with minutes, we need to create\na custom rounding function to replace the "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"startOf('hour')"}]},{"type":"text","value":" function\ncall. When we add it to "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"moment.js"}]},{"type":"text","value":" using the prototype exposed through\n"},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"moment.fn"}]},{"type":"text","value":", we can chain it in the same place as the default\n"},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"startOf('hour')"}]},{"type":"text","value":" function."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This rounding function rounds to sharp hours when the time slot minutes\nvalue is a factor of an hour, e.g. 15, 20 or 30 minutes. For other time\nslot minutes, see\n"},{"type":"element","tagName":"a","properties":{"href":"#use-a-time-slot-longer-than-30-minutes"},"children":[{"type":"text","value":"using a time slot longer than 30 minutes"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"/**\n * Rounding function for moment.js. Rounds the Moment provided by the context\n * to the start of the specified time value in the specified units.\n * @param {*} value the rounding value\n * @param {*} timeUnit time units to specify the value\n * @returns Moment rounded to the start of the specified time value\n */"}]},{"type":"text","value":"\nmoment"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"fn"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function-variable","function"]},"children":[{"type":"text","value":"startOfDuration"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"function"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","parameter"]},"children":[{"type":"text","value":"value"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" timeUnit"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function-variable","function"]},"children":[{"type":"text","value":"getMs"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","parameter"]},"children":[{"type":"text","value":"val"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" unit"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"=>"}]},{"type":"text","value":" moment"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"duration"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"val"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" unit"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"_milliseconds"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" ms "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"getMs"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"value"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" timeUnit"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n\n  "},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// Get UTC offset to account for potential time zone difference between"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// customer and listing"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" offsetMs "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"this"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"_isUTC "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"?"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"0"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"getMs"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"this"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"utcOffset"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'minute'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"return"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"moment"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"Math"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"floor"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"this"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"valueOf"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" offsetMs"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":" ms"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"*"}]},{"type":"text","value":" ms"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You will then need to use the new function to replace the built-in\n"},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"startOf()"}]},{"type":"text","value":" function, and pass the "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"timeSlotMinutes"}]},{"type":"text","value":" value as the\naddition and rounding duration values."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"diff"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-diff"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-diff"]},"children":[{"type":"text","value":"export const findNextBoundary = (timeZone, currentMomentOrDate) =>\n"},{"type":"element","tagName":"span","properties":{"className":["token","unchanged"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"  moment(currentMomentOrDate)\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"    .clone()\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"    .tz(timeZone)\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","deleted-sign","deleted"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","deleted"]},"children":[{"type":"text","value":"-"}]},{"type":"text","value":"    .add(1, 'hour')\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","deleted"]},"children":[{"type":"text","value":"-"}]},{"type":"text","value":"    .startOf('hour')\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","inserted-sign","inserted"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"    .add(timeSlotMinutes, 'minutes')\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"    .startOfDuration(timeSlotMinutes, 'minutes')\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","unchanged"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"    .toDate();"}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"For listings with an hourly price, the function\n"},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"calculateQuantityFromHours"}]},{"type":"text","value":" determines the correct quantity as a\ndecimal of full hours. However, if you want to set a price per minute,\nor e.g. a price per non-hour session, you will need to modify\n"},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"calculateQuantityFromHours"}]},{"type":"text","value":" as well."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-wrapper"],"style":"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 300px; "},"children":[{"type":"text","value":"\n      "},{"type":"element","tagName":"a","properties":{"className":["gatsby-resp-image-link"],"href":"/docs/legacy/static/7b91a47b46560f945b5670ee92f32b1a/5b7bc/30_minute_booking.png","style":"display: block","target":"_blank","rel":["noopener"]},"children":[{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-background-image"],"style":"padding-bottom: 203.1446540880503%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAApCAYAAAA1bQl+AAAACXBIWXMAABYlAAAWJQFJUiTwAAAFG0lEQVRIx6VWW4scRRTeX+GrQQUR9UHxQQQfvEbBBxUEX32KESWigoIQkwgSEN+8YP6HN8TXsJNNdmd2srvM7Fy757Jzv/R09/T1k+90V03PZDUrzvJtVVedOnXO+U6dqq0gCBCFIYAYiKOkRYw4XiEMQ1DuLNiKowgT20XO6OG22ced1gD51gDj0QjD4VCwXC7/VSnnFLZonbX0UJtYaM9tVEZzGBMLw8EAk8kEg8FAFv3TL4oirTSxMI4xm05wWNxH6egQHdNAvXKMw8ND7O3toVwu4+joCLlcDsViEbu7uygUCgLOz+dzrTQIA2xxl9FohO3tHPL5PPbyeQyHI4zHY3F3Op0KaC0XqzF+s++67iocVEjti8UC9XodzWYTtVptzcUsOUR2jD+lTLssLEfRWlzOymiWlKRNFXKAO1LxaTuHbNMFoWY16QfpvHaZk4wD2ZzNZhJPxs/3/ZUF2fQIUmVp/x6FtMq2bVSqFbTbbYklEaVx+q+ui0Ky1+10BfVaHaPhCNVKFYN+H1EYnQmaFH5Yro3ysI7ysIFiu4SjXlVQnZho2T20nB5MmzjRUOOEYZ9g4TuieI3lWGU/YgRRAD8M4AUelr4n/RixzEWI9Li0gbfuMmPYbDTQ7XZhGAamkyniKE7ZDaVvL2yYholOpyOhSYpKtHaOE5ejCI7roGkYaHfaMEwD48kYYRTCDwL4gQ+1qWGaQhzlPN/TZPhZUsIoguu4WDpLNOsNNKp1mA0Dx6Uy4jBG4AVYWAs5TY5lw2gYaNTqqJYrqFdqEifPWcqG3FhIsZcOmvNOgllb2sasjbbTFwKs5QKWu0Bj3oIx7+p5opPKLLyUlCQ5Azi+myBQ7RK27wi8wBe3bDUfJPNZGYZGXNZHL4oThBFP/+o7So6kHMsz5SFJcRxh+OTkRNDv93WfrPZ6PQHjdL/KLWeZ55ZKeaYJEqD6zADO8Rqg3H0Vqo5yK4vseDbXNu+RtTxkh7uz0vBMW5YlrUqDTStYMDzPu0eeY9plKhyklxJjxRiyvG8qVaWO5Y2gLNcR6ioQUrgL75NSqYSDgwNpeQm1Wq21Ck7rWC95UVUqFbnIeIlxLY3hvGaZZ5g7ZX+qHmZjpAtJWtm5xjTN1UlRC1SFzpKSrdr63Pq+xibj2mV1Bairk24RDHRWQYJAb8T04jrmK70UC1WgSQSDzEn1BDnN7azrdJPrmPxaoYohCWBpoiLuSuX8ZrD1zbehkBZShjFkX1tI1zhAMIW4ARXRbWbAZuyysaWVtr3QMdUKpRJ3uwLGUr0OTktuZSEzgzg+Pl6ljWKY1tBVtsz8014GmwoZPxVD7bI+y8oiPjBpVRisPYL0dwrWxzj9yz7rVvUwTOodpOz7WMwtWLO5YDFL+tPxRGBN5/BdD2C9DJJ1qlAnMQx8jJdWBnOM3QQT9lOMnFkCV42t5HmVCimIgJLVwquFqzi/f03w2v41vFK4ghfylwUvFb7Cy4Ur0r5YuCxzlDlfuIbX97/G83tf4ubkSC6sLf4rzht47NZHeHznEp7YuYRHb32I84WrePfwO7x99zreunsdb969jjeK3+Cdg29FOWUo++TOx3hw+wL+GhVWCguzOs5tX8BDuYt4OHcR57bfF+Hndr8QPHPnMzx1+xM8fftTPLv7uShR8o/kPsADN9/Dn8N8qjCK0XPH+Ln1u8aN1h/4qfUbvjd/Efxg/oofU/Cbc5RRshyr2yd8wyQsC7v/9xcmZ/5vMUQXbEpOnVkAAAAASUVORK5CYII='); background-size: cover; display: block;"},"children":[]},{"type":"text","value":"\n  "},{"type":"element","tagName":"picture","properties":{},"children":[{"type":"text","value":"\n          "},{"type":"element","tagName":"source","properties":{"srcSet":["/docs/legacy/static/7b91a47b46560f945b5670ee92f32b1a/82e29/30_minute_booking.webp 159w","/docs/legacy/static/7b91a47b46560f945b5670ee92f32b1a/02dbd/30_minute_booking.webp 300w"],"sizes":"(max-width: 300px) 100vw, 300px","type":"image/webp"},"children":[]},{"type":"text","value":"\n          "},{"type":"element","tagName":"source","properties":{"srcSet":["/docs/legacy/static/7b91a47b46560f945b5670ee92f32b1a/8b9b5/30_minute_booking.png 159w","/docs/legacy/static/7b91a47b46560f945b5670ee92f32b1a/5b7bc/30_minute_booking.png 300w"],"sizes":"(max-width: 300px) 100vw, 300px","type":"image/png"},"children":[]},{"type":"text","value":"\n          "},{"type":"element","tagName":"img","properties":{"className":["gatsby-resp-image-image"],"src":"/docs/legacy/static/7b91a47b46560f945b5670ee92f32b1a/5b7bc/30_minute_booking.png","alt":"Booking breakdown with half hour booking","title":"Booking breakdown with half hour booking","loading":"lazy","decoding":"async","style":"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"},"children":[]},{"type":"text","value":"\n        "}]},{"type":"text","value":"\n  "}]},{"type":"text","value":"\n    "}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"use-a-time-slot-longer-than-30-minutes","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#use-a-time-slot-longer-than-30-minutes","ariaLabel":"use a time slot longer than 30 minutes permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"Use a time slot longer than 30 minutes"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If your Flex application has longer custom booking lengths than 30\nminutes, you will need to extend the previous steps to a more complex\napproach to make sure the time slots show up correctly."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"find-the-rounding-duration","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#find-the-rounding-duration","ariaLabel":"find the rounding duration permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"Find the rounding duration"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When the booking length is not a factor of a full hour, using the\n"},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"timeslotMinutes"}]},{"type":"text","value":" value might cause issues, because the start time slot\ngets rounded to a multiple of the time slot in general. This means that\ndepending on the start time of the availability (8 AM vs 9 AM vs 10 AM),\nthe first time slot may show up as starting 15 minutes or half hour past\nthe actual desired start time."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"To align the first available boundary with a sharp hour, we need to\nmanually set the first boundary to the specified start time, and set\nrounding to a factor of a full hour."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"To determine the correct rounding minute amount, we calculate the\ngreatest common factor of the booking length and a full hour using the\n"},{"type":"element","tagName":"a","properties":{"href":"https://en.wikipedia.org/wiki/Euclidean_algorithm","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"Euclidean algorithm"}]},{"type":"text","value":".\nFor instance, when using a 45 minute time slot, the greatest common\ndivisor with an hour is 15 minutes."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" timeSlotMinutes "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"45"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" hourMinutes "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"60"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"/**\n * Calculate the greatest common factor (gcf) of two timeslot lengths\n * to determine rounding value using the Euclidean algorithm\n * (https://en.wikipedia.org/wiki/Euclidean_algorithm).\n */"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function-variable","function"]},"children":[{"type":"text","value":"gcf"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","parameter"]},"children":[{"type":"text","value":"a"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" b"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"=>"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"return"}]},{"type":"text","value":" a "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"?"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"gcf"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"b "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"%"}]},{"type":"text","value":" a"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" a"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" b"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"/**\n * Define the rounding value.\n * If the first time slot is shorter than general time slot,\n * swap the parameters around so that the first parameter is the shorter one\n */"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" rounding "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"gcf"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"timeSlotMinutes"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" hourMinutes"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"manually-set-first-boundary-to-start-time","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#manually-set-first-boundary-to-start-time","ariaLabel":"manually set first boundary to start time permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"Manually set first boundary to start time"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"To manually set the first boundary to the start time, we need to pass an\n"},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"isFirst"}]},{"type":"text","value":" parameter to the "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"findNextBoundary"}]},{"type":"text","value":" function. For the first\ntime slot, we then skip incrementing completely."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"diff"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-diff"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-diff"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","deleted-sign","deleted"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","deleted"]},"children":[{"type":"text","value":"-"}]},{"type":"text","value":" export const findNextBoundary = (timeZone, currentMomentOrDate) =>\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","deleted"]},"children":[{"type":"text","value":"-"}]},{"type":"text","value":"   moment(currentMomentOrDate)\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","inserted-sign","inserted"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" export const findNextBoundary = (\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"   timeZone,\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"   currentMomentOrDate,\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"   isFirst = false\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" ) => {\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"   const increment = isFirst ? 0 : timeSlotMinutes;\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"   return moment(currentMomentOrDate)\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","unchanged"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"     .clone()\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"     .tz(timeZone)\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","deleted-sign","deleted"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","deleted"]},"children":[{"type":"text","value":"-"}]},{"type":"text","value":"     .add(timeSlotMinutes, 'minutes')\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","deleted"]},"children":[{"type":"text","value":"-"}]},{"type":"text","value":"     .startOfDuration(timeSlotMinutes, 'minutes')\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","inserted-sign","inserted"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"     .add(increment, 'minutes')\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"     .startOfDuration(rounding, 'minutes')\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","unchanged"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"     .toDate();\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","inserted-sign","inserted"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" }"}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The rounding function now rounds the start time back to the rounding\nboundary. However, the default start time is passed to\n"},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"firstNextBoundary"}]},{"type":"text","value":" as one millisecond before start time, since the\ndefault addition of 1 hour and the "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"startOf('hour')"}]},{"type":"text","value":" function cancel\neach other out."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Since we want to set the first booking slot manually, we can pass the\nstart time directly. However, we will need to pass "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"true"}]},{"type":"text","value":" as the\n"},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"isFirst"}]},{"type":"text","value":" parameter to the very first "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"findBookingUnitBoundaries"}]},{"type":"text","value":"\nfunction call when calling it from "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"getSharpHours"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"diff"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-diff"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-diff"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","deleted-sign","deleted"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","deleted"]},"children":[{"type":"text","value":"-"}]},{"type":"text","value":"   const millisecondBeforeStartTime = new Date(startTime.getTime() - 1);\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","unchanged"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"   return findBookingUnitBoundaries({\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","deleted-sign","deleted"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","deleted"]},"children":[{"type":"text","value":"-"}]},{"type":"text","value":"     currentBoundary: findNextBoundary(timeZone, millisecondBeforeStartTime),\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","inserted-sign","inserted"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"     // add isFirst param to determine first time slot handling\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"     currentBoundary: findNextBoundary(timeZone, startTime, true),\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","unchanged"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"     startMoment: moment(startTime),\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"     endMoment: moment(endTime),"}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"add-separate-handling-for-first-timeslot","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#add-separate-handling-for-first-timeslot","ariaLabel":"add separate handling for first timeslot permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"Add separate handling for first timeslot"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Sometimes, there are cases where you want to have a basic length for a\nbooking and then different lengths for subsequent time slots. For\ninstance, a listing could feature 75 minute private yoga class with the\noption to extend it for 30 minutes at a time. In those cases, you need\nto create different handling for the first time slot, i.e. the first\nstart and end boundaries."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" timeSlotMinutes "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"30"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" firstSlotMinutes "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"75"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"/**\n * Define the rounding value.\n * If the first time slot is shorter than general time slot,\n * swap the parameters around so that the first parameter is the shorter one\n */"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" rounding "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"gcf"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"timeSlotMinutes"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" firstSlotMinutes"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"determine-first-time-slot-boundaries","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#determine-first-time-slot-boundaries","ariaLabel":"determine first time slot boundaries permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"Determine first time slot boundaries"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In this use case, we want to determine a different behavior for the\nstart and end boundaries of the first time slot. For this reason, we\nneed to pass an "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"isStart"}]},{"type":"text","value":" parameter to "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"findNextBoundary"}]},{"type":"text","value":" and use it to\ndetermine the boundary timepoints in addition to the "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"isFirst"}]},{"type":"text","value":"\nparameter."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"diff"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-diff"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-diff"]},"children":[{"type":"text","value":"export const findNextBoundary = (\n"},{"type":"element","tagName":"span","properties":{"className":["token","unchanged"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" timeZone,\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" currentMomentOrDate,\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" isFirst = false,\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","inserted-sign","inserted"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" isStart = false\n"}]},{"type":"text","value":") => {\n"},{"type":"element","tagName":"span","properties":{"className":["token","deleted-sign","deleted"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","deleted"]},"children":[{"type":"text","value":"-"}]},{"type":"text","value":" const increment = isFirst ? 0 : timeSlotMinutes;\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","inserted-sign","inserted"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" // Use the default booking length for non-first slots\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" // Use the first booking length for first end boundary\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" // Use 0 for first start boundary\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" const increment = !isFirst\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"   ? timeSlotMinutes\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"   : !isStart\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"   ? firstSlotMinutes\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"   : 0;\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","unchanged"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" return moment(currentMomentOrDate)\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"   .clone()\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"   ...\n"}]},{"type":"text","value":"};"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"getSharpHours"}]},{"type":"text","value":" function is used for both start hours and end hours,\nso we need to receive it as a parameter and pass the value on to\n"},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"findNextBoundary"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"diff"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-diff"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-diff"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","deleted-sign","deleted"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","deleted"]},"children":[{"type":"text","value":"-"}]},{"type":"text","value":" export const getSharpHours = (intl, timeZone, startTime, endTime) => {\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","inserted-sign","inserted"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" export const getSharpHours = (intl, timeZone, startTime, endTime, isStart = false) => {\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","unchanged"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"   if (!moment.tz.zone(timeZone)) {\n"}]},{"type":"text","value":"...\n"},{"type":"element","tagName":"span","properties":{"className":["token","unchanged"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"   return findBookingUnitBoundaries({\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","deleted-sign","deleted"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","deleted"]},"children":[{"type":"text","value":"-"}]},{"type":"text","value":"     currentBoundary: findNextBoundary(timeZone, startTime, true)\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","inserted-sign","inserted"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"     // add isFirst and isStart params to determine first time slot handling\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"     currentBoundary: findNextBoundary(timeZone, startTime, true, isStart),\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","unchanged"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"     startMoment: moment(startTime),\n"}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"customize-start-hour-and-end-hour-list-behavior","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#customize-start-hour-and-end-hour-list-behavior","ariaLabel":"customize start hour and end hour list behavior permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"Customize start hour and end hour list behavior"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"By default, "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"getStartHours"}]},{"type":"text","value":" and "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"getEndHours"}]},{"type":"text","value":" basically retrieve the\nsame list, but "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"getStartHours"}]},{"type":"text","value":" removes the last entry and "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"getEndHours"}]},{"type":"text","value":"\nremoves the first entry. Since we have custom start and end handling in\n"},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"findNextBoundary"}]},{"type":"text","value":", we also need to modify the start and end hour lists."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"To get correct start times, we need to first pass "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"true"}]},{"type":"text","value":" as the\n"},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"isStart"}]},{"type":"text","value":" parameter from "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"getStartHours"}]},{"type":"text","value":" to "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"getSharpHours"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In addition, we need to make sure that even when selecting the last\nstart time, there is enough availability for the first timeslot. We do\nthis by removing enough entries from the end so that the first time slot\ncan be booked even from the last start moment."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"diff"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-diff"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-diff"]},"children":[{"type":"text","value":"export const getStartHours = (intl, timeZone, startTime, endTime) => {\n"},{"type":"element","tagName":"span","properties":{"className":["token","deleted-sign","deleted"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","deleted"]},"children":[{"type":"text","value":"-"}]},{"type":"text","value":" const hours = getSharpHours(intl, timeZone, startTime, endTime);\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","inserted-sign","inserted"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" const hours = getSharpHours(intl, timeZone, startTime, endTime, true);\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","deleted-sign","deleted"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","deleted"]},"children":[{"type":"text","value":"-"}]},{"type":"text","value":" return hours.length < 2 ? hours : hours.slice(0, -1);\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","inserted-sign","inserted"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" // Remove enough start times so that the first slot length can successfully be\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" // booked also from the last start time\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" const removeCount = Math.ceil(firstSlotMinutes / timeSlotMinutes)\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" return hours.length < removeCount ? [] : hours.slice(0, -removeCount);\n"}]},{"type":"text","value":"};"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Finally, we can simplify the end hour handling. Since the first entry is\ndetermined in the findNextBoundary function, we do not need to remove\nit. Instead, we can just return the full list from "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"getSharpHours"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"diff"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-diff"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-diff"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","unchanged"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" export const getEndHours = (intl, timeZone, startTime, endTime) => {\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","deleted-sign","deleted"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","deleted"]},"children":[{"type":"text","value":"-"}]},{"type":"text","value":"   const hours = getSharpHours(intl, timeZone, startTime, endTime);\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","deleted"]},"children":[{"type":"text","value":"-"}]},{"type":"text","value":"   return hours.length < 2 ? [] : hours.slice(1);\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","inserted-sign","inserted"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"   return getSharpHours(intl, timeZone, startTime, endTime);\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","unchanged"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" };"}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"We can then see that after the first booking length of 75 minutes, the\nsubsequent boundaries are 30 minutes each."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-wrapper"],"style":"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 300px; "},"children":[{"type":"text","value":"\n      "},{"type":"element","tagName":"a","properties":{"className":["gatsby-resp-image-link"],"href":"/docs/legacy/static/f5916dadf68e180229ef04f71799ce06/5b7bc/different_first_slot_booking.png","style":"display: block","target":"_blank","rel":["noopener"]},"children":[{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-background-image"],"style":"padding-bottom: 185.53459119496853%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAlCAYAAABCr8kFAAAACXBIWXMAABYlAAAWJQFJUiTwAAAFMUlEQVRIx5VWS48UVRSef0FwxcJEjRuX7IyJK9euDYZoCGIMbnABkYSobDRxYXySiWBEkI0isjCGAWaA6Wf1Y/r9qK7qmuqurqp+v+rRnzmHvjU1ToNYyZd7+07dr875zrnfnTXHcUBYeC7gewE8bw/inWfBmut6WPge6vYAcc1EWrcR1zowLQu2ZcGyLCZdLBbwfX8fwh8VWHNdF77vQe/2UTcs1DtdyGYPhmHANE10Oh1MJhOMRiMep9MpjwTaSyQ0CjAhfV2u1ZCMxyBXq5CrFWSzWUiShEqlgkwmw6C1VCrFcxpt2+a9giyIkJ5yuYxEIoFYLAbb7nJK4RdFiuGoSLPwWkBIE0plPB4z5vP5AW3Cm562viYWKXTx0Pzf2jwJT4xQCE8YDAaczqrN/4VllX20Wi00Gg1omsZ6ilZ5lijDkQaEZqcDo21Arstot9pQGg3uQd/z4VNRnoJw2o8JPR/toYlqV0WpI6NsNhj1vobmpIPmxHgitImBmTvbizBgp+MWgkvrngvHdZbw4HhLuB7mrstwVqVMWu3u7qJer7OObaPN1Q73oNVuolbMQqkVMR3agD8FvDEWnsMf98Ipc5VHY9gdC2pDgdEyYBomFq4Pz/HQ73axftfCl3/18N1GDz/cG+HrOyNcvD3Cw5wBz5nA9fxQUUjDvomqqSDTKCCvVZBVCtAnJkPTm/jq7wHO/zHBZ7eHuPjnAOd/H+L0DQe3HimYjrrw/MUeIUU4c+cYu1PM/Dmm3gxTf47RfIyxM0XHMqFrCvI7KSRi20jEIygVsrAMDaoiYzyesMHsKwrptPAXWHjLcfkbC8C2bMgNBYViEal0GpFYDJVaDUpTg6KqfGwP9GG320Wr3WK7EiALa7fbj4ulKMgXCkhKEhLJJIqlEpqaBkVRDhLSDzIE+sNsNmODoLkAkRIhRRgnR4rHec6EqyIUNk+kYTsXx49ODBFmd3aYMB5PBBHSOvnAAUJapMiGw2EQoXAdcm7amMvnEY3FOEJKX6PelWV+X/hnoCHpVSqVuLELhQIbBK3RQ4Ryo4GdXI6LQjqWymUmpEh7vV5gJAEh6VQsFnkzWTulSVZGL4oIRcqRaJSj3dV11pIKuo8w7IdhoxW2LwgpOqowXRPFYokjlFelTJtoUZhrv9/nkYpEf+8sCelyklIpJqT0hYa074CGpAOlret60H/c7KGUM8ubkEgpfSKsVKv88QOEpBs5DpHRnBycSIWe4ZS3IxHWjjRcSRjWUFzm1D70IkkR1pAqTEhnMtyHT02ZjpGqqhyZWOfrIZQykYWrnMvl0LVXVJlOhjhqdPzELcbmGkpZSkncOkRIEVJ/7q+y58Jje3cDzF0Ho8mIMRyPsKvvMqEkpZiMTotIuaEqmITPspjAB1tVgNkCmPnAHOgZNkpKHbFMCpF0Eg8SUaRLeZSbDciqCmcauqToAiKy6+0tnCh+iw8r6zhdXscHlUt4r/w93i19g48y68g0y7ifjuCu9AibiW1EdpJQOzpulbdQ7qkcBF1Ya5QePWdrP+PQg7fxQuQUjjw6gaOJM3gjfQGvpz7Gm7FPcSl7E5dTN7Ge/A2fRC/jQvRHfC5dw/HtLyB1q0tCZ4/wXO0qDj88jpci7+P57ZN4JfYhXk2exWvSORyNn8GLmyfx8tYpxnN3j+HwxjEcuvMWjmy9g/xQ5SyZ0FnqF+2V8ZO+geutTVxrbeKqfg9X9A1c0e/w+i+t+7jausf4tb2FG+2tYLRnA8ALtY2zqij/A76397/kPzmeyXW9GbFdAAAAAElFTkSuQmCC'); background-size: cover; display: block;"},"children":[]},{"type":"text","value":"\n  "},{"type":"element","tagName":"picture","properties":{},"children":[{"type":"text","value":"\n          "},{"type":"element","tagName":"source","properties":{"srcSet":["/docs/legacy/static/f5916dadf68e180229ef04f71799ce06/82e29/different_first_slot_booking.webp 159w","/docs/legacy/static/f5916dadf68e180229ef04f71799ce06/02dbd/different_first_slot_booking.webp 300w"],"sizes":"(max-width: 300px) 100vw, 300px","type":"image/webp"},"children":[]},{"type":"text","value":"\n          "},{"type":"element","tagName":"source","properties":{"srcSet":["/docs/legacy/static/f5916dadf68e180229ef04f71799ce06/8b9b5/different_first_slot_booking.png 159w","/docs/legacy/static/f5916dadf68e180229ef04f71799ce06/5b7bc/different_first_slot_booking.png 300w"],"sizes":"(max-width: 300px) 100vw, 300px","type":"image/png"},"children":[]},{"type":"text","value":"\n          "},{"type":"element","tagName":"img","properties":{"className":["gatsby-resp-image-image"],"src":"/docs/legacy/static/f5916dadf68e180229ef04f71799ce06/5b7bc/different_first_slot_booking.png","alt":"Booking end options for different first slot","title":"Booking end options for different first slot","loading":"lazy","decoding":"async","style":"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"},"children":[]},{"type":"text","value":"\n        "}]},{"type":"text","value":"\n  "}]},{"type":"text","value":"\n    "}]}]}],"data":{"quirksMode":false}},"headings":[{"value":"Set booking length to 30 minutes","depth":2},{"value":"Add a custom rounding function for moment.js","depth":3},{"value":"Use a time slot longer than 30 minutes","depth":2},{"value":"Find the rounding duration","depth":3},{"value":"Manually set first boundary to start time","depth":3},{"value":"Add separate handling for first timeslot","depth":2},{"value":"Determine first time slot boundaries","depth":3},{"value":"Customize start hour and end hour list behavior","depth":3}]}},"pageContext":{"slug":"modify-time-intervals","category":"how-to-listing"}},
    "staticQueryHashes": ["3794076007","439097193","717698143"]}