{"id":30,"date":"2024-10-25T08:45:05","date_gmt":"2024-10-25T15:45:05","guid":{"rendered":"https:\/\/lampwrite.com\/j\/?page_id=30"},"modified":"2025-04-22T14:19:36","modified_gmt":"2025-04-22T21:19:36","slug":"copilot-ai-and-improving-code-tests-in-2024","status":"publish","type":"page","link":"https:\/\/lampwrite.com\/j\/copilot-ai-and-improving-code-tests-in-2024\/","title":{"rendered":"Modernizing the Code Testing practice for AI"},"content":{"rendered":"\r\n\r\n\r\n<p>Bringing qualified candidates onto the team requires an investment of developer and leadership time.<\/p>\r\n<p style=\"padding-left: 40px;\">When it comes to developers, we&#8217;re usually a lot more interested in their ability to write, debug, and improve applications than their ability to be unflappable in an interview.<\/p>\r\n<p>There&#8217;s a lot to say about improving the hiring pipeline and providing team leads, HR and management with better tools<em>. <br \/><\/em><\/p>\r\n\r\n<p>Let&#8217;s look at how we bring on new talent and optimize the process.<\/p>\r\n\r\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"672\" height=\"442\" class=\"wp-image-302\" style=\"width: 525px; height: auto;\" src=\"https:\/\/lampwrite.com\/j\/wp-content\/uploads\/2024\/11\/3stage_interview.drawio.png\" alt=\"\" srcset=\"https:\/\/lampwrite.com\/j\/wp-content\/uploads\/2024\/11\/3stage_interview.drawio.png 672w, https:\/\/lampwrite.com\/j\/wp-content\/uploads\/2024\/11\/3stage_interview.drawio-300x197.png 300w\" sizes=\"auto, (max-width: 672px) 100vw, 672px\" \/><\/figure>\r\n\r\n<p>In the approach above, we don&#8217;t have a mechanism for technical filtering ahead of technical interviews. The process will struggle to scale.<\/p>\r\n\r\n<h3 class=\"wp-block-heading has-x-large-font-size\">Improving the curve through testing<\/h3>\r\n\r\n\r\n\r\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"672\" height=\"442\" class=\"wp-image-303\" style=\"width: 522px; height: auto;\" src=\"https:\/\/lampwrite.com\/j\/wp-content\/uploads\/2024\/11\/4stage_interview.drawio.png\" alt=\"\" srcset=\"https:\/\/lampwrite.com\/j\/wp-content\/uploads\/2024\/11\/4stage_interview.drawio.png 672w, https:\/\/lampwrite.com\/j\/wp-content\/uploads\/2024\/11\/4stage_interview.drawio-300x197.png 300w\" sizes=\"auto, (max-width: 672px) 100vw, 672px\" \/><\/figure>\r\n\r\n<p>Reducing the area under the curve allows us to scale our hiring practices.<\/p>\r\n<p>A <em>well-designed test<\/em> should:<\/p>\r\n<ul>\r\n<li>reduce the number of unsuccessful interviews overall<\/li>\r\n<li>increase the breadth of resumes we can examine<\/li>\r\n<li>allow greater time to be spent on team and fit and deep dive interviews<\/li>\r\n<li>and increase the number of candidates suitable to hire and the end of a cycle<\/li>\r\n<\/ul>\r\n\r\n<h3 class=\"wp-block-heading\">Good quality <em>Code Tests<\/em> are a top line improvement to any pipeline<\/h3>\r\n\r\n<p>They&#8217;re a great aid to introduce to any organization that has begun to significantly scale.<\/p>\r\n<p style=\"padding-left: 40px;\"><strong>However, Copilot\/ChatGPT and other ML models have the ability to compose reasonable functions from written descriptions<\/strong>, meaning outdated tests are trivially answerable without the candidate performing any action.<\/p>\r\n<p>2025 brings us to the point of needing to update our testing process to retain the strengths of administering short tests and to ensure we&#8217;re picking up talent that can handle complex problems outside of the scope of a query to copilot.<\/p>\r\n<p>For teams that haven&#8217;t run their code tests through Copilot, they may be surprised to learn how well it performs on many types of questions. Code generation is an active area of research, and specialized models are able to obtain satisfactory answers to written prompt questions as evaluated by a human on upwards of 80% of questions.<\/p>\r\n<p>We&#8217;ll explore what makes some questions trival and what makes them challenging.<\/p>\r\n\r\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\r\n<p>&nbsp;<\/p>\r\n<\/blockquote>\r\n\r\n\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\">A Quick Review of Testing Process<\/h3>\r\n\r\n\r\n\r\n<p>Tests are suitable for all roles that involve technical skills. The content will vary and may not involve &#8220;code&#8221; for some positions. <br \/><br \/>Versions of the test can be produced for customer-facing developers, data analyst and data scientist roles, UI and UX positions. Generally, the overarching lessons here apply to all technical testing, not just development.<\/p>\r\n\r\n<p>Good tests for candidates typically have a few qualities in common:<\/p>\r\n<p style=\"padding-left: 40px;\">a) a quick test: no more than 1-2 hours in length<\/p>\r\n<p style=\"padding-left: 40px;\">b) low burden: quickly understandable by hiring lead, reduce workload<\/p>\r\n<p style=\"padding-left: 40px;\">c) valuable: the answers should tell us quite a bit about the candidate<\/p>\r\n\r\n<div class=\"su-box su-box-style-default\" id=\"\" style=\"border-color:#000000;border-radius:3px;\"><div class=\"su-box-title\" style=\"background-color:#333333;color:#FFFFFF;border-top-left-radius:1px;border-top-right-radius:1px\">SIDEBAR: The 'five questions' design<\/div><div class=\"su-box-content su-u-clearfix su-u-trim\" style=\"border-bottom-left-radius:1px;border-bottom-right-radius:1px\">\r\n\r\n\r\n\r\n<p>Getting the right balance of question types helps improve the results we obtain from our pipeline. <br \/><br \/>Here&#8217;s a classic outline of the &#8220;Five Questions&#8221; test.<br \/><br \/><\/p>\r\n<p><strong>1) an easy question with a straightforward answer<\/strong><\/p>\r\n<p style=\"padding-left: 40px;\">&#8211; this is a fast-fail for folks who are obvious non-fits<br \/>&#8211; being a straightforward question, it reduces test anxiety and gives us better data on potential post-hire performance<br \/>&#8211; it shouldn&#8217;t take more than 5 minutes to answer question<\/p>\r\n<p><strong>2) a harder question that involves solving something with two distinct tasks<\/strong><\/p>\r\n<p style=\"padding-left: 40px;\">&#8211; this question should confound attempts to google\/copilot an answer<br \/>&#8211; it should take 15-30 minutes to complete an answer<\/p>\r\n<p><strong>3) a question that involves debugging a snippet of code and fixing the errors<\/strong><\/p>\r\n<p style=\"padding-left: 40px;\">&#8211; debugging code or data is a critical skill, one that&#8217;s harder to evaluate with in-person interviews <br \/>&#8211; moving off hypothetical \/ clean room problems helps us explore capabilities<br \/>&#8211; the candidate being able to spot additional errors and side effects, even if they aren&#8217;t readily apparent, is a great to watch for<br \/>&#8211; it should take 25 minutes to 45 minutes to answer<\/p>\r\n<p><strong>4) offer commentary about the above code and how you would improve it \/ add to it<\/strong><\/p>\r\n<p style=\"padding-left: 40px;\">&#8211; being able to communicate with other developers about code is a key skill<br \/>&#8211; knowing what the candidate values is important and quite informative<br \/>&#8211; knowing what the person regards as &#8216;problems&#8217; and how they address them tells us about personality fit<br \/>&#8211; should take not more than 15 minutes to answer<br \/>&#8211; questions 4 &amp; 5 benefit from not having a reduced time pressure<\/p>\r\n<p><strong>5) a final question with an optional level of difficulty<\/strong><\/p>\r\n<p style=\"padding-left: 40px;\">&#8211; lets us spot candidates with a depth of skill<br \/>&#8211; should have many deep areas to explore in greater detail in a technical interview<br \/>&#8211; all of the remaining time (25 to 60 minutes, plus more as desired)<\/p>\r\n<p>&nbsp;<\/p>\r\n\r\n\r\n\r\n<\/div><\/div>\r\n\r\n<p>Having a refined design like the <em>Five Questions <\/em>Template above gives us something we can <strong>quickly scan<\/strong> candidates and filter out obvious non-fits on a <strong>performance basis<\/strong> rather than assumptive.<\/p>\r\n<p>During any hiring cycle, we&#8217;d like a good return for developer\/leadership\/HR time spent <em>and<\/em>\u00a0 have a broad funnel for potential candidates. Excessive commitments of candidate time narrows this field, so a <strong>quick test<\/strong> outperforms a long test in the real world.<\/p>\r\n<p>Tests that <strong>build our confidence in a candidate<\/strong> accelerate the in-person process; we can shorten the phase of the interview that establishes basic skill and re-commit that energy to fit and aptitude and a more finely tuned evaluation of particularly valuable skills.<\/p>\r\n<div class=\"su-spoiler su-spoiler-style-default su-spoiler-icon-plus su-spoiler-closed\" data-scroll-offset=\"0\" data-anchor-in-url=\"no\"><div class=\"su-spoiler-title\" tabindex=\"0\" role=\"button\"><span class=\"su-spoiler-icon\"><\/span>WHERE IN THE PIPELINE CAN WE PLACE THE TEST? (click)<\/div><div class=\"su-spoiler-content su-u-clearfix su-u-trim\">\r\n<p>The code test falls here in our hiring process.<\/p>\r\n<p style=\"padding-left: 40px;\">a) resume quick-review<br \/>b) scheduled 10 minute call <br \/>c) <strong>code test<\/strong><br \/>d) technical &amp; interview(s)<br \/>e) final conversation<\/p>\r\n<p>The process benefits when candidates receive a real human contact prior to being invited to take a test. We get a wider array of quality candidates, and we can pre-filter obvious non-fits.<\/p>\r\n<\/div><\/div>\r\n\r\n<p>&nbsp;<\/p>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\">Questions that are now trivial<\/h3>\r\n\r\n<p><strong>Code tests have consistently evolved over the last thirty years<\/strong> in order to meet the reality of tools available.<\/p>\r\n<p>Widespread internet access, quality google results and well-answered stackoverflow questions has rendered the idea of trivia-style questioning impractical.<\/p>\r\n<p>We usually now test for resolving more complex scenarios, however,<strong> not all &#8216;complex&#8217; scenarios are actually difficult for code generators.<\/strong><\/p>\r\n<div class=\"su-box su-box-style-default\" id=\"\" style=\"border-color:#000000;border-radius:3px;\"><div class=\"su-box-title\" style=\"background-color:#333333;color:#FFFFFF;border-top-left-radius:1px;border-top-right-radius:1px\">SUMMARY: A quick summary on the state of research in LLM code generation.<\/div><div class=\"su-box-content su-u-clearfix su-u-trim\" style=\"border-bottom-left-radius:1px;border-bottom-right-radius:1px\">\r\n<p><a href=\"https:\/\/huggingface.co\/datasets\/google-research-datasets\/mbpp\"><strong>Mostly Basic Python Problems<\/strong><\/a> is a benchmark, curated by Google Research, which consists of around 1,000 crowd-sourced Python programming problems, designed to be solvable by entry level programmers, and was released as part of the <em>Program Synthesis with Large Language Models<\/em> paper.<\/p>\r\n<p>Austin et. al. (2021). <em>Program Synthesis with Large Language Models.<\/em><br \/><a href=\"https:\/\/arxiv.org\/abs\/2108.07732\">https:\/\/arxiv.org\/abs\/2108.07732<\/a><\/p>\r\n<p>Each problem in the dataset consists of a task description, code solution and 3 automated test cases.<code class=\"hljs language-text\"><\/code><code class=\"hljs language-text\"><\/code><\/p>\r\n<p>Example Questions:<br \/>Question #638: Write a function to calculate wind chill index.<br \/>Question #699: Write a python function to find the minimum number of swaps required to convert one binary string to another.<\/p>\r\n<p>The highest ranked LLM had an accuracy of 93.2% at time of writing.<\/p>\r\n<\/div><\/div>\r\n\r\n<h3 class=\"wp-block-heading has-large-font-size\">Many &#8216;complex&#8217; problems can also be solved trivially<\/h3>\r\n\r\n<p>Solvability is not limited to simple problems: if the language model can correctly decompose a question into reasonable steps, it can still rapidly complete even large problems with\u00a0 a correct response.<\/p>\r\n<p>Let&#8217;s review some question styles where we&#8217;ve &#8220;increased&#8221; the difficulty, but which remain trivially solvable for commercial LLMs.<\/p>\r\n<p><strong>Question A)<\/strong><\/p>\r\n<p style=\"padding-left: 40px;\">&#8220;Write a function in javascript that takes as input a number N, randomly selects 5 animals, one of which is a bird, from a list of 15 animals, and returns up to a maximum of N array of arrays of different possible combinations of animal names in a random order.&#8221;<\/p>\r\n<p>It&#8217;s difficult to obtain an answer to this just by using a search engine, because the combination of requirements is sufficiently unique that it does not produce matching questions.<\/p>\r\n\r\n<p>Here&#8217;s what Microsoft Copilot, AI chatbot developed by <a href=\"https:\/\/en.wikipedia.org\/wiki\/Microsoft\">Microsoft<\/a>, based on the <a href=\"https:\/\/en.wikipedia.org\/wiki\/GPT-4\">GPT-4<\/a>, handled that question in 2024.<\/p>\r\n\r\n\r\n\r\n<p>&nbsp;<\/p>\r\n\r\n\r\n\r\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" style=\"font-size: .875rem; font-family: Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; line-height: 1.25rem; --cbp-tab-width: 2; tab-size: var(--cbp-tab-width, 2);\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\"><span style=\"display: flex; align-items: center; padding: 10px 0px 0 16px; font-size: 0.8em; width: 100%; text-align: left; background-color: #263238; font-style: italic; color: #eeffff;\" data-darkreader-inline-bgcolor=\"\" data-darkreader-inline-color=\"\"><span style=\"border-bottom: 1px solid rgba(238, 255, 255, 0.2);\" data-darkreader-inline-border-bottom=\"\">JavaScript<\/span><\/span>\r\n<pre class=\"shiki material-theme\" style=\"background-color: #263238;\" tabindex=\"0\" data-darkreader-inline-bgcolor=\"\"><code><span class=\"line\"><span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">function<\/span> <span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">getRandomCombinations<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #eeffff; font-style: italic;\" data-darkreader-inline-color=\"\">N<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">)<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{<\/span><\/span>\r\n<span class=\"line\">    <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">const<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">animals<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\"> [<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">Lion<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">Tiger<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">Elephant<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">Giraffe<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">Zebra<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">Kangaroo<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">Panda<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">Koala<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">Penguin<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">Eagle<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">Parrot<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">Owl<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">Falcon<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">Sparrow<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">Peacock<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">]<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">    <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">const<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">birdList<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\"> [<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">Penguin<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">Eagle<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">Parrot<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">Owl<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">Falcon<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">Sparrow<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">Peacock<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">]<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n    \r\n<span class=\"line\">    <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">function<\/span> <span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">getRandomInt<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #eeffff; font-style: italic;\" data-darkreader-inline-color=\"\">min<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #eeffff; font-style: italic;\" data-darkreader-inline-color=\"\">max<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">)<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{<\/span><\/span>\r\n<span class=\"line\">        <span style=\"color: #89ddff; font-style: italic;\" data-darkreader-inline-color=\"\">return<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">Math<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">floor<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">Math<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">random<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">() <\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">*<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\"> (<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">max<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">-<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">min<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">+<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">1<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">)) <\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">+<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">min<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">    <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">}<\/span><\/span>\r\n\r\n<span class=\"line\">    <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">function<\/span> <span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">shuffleArray<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #eeffff; font-style: italic;\" data-darkreader-inline-color=\"\">array<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">)<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{<\/span><\/span>\r\n<span class=\"line\">        <span style=\"color: #89ddff; font-style: italic;\" data-darkreader-inline-color=\"\">for<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\"> (<\/span><span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">let<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">i<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">array<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">length<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">-<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">1<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">i<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">0<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">i<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">--<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">) <\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{<\/span><\/span>\r\n<span class=\"line\">            <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">const<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">j<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">getRandomInt<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">0<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">i<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">)<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\"><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">            [<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">array<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">[<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">i<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">]<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">array<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">[<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">j<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">]] <\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\"> [<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">array<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">[<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">j<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">]<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">array<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">[<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">i<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">]]<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">        <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">}<\/span><\/span>\r\n<span class=\"line\">    <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">}<\/span><\/span>\r\n\r\n<span class=\"line\">    <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">function<\/span> <span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">getRandomAnimals<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">()<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{<\/span><\/span>\r\n<span class=\"line\">        <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">const<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">selectedAnimals<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\"> []<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">        <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">const<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">bird<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">birdList<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">[<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">getRandomInt<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">0<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">birdList<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">length<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">-<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">1<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">)]<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">        <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">selectedAnimals<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">push<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">bird<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">)<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n\r\n<span class=\"line\">        <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">const<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">remainingAnimals<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">animals<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">filter<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #eeffff; font-style: italic;\" data-darkreader-inline-color=\"\">animal<\/span> <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">=&gt;<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">animal<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">!==<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">bird<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">)<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">        <span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">shuffleArray<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">remainingAnimals<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">)<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n\r\n<span class=\"line\">        <span style=\"color: #89ddff; font-style: italic;\" data-darkreader-inline-color=\"\">for<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\"> (<\/span><span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">let<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">i<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">0<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">i<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">4<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">i<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">++<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">) <\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{<\/span><\/span>\r\n<span class=\"line\">            <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">selectedAnimals<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">push<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">remainingAnimals<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">[<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">i<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">])<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">        <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">}<\/span><\/span>\r\n\r\n<span class=\"line\">        <span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">shuffleArray<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">selectedAnimals<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">)<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">        <span style=\"color: #89ddff; font-style: italic;\" data-darkreader-inline-color=\"\">return<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">selectedAnimals<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">    <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">}<\/span><\/span>\r\n\r\n<span class=\"line\">    <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">const<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">combinations<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\"> []<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">    <span style=\"color: #89ddff; font-style: italic;\" data-darkreader-inline-color=\"\">for<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\"> (<\/span><span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">let<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">i<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">0<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">i<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">N<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">i<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">++<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">) <\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{<\/span><\/span>\r\n<span class=\"line\">        <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">combinations<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">push<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">getRandomAnimals<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">())<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">    <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">}<\/span><\/span>\r\n\r\n<span class=\"line\">    <span style=\"color: #89ddff; font-style: italic;\" data-darkreader-inline-color=\"\">return<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">combinations<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\"><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">}<\/span><\/span>\r\n\r\n<span class=\"line\"><span style=\"color: #546e7a; font-style: italic;\" data-darkreader-inline-color=\"\">\/\/ Example usage:<\/span><\/span>\r\n<span class=\"line\"><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">console<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">log<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">getRandomCombinations<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">3<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">))<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span><\/code><\/pre>\r\n<\/div>\r\n\r\n\r\n\r\n<div class=\"su-spoiler su-spoiler-style-default su-spoiler-icon-plus su-spoiler-closed\" data-scroll-offset=\"0\" data-anchor-in-url=\"no\"><div class=\"su-spoiler-title\" tabindex=\"0\" role=\"button\"><span class=\"su-spoiler-icon\"><\/span>SAMPLE OUTPUT (click)<\/div><div class=\"su-spoiler-content su-u-clearfix su-u-trim\">\r\n\r\n\r\n\r\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" style=\"font-size: .875rem; font-family: Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; line-height: 1.25rem; --cbp-tab-width: 2; tab-size: var(--cbp-tab-width, 2);\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\"><span style=\"display: flex; align-items: center; padding: 10px 0px 0 16px; font-size: 0.8em; width: 100%; text-align: left; background-color: #263238; font-style: italic; color: #eeffff;\" data-darkreader-inline-bgcolor=\"\" data-darkreader-inline-color=\"\"><span style=\"border-bottom: 1px solid rgba(238, 255, 255, 0.2);\" data-darkreader-inline-border-bottom=\"\">JavaScript<\/span><\/span>\r\n<pre class=\"shiki material-theme\" style=\"background-color: #263238;\" tabindex=\"0\" data-darkreader-inline-bgcolor=\"\"><code><span class=\"line\"><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">getRandomCombinations<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">3<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">)<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n\r\n<span class=\"line\"><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">[<\/span><\/span>\r\n<span class=\"line\"><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">  [<\/span><\/span>\r\n<span class=\"line\">    <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">Falcon<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span><\/span>\r\n<span class=\"line\">    <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">Peacock<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span><\/span>\r\n<span class=\"line\">    <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">Owl<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span><\/span>\r\n<span class=\"line\">    <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">Penguin<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span><\/span>\r\n<span class=\"line\">    <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">Parrot<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><\/span>\r\n<span class=\"line\"><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">  ]<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span><\/span>\r\n<span class=\"line\"><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">  [<\/span><\/span>\r\n<span class=\"line\">    <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">Panda<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span><\/span>\r\n<span class=\"line\">    <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">Parrot<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span><\/span>\r\n<span class=\"line\">    <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">Penguin<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span><\/span>\r\n<span class=\"line\">    <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">Peacock<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span><\/span>\r\n<span class=\"line\">    <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">Koala<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><\/span>\r\n<span class=\"line\"><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">  ]<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span><\/span>\r\n<span class=\"line\"><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">  [<\/span><\/span>\r\n<span class=\"line\">    <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">Penguin<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span><\/span>\r\n<span class=\"line\">    <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">Eagle<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span><\/span>\r\n<span class=\"line\">    <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">Kangaroo<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span><\/span>\r\n<span class=\"line\">    <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">Falcon<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span><\/span>\r\n<span class=\"line\">    <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">Parrot<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><\/span>\r\n<span class=\"line\"><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">  ]<\/span><\/span>\r\n<span class=\"line\"><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">]<\/span><\/span><\/code><\/pre>\r\n<\/div>\r\n\r\n\r\n\r\n<\/div><\/div>\r\n\r\n<p>Copilot&#8217;s answer is correct and insufficiently distinguishable from work done by humans.<\/p>\r\n<p>The inclusion of undefined components did not pose issues.<\/p>\r\n<p>Essentially, models that can handle composition of arbitrary functions can answer many questions, especially where there is a strong similarity to well-published questions.<\/p>\r\n<p>Questions that resemble textbook questions or homework questions asked on stackoverflow are particularly trivial, even if their combination is unique with distinct elements.<\/p>\r\n<p>Unfortunately, these questions are quite common on code tests for candidates.<\/p>\r\n<div class=\"su-spoiler su-spoiler-style-default su-spoiler-icon-plus su-spoiler-closed\" data-scroll-offset=\"0\" data-anchor-in-url=\"no\"><div class=\"su-spoiler-title\" tabindex=\"0\" role=\"button\"><span class=\"su-spoiler-icon\"><\/span>HOW THOROUGHLY CAN COPILOT ANSWER THIS KIND OF QUESTION? (click)<\/div><div class=\"su-spoiler-content su-u-clearfix su-u-trim\"> Very thoroughly, even if we stack dozens of routines on top of the requested result, even if we chose obscure languages.<\/p>\r\n<p>Additionally, it&#8217;s not just that it can turn English language descriptions of functions into usable code, but also that it has a strong capacity to handle ambiguity and arrive at reasonable conclusions despite vague instructions.<\/p>\r\n<p>Here&#8217;s the answer Copilot gives if it is asked to &#8220;identify the ambiguous elements within the question&#8221;:<\/p>\r\n<ul>\r\n<li>List of 15 Animals: The exact list of 15 animals is not provided.<\/li>\r\n<li>Selection of 5 Animals: It is not specified whether the selection of 5 animals should be unique or if duplicates are allowed. The method for ensuring one of the selected animals is a bird is not detailed.<\/li>\r\n<li>Random Order: It is unclear if the random order applies to the selection of animals, the order of combinations, or both.<\/li>\r\n<li>Combinations: The term \u201cdifferent possible combinations\u201d is ambiguous. It is not clear if this refers to permutations (order matters) or combinations (order does not matter).<\/li>\r\n<li>Return Format: The structure of the returned array of arrays is not explicitly defined. Should each sub-array contain exactly 5 animals, or can it vary?<\/li>\r\n<li>Random Selection: The method for random selection is not specified. Should it use a specific randomization algorithm or library?<\/li>\r\n<\/ul>\r\n<\/div><\/div>\r\n<p>Because answers to this appear human-written and are reasonably high quality, we&#8217;re not going to get far unless we change our approach to what we test and why we test it.<\/p>\r\n\r\n<p>&nbsp;<\/p>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\">Question types that Copilot struggles with<\/h3>\r\n\r\n<p>We can produce questions the AI will struggle to answer.<\/p>\r\n<div class=\"su-box su-box-style-default\" id=\"\" style=\"border-color:#000000;border-radius:3px;\"><div class=\"su-box-title\" style=\"background-color:#333333;color:#FFFFFF;border-top-left-radius:1px;border-top-right-radius:1px\">SIDEBAR: A short, quick question that stumps code completion<\/div><div class=\"su-box-content su-u-clearfix su-u-trim\" style=\"border-bottom-left-radius:1px;border-bottom-right-radius:1px\">\r\n<p><strong>Question B)<\/strong><\/p>\r\n<p style=\"padding-left: 40px;\">&#8220;Take this snippet and make the cursor appear as a hand when it is over the circle and not the square.&#8221;<\/p>\r\n\r\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" style=\"font-size: .875rem; font-family: Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; line-height: 1.25rem; --cbp-tab-width: 4; tab-size: var(--cbp-tab-width, 2);\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\"><span style=\"display: flex; align-items: center; padding: 10px 0px 0 16px; font-size: 0.8em; width: 100%; text-align: left; background-color: #263238; font-style: italic; color: #eeffff;\" data-darkreader-inline-bgcolor=\"\" data-darkreader-inline-color=\"\"><span style=\"border-bottom: 1px solid rgba(238, 255, 255, 0.2);\" data-darkreader-inline-border-bottom=\"\">HTML<\/span><\/span>\r\n<pre class=\"shiki material-theme\" style=\"background-color: #263238;\" tabindex=\"0\" data-darkreader-inline-bgcolor=\"\"><code>\r\n<span class=\"line\"><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">br<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><\/span>\r\n<span class=\"line\"><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">hr<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><\/span>\r\n<span class=\"line\"><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">div<\/span> <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">id<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">box<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><\/span>\r\n<span class=\"line\">\t<span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">div<\/span> <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">class<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">square<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><\/span>\r\n<span class=\"line\"><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">\t1<\/span><\/span>\r\n<span class=\"line\">\t<span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;\/<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">div<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><\/span>\r\n<span class=\"line\">\t<span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">div<\/span> <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">class<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">circle<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><\/span>\r\n<span class=\"line\"><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">\t2<\/span><\/span>\r\n<span class=\"line\">\t<span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;\/<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">div<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><\/span>\r\n<span class=\"line\"><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;\/<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">div<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><\/span>\r\n\r\n<span class=\"line\"><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">STYLE<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><\/span>\r\n\r\n<span class=\"line\"><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">#<\/span><span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">box<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #ffcb6b;\" data-darkreader-inline-color=\"\">square<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{<\/span><\/span>\r\n<span class=\"line\">\t<span style=\"color: #b2ccd6;\" data-darkreader-inline-color=\"\">border-radius<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">16px<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">\t<span style=\"color: #b2ccd6;\" data-darkreader-inline-color=\"\">width<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">32px<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #b2ccd6;\" data-darkreader-inline-color=\"\">height<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">32px<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <\/span>\r\n<span class=\"line\">\t<span style=\"color: #b2ccd6;\" data-darkreader-inline-color=\"\">background-color<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\"> limegreen<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">\t<span style=\"color: #b2ccd6;\" data-darkreader-inline-color=\"\">position<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\"> absolute<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">\t<span style=\"color: #b2ccd6;\" data-darkreader-inline-color=\"\">top<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">15px<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">\t<span style=\"color: #b2ccd6;\" data-darkreader-inline-color=\"\">left<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">15px<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">\t<span style=\"color: #b2ccd6;\" data-darkreader-inline-color=\"\">cursor<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\"> pointer<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\"><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">}<\/span><\/span>\r\n\r\n<span class=\"line\"><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">#<\/span><span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">box<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #ffcb6b;\" data-darkreader-inline-color=\"\">circle<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{<\/span><\/span>\r\n<span class=\"line\">\t<span style=\"color: #b2ccd6;\" data-darkreader-inline-color=\"\">width<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">32px<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #b2ccd6;\" data-darkreader-inline-color=\"\">height<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">32px<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">\t<span style=\"color: #b2ccd6;\" data-darkreader-inline-color=\"\">background-color<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\"> pink<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">\t<span style=\"color: #b2ccd6;\" data-darkreader-inline-color=\"\">position<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\"> absolute<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\"><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">}<\/span><\/span>\r\n\r\n<span class=\"line\"><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">#<\/span><span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">box<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{<\/span><\/span>\r\n<span class=\"line\">\t<span style=\"color: #b2ccd6;\" data-darkreader-inline-color=\"\">position<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\"> absolute<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <\/span>\r\n<span class=\"line\"><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">}<\/span><\/span>\r\n\r\n<span class=\"line\"><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;\/<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">STYLE<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><\/span><\/code><\/pre>\r\n<\/div>\r\n\r\n<p>Copilot will answer that it should move border-radius from element 2 to element 1, not understanding that element 1 will appear as a circle to the user and the class names have no bearing on the element.<\/p>\r\n<p>\u00a0JSfiddle: <a href=\"https:\/\/jsfiddle.net\/ydkmja4z\/\">https:\/\/jsfiddle.net\/ydkmja4z\/<\/a><\/p>\r\n<p>This inability to understand which element is a circle is a limitation of Copilot, not ambiguity. As we&#8217;ve seen before, Copilot can handle ambiguity quite well.<\/p>\r\n<p>Further questions demonstrate Copilot&#8217;s inability to reduce the question to a solvable problem.<\/p>\r\n<div class=\"su-spoiler su-spoiler-style-default su-spoiler-icon-plus su-spoiler-closed\" data-scroll-offset=\"0\" data-anchor-in-url=\"no\"><div class=\"su-spoiler-title\" tabindex=\"0\" role=\"button\"><span class=\"su-spoiler-icon\"><\/span>Q. In the provided code, which element will appear as a circle to the user?<\/div><div class=\"su-spoiler-content su-u-clearfix su-u-trim\">&#8220;In the provided code, the element with the class circle will appear as a circle to the user. This is because it has equal width and height (32px each) and does not have any border-radius applied, making it a perfect square visually. However, since it is named circle, it is likely intended to be perceived as such.<\/p>\r\n<p>If you want it to visually appear as a circle, you can add a border-radius of 50%&#8221; &#8211; Microsoft Copilot<\/div><\/div>\r\n<p>Helpfully, in the answer above, Copilot identifies the rubric it uses to determine if something appears circular, which is to examine the css for (equal width and height with a border-radius set to 50%).<\/p>\r\n<p>In general, LLM models have <a href=\"https:\/\/arxiv.org\/abs\/1905.07830\">struggled with consequential outcomes<\/a> ( https:\/\/arxiv.org\/abs\/1905.07830 ) even when trained on those specific outcomes. And while progress has been made, in general, visual outcomes from interactions, event model and flow across a complex events, debugging and cross-domain logic are weak points.<\/p>\r\n<\/div><\/div>\r\n\r\n<p>&nbsp;<\/p>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\">Expansive questions provide higher quality results<\/h3>\r\n\r\n<p>In general, access to LLMs exacerbate a weakness present in many testing scenarios, which is questioning of candidates tests only a surface knowledge of a topic.<\/p>\r\n<p>The characteristic of being answerable through repetition rather than understanding or effort is <em>also<\/em> what makes a question trivial to copilot. Refining our questions to a higher quality satisfies both the need for better questions and produces challenging results for LLMs.<\/p>\r\n<p>In the next question, we&#8217;ll explore a question that not only confounds Copilot but also produces a greater insight into the experience and competence of the candidate.<\/p>\r\n\r\n<div class=\"su-box su-box-style-default\" id=\"\" style=\"border-color:#000000;border-radius:3px;\"><div class=\"su-box-title\" style=\"background-color:#333333;color:#FFFFFF;border-top-left-radius:1px;border-top-right-radius:1px\">SIDEBAR: Expansive questioning<\/div><div class=\"su-box-content su-u-clearfix su-u-trim\" style=\"border-bottom-left-radius:1px;border-bottom-right-radius:1px\">\r\n\r\n\r\n\r\n<p><strong>Question C)<\/strong><\/p>\r\n<p style=\"padding-left: 40px;\">&#8220;There is an error in this httpd configuration that will arise under common circumstances if the container and services is restarted but the connection to the internet is delayed.<\/p>\r\n<p style=\"padding-left: 40px;\">What is that error, why does it occur, and how would you resolve it?&#8221;<\/p>\r\n\r\n\r\n\r\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" style=\"font-size: .875rem; font-family: Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; line-height: 1.25rem; --cbp-tab-width: 2; tab-size: var(--cbp-tab-width, 2);\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\"><span style=\"display: flex; align-items: center; padding: 10px 0px 0 16px; font-size: 0.8em; width: 100%; text-align: left; background-color: #263238; font-style: italic; color: #eeffff;\" data-darkreader-inline-bgcolor=\"\" data-darkreader-inline-color=\"\"><span style=\"border-bottom: 1px solid rgba(238, 255, 255, 0.2);\" data-darkreader-inline-border-bottom=\"\">Apache<\/span><\/span>\r\n<pre class=\"shiki material-theme\" style=\"background-color: #263238;\" tabindex=\"0\" data-darkreader-inline-bgcolor=\"\"><code><span class=\"line\"><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">NameVirtualHost<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">192<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">168<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">1<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">200<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">:<\/span><span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">80<\/span><\/span>\r\n\r\n<span class=\"line\"><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">VirtualHost <\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">mytestsite.tld:80<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><\/span>\r\n<span class=\"line\">\t<span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">ServerAdmin<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\"> general@mytestsite.tld<\/span><\/span>\r\n<span class=\"line\">\t<span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">DocumentRoot<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\"> \/var\/www\/vhosts\/mytestsite.tld\/htdocs<\/span><\/span>\r\n<span class=\"line\">\t<span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">ServerName<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\"> mytestsite.tld<\/span><\/span>\r\n<span class=\"line\">\t<span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">ServerAlias<\/span> <span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">www.mytestsite.tld<\/span><\/span>\r\n<span class=\"line\">\t<span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">ErrorLog<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\"> logs\/mytestsite.tld-error_log<\/span><\/span>\r\n<span class=\"line\">\t<span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">CustomLog<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\"> logs\/mytestsite.tld-access_log common<\/span><\/span>\r\n<span class=\"line\">\t<span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">DirectoryIndex<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\"> index.html index.htm welcome.html<\/span><\/span>\r\n<span class=\"line\"><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;\/<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">VirtualHost<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><\/span>\r\n\r\n<span class=\"line\"><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">VirtualHost <\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">testsite.tld:80<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><\/span>\r\n<span class=\"line\">\t<span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">ServerAdmin<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\"> general@testsite.tld<\/span><\/span>\r\n<span class=\"line\">\t<span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">DocumentRoot<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\"> \/var\/www\/vhosts\/testsite.tld\/htdocs<\/span><\/span>\r\n<span class=\"line\">\t<span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">ServerName<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\"> testsite.tld<\/span><\/span>\r\n<span class=\"line\">\t<span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">ServerAlias<\/span> <span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">www.testsite.tld<\/span><\/span>\r\n<span class=\"line\">\t<span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">ErrorLog<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\"> logs\/testsite.tld-error_log<\/span><\/span>\r\n<span class=\"line\">\t<span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">CustomLog<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\"> logs\/testsite.tld-access_log common<\/span><\/span>\r\n<span class=\"line\">\t<span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">DirectoryIndex<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\"> index.html index.htm welcome.html<\/span><\/span>\r\n<span class=\"line\"><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;\/<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">VirtualHost<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><\/span><\/code><\/pre>\r\n<\/div>\r\n\r\n\r\n\r\n<p>&nbsp;<\/p>\r\n\r\n\r\n\r\n<div class=\"su-spoiler su-spoiler-style-default su-spoiler-icon-plus su-spoiler-closed\" data-scroll-offset=\"0\" data-anchor-in-url=\"no\"><div class=\"su-spoiler-title\" tabindex=\"0\" role=\"button\"><span class=\"su-spoiler-icon\"><\/span>HOW DOES COPILOT RESPOND TO THIS QUESTION? (click)<\/div><div class=\"su-spoiler-content su-u-clearfix su-u-trim\">Copilot does not correctly answer this question.<br \/><br \/>Instead, the answer given identifies an unspecified error in NameVirtualHost and provides a &#8220;fixed&#8221; configuration, and tells you to stop and restart the server. <br \/><br \/>The &#8216;fixed&#8217; configuration will actually be unchanged from the original question, making this question ideal for quickly filtering tests that have been purely answered by a chatbot. <br \/><br \/>In this case, it may be attempting to compose this wrong answer from a commonly given answer on stackoverflow to a similar issue and matching the format, but as that would result in an error if more than one VirtualHost was present, it cannot reach an actual answer.<\/div><\/div>\r\n\r\n<p>How would a candidate go about answering this question?<\/p>\r\n<p>To solve it, if they cannot identify the issue from experience, the candidate can perform a few tests starting and stopping a HTTPD server under certain circumstances. This is an appropriate question for positions that include dev-ops or system operation tasks, but anyone with experience with any form of containerization (docker, cloud technologies, virtualization) or other backend technologies have the skill to test the conditions, draw a reasonable inference about the error, test a solution and offer an explanation in a reasonable timeframe.<\/p>\r\n<p><strong>Introducing a requirement to a question to learn, project a conclusion, and test<\/strong>, especially <em>repeatedly<\/em>, in order to solve a problem, provides immediate challenges to <strong>LLM-based answers. <\/strong><\/p>\r\n<p>Outside of answers enhanced through Retrieval-augmented generation, LLM systems like copilot cannot be said to learn <em>during<\/em> an interaction. Such systems can be prompted to try new prompts to retrieve\/resolve a correct answer or a prompt can be refined to further approach a correct answer, but will struggle if the corpus used for training\u00a0 contains errors.<\/p>\r\n<p>Similarly, the system will produce unsatisfactory answers when faced with a problem where the understanding of it must change as it is explored, especially without the means to perceive change.<\/p>\r\n\r\n<div class=\"su-spoiler su-spoiler-style-default su-spoiler-icon-plus su-spoiler-closed\" data-scroll-offset=\"0\" data-anchor-in-url=\"no\"><div class=\"su-spoiler-title\" tabindex=\"0\" role=\"button\"><span class=\"su-spoiler-icon\"><\/span>EXAMPLE OF A CORRECT ANSWER (click)<\/div><div class=\"su-spoiler-content su-u-clearfix su-u-trim\">A sufficient answer might look like this:<br \/><br \/>HTTPD performs a lookup on the VirtualHost ServerName at the time the service is started. If it cannot find the IP address associated with testsite.tld, it will not serve the content from the correct VHOST, even if the connection is restored after the service is initialized. The configuration issue can be clearly inspected through httpd -S or httpdctl -s.<br \/><br \/>This can be resolved by any number of means. Common solutions include having a local DNS service, including the .tld domains in \/etc\/hosts, architecture using httpd as an internal service using IP-based virtual hosting, and essentially any mechanism that would ensure the service will roll-over if a connection fails, or placing the container in an error state if it cannot obatain DNS or the internet.<\/div><\/div>\r\n\r\n<p>Regardless of how the candidate solves the problem, the answer the candidate gives about other approaches allows us to explore with them the advantages and drawbacks.<\/p>\r\n<p>This style of question is a great one for asking candidates to propose more solutions, including examples of how they would implement those solutions, including code or configuration.<\/p>\r\n<p>The questions that can offer a launching point for topics during an in person interview are interesting.<\/p>\r\n\r\n<\/div><\/div>\r\n\r\n\r\n\r\n<p>&nbsp;<\/p>\r\n\r\n\r\n\r\n<p>&nbsp;<\/p>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\">Debugging questions are a gold standard for testing questions<\/h3>\r\n\r\n<p>Complex tasks, like <strong>genuinely debugging a hidden issue<\/strong>, can fall outside of copilot&#8217;s scope by a considerable margin.<\/p>\r\n<p>This is a debugging style question. This kind of bug is invisible to AI-assist applications like copilot.<\/p>\r\n<div class=\"su-box su-box-style-default\" id=\"\" style=\"border-color:#000000;border-radius:3px;\"><div class=\"su-box-title\" style=\"background-color:#333333;color:#FFFFFF;border-top-left-radius:1px;border-top-right-radius:1px\">SIDEBAR: complex debugging questions<\/div><div class=\"su-box-content su-u-clearfix su-u-trim\" style=\"border-bottom-left-radius:1px;border-bottom-right-radius:1px\">\r\n<p><strong>Question D)<\/strong><\/p>\r\n<p style=\"padding-left: 40px;\">Here is a contrived example one page calendar in plain, standards-compliant HTML and javascript.<\/p>\r\n<p>There are a set of bugs in this application that affect what is being rendered in these two subsequent months &#8211; one in the generation of the sample data and one in the display of the calendar months.<\/p>\r\n<p>Without significantly rewriting the application, correct the specific bugs, and explain what caused them in the first place.<\/p>\r\n\r\n<div class=\"wp-block-kevinbatdorf-code-block-pro cbp-has-line-numbers\" style=\"font-size: .875rem; font-family: Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; --cbp-line-number-color: #EEFFFF; --cbp-line-number-width: calc(3 * 0.6 * .875rem); line-height: 1.25rem; --cbp-tab-width: 2; tab-size: var(--cbp-tab-width, 2);\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\"><span style=\"display: flex; align-items: center; padding: 10px 0px 0 16px; font-size: 0.8em; width: 100%; text-align: left; background-color: #263238; font-style: italic; color: #eeffff;\" data-darkreader-inline-bgcolor=\"\" data-darkreader-inline-color=\"\"><span style=\"border-bottom: 1px solid rgba(238, 255, 255, 0.2);\" data-darkreader-inline-border-bottom=\"\">HTML<\/span><\/span>\r\n<pre class=\"shiki material-theme\" style=\"background-color: #263238;\" tabindex=\"0\" data-darkreader-inline-bgcolor=\"\"><code><span class=\"line\"><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;!<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">DOCTYPE<\/span> <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">html<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><\/span>\r\n<span class=\"line\"><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">html<\/span> <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">lang<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">en<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><\/span>\r\n<span class=\"line\"><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">head<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><\/span>\r\n<span class=\"line\">\t<span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">meta<\/span> <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">charset<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">UTF-8<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><\/span>\r\n<span class=\"line\">\t<span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">meta<\/span> <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">name<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">viewport<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span> <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">content<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">width=device-width, initial-scale=1.0<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><\/span>\r\n<span class=\"line\"><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\t&lt;<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">style<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><\/span>\r\n<span class=\"line\">        <span style=\"color: #ffcb6b;\" data-darkreader-inline-color=\"\">body<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{<\/span> <span style=\"color: #b2ccd6;\" data-darkreader-inline-color=\"\">height<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">100vh<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #b2ccd6;\" data-darkreader-inline-color=\"\">background-color<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">#<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">f0f0f0<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #b2ccd6;\" data-darkreader-inline-color=\"\">padding<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">20px<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #b2ccd6;\" data-darkreader-inline-color=\"\">box-sizing<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\"> border-box<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">}<\/span><\/span>\r\n<span class=\"line\">        <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">#<\/span><span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">calendar<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{<\/span> <span style=\"color: #b2ccd6;\" data-darkreader-inline-color=\"\">display<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\"> block<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #b2ccd6;\" data-darkreader-inline-color=\"\">position<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\"> static<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">}<\/span><\/span>\r\n<span class=\"line\">        <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #ffcb6b;\" data-darkreader-inline-color=\"\">calendar-container<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{<\/span> <span style=\"color: #b2ccd6;\" data-darkreader-inline-color=\"\">display<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\"> flex<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #b2ccd6;\" data-darkreader-inline-color=\"\">flex-direction<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\"> column<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #b2ccd6;\" data-darkreader-inline-color=\"\">justify-content<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\"> center<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #b2ccd6;\" data-darkreader-inline-color=\"\">align-items<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\"> center<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #b2ccd6;\" data-darkreader-inline-color=\"\">width<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">100%<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #b2ccd6;\" data-darkreader-inline-color=\"\">max-width<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">1200px<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #b2ccd6;\" data-darkreader-inline-color=\"\">margin<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">0<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\"> auto<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">}<\/span><\/span>\r\n<span class=\"line\">        <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #ffcb6b;\" data-darkreader-inline-color=\"\">calendar<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{<\/span> <span style=\"color: #b2ccd6;\" data-darkreader-inline-color=\"\">width<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">100%<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">}<\/span><\/span>\r\n<span class=\"line\">        <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #ffcb6b;\" data-darkreader-inline-color=\"\">month<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{<\/span> <span style=\"color: #b2ccd6;\" data-darkreader-inline-color=\"\">display<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\"> grid<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #b2ccd6;\" data-darkreader-inline-color=\"\">grid-template-columns<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span> <span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">repeat<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">7<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">1fr<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">);<\/span> <span style=\"color: #b2ccd6;\" data-darkreader-inline-color=\"\">gap<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">1px<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #b2ccd6;\" data-darkreader-inline-color=\"\">border<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">2px<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\"> solid <\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">#<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">000<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #b2ccd6;\" data-darkreader-inline-color=\"\">margin-bottom<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">20px<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">}<\/span><\/span>\r\n<span class=\"line\">        <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #ffcb6b;\" data-darkreader-inline-color=\"\">month-header<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{<\/span> <span style=\"color: #b2ccd6;\" data-darkreader-inline-color=\"\">grid-column<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\"> span <\/span><span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">7<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #b2ccd6;\" data-darkreader-inline-color=\"\">text-align<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\"> center<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #b2ccd6;\" data-darkreader-inline-color=\"\">font-weight<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\"> bold<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #b2ccd6;\" data-darkreader-inline-color=\"\">padding<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">10px<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #b2ccd6;\" data-darkreader-inline-color=\"\">background-color<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">#<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">ddd<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">}<\/span><\/span>\r\n<span class=\"line\">        <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #ffcb6b;\" data-darkreader-inline-color=\"\">day-header<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{<\/span> <span style=\"color: #b2ccd6;\" data-darkreader-inline-color=\"\">font-weight<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\"> bold<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #b2ccd6;\" data-darkreader-inline-color=\"\">text-align<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\"> center<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #b2ccd6;\" data-darkreader-inline-color=\"\">padding<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">10px<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #b2ccd6;\" data-darkreader-inline-color=\"\">background-color<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">#<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">eee<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">}<\/span><\/span>\r\n<span class=\"line\">        <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #ffcb6b;\" data-darkreader-inline-color=\"\">day<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{<\/span> <span style=\"color: #b2ccd6;\" data-darkreader-inline-color=\"\">border<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">1px<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\"> solid <\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">#<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">ddd<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #b2ccd6;\" data-darkreader-inline-color=\"\">background-color<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">#<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">fff<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #b2ccd6;\" data-darkreader-inline-color=\"\">box-sizing<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\"> border-box<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #b2ccd6;\" data-darkreader-inline-color=\"\">padding<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">8px<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #b2ccd6;\" data-darkreader-inline-color=\"\">min-height<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">100px<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #b2ccd6;\" data-darkreader-inline-color=\"\">display<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\"> flex<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #b2ccd6;\" data-darkreader-inline-color=\"\">flex-direction<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\"> column<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">}<\/span><\/span>\r\n<span class=\"line\">        <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #ffcb6b;\" data-darkreader-inline-color=\"\">date-header<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{<\/span> <span style=\"color: #b2ccd6;\" data-darkreader-inline-color=\"\">font-weight<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\"> bold<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #b2ccd6;\" data-darkreader-inline-color=\"\">margin-bottom<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">8px<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">}<\/span><\/span>\r\n<span class=\"line\">        <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #ffcb6b;\" data-darkreader-inline-color=\"\">staff<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{<\/span> <span style=\"color: #b2ccd6;\" data-darkreader-inline-color=\"\">margin-bottom<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">4px<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">}<\/span><\/span>\r\n<span class=\"line\">\t<span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;\/<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">style<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><\/span>\r\n<span class=\"line\">\t<span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">title<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">Calendar for Karaoke Night - This month and next month<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;\/<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">title<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><\/span>\r\n<span class=\"line\"><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;\/<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">head<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><\/span>\r\n<span class=\"line\"><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">body<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><\/span>\r\n<span class=\"line\"><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">section<\/span> <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">id<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">calendar<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><\/span>\r\n<span class=\"line\">\t<span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">h3<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">Karaoke Hosts - this month and next month<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;\/<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">h3<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><\/span>\r\n<span class=\"line\">\t<span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">div<\/span> <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">class<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">calendar-container<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><\/span>\r\n<span class=\"line\">\t\t<span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">div<\/span> <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">class<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">calendar<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span> <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">id<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">calendar<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;&lt;\/<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">div<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><\/span>\r\n<span class=\"line\">\t<span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;\/<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">div<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><\/span>\r\n<span class=\"line\"><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;\/<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">section<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><\/span>\r\n\r\n<span class=\"line\"><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">script<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><\/span>\r\n<span class=\"line\">\t<span style=\"color: #546e7a; font-style: italic;\" data-darkreader-inline-color=\"\">\/\/ Generate a UUID (one-liner function)<\/span><\/span>\r\n<span class=\"line\">\t<span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">const<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\"> generateUUID <\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">()<\/span> <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">=&gt;<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">replace<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\/[<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">xy<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">]\/<\/span><span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">g<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #eeffff; font-style: italic;\" data-darkreader-inline-color=\"\">c<\/span> <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">=&gt;<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\"> (c <\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">===<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">x<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">?<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\"> (Math<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">random<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">() <\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">*<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">16<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">|<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">0<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">) <\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\"> ((Math<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">random<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">() <\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">*<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">16<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">|<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">0<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">) <\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&amp;<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">0x3<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">|<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">0x8<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">))<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">toString<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">16<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">))<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n\r\n<span class=\"line\">\t<span style=\"color: #546e7a; font-style: italic;\" data-darkreader-inline-color=\"\">\/\/ generates an example of a JSON staffBookings structure<\/span><\/span>\r\n<span class=\"line\">\t<span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">function<\/span> <span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">loadStaffBookings<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">()<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{<\/span><\/span>\r\n<span class=\"line\">\t\t<span style=\"color: #546e7a; font-style: italic;\" data-darkreader-inline-color=\"\">\/\/ Example structure created by loadStaffBookings:<\/span><\/span>\r\n<span class=\"line\">\t\t<span style=\"color: #546e7a; font-style: italic;\" data-darkreader-inline-color=\"\">\/\/ {<\/span><\/span>\r\n<span class=\"line\">\t\t<span style=\"color: #546e7a; font-style: italic;\" data-darkreader-inline-color=\"\">\/\/   \"startDate\": {<\/span><\/span>\r\n<span class=\"line\">\t\t<span style=\"color: #546e7a; font-style: italic;\" data-darkreader-inline-color=\"\">\/\/     \"bookingID\": { \"staffName\": \"Alice\", \"period\": \"afternoon\" },<\/span><\/span>\r\n<span class=\"line\">\t\t<span style=\"color: #546e7a; font-style: italic;\" data-darkreader-inline-color=\"\">\/\/     \"bookingID\": { \"staffName\": \"Bob\", \"period\": \"evening\" }<\/span><\/span>\r\n<span class=\"line\">\t\t<span style=\"color: #546e7a; font-style: italic;\" data-darkreader-inline-color=\"\">\/\/   },<\/span><\/span>\r\n<span class=\"line\">\t\t<span style=\"color: #546e7a; font-style: italic;\" data-darkreader-inline-color=\"\">\/\/   \"startDate\": { ... }<\/span><\/span>\r\n<span class=\"line\">\t\t<span style=\"color: #546e7a; font-style: italic;\" data-darkreader-inline-color=\"\">\/\/ }<\/span><\/span>\r\n\r\n<span class=\"line\">\t\t<span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">const<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">staffNames<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span><\/span>\r\n<span class=\"line\">\t\t\t<span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">Array<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">from<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\"> length<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">10<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">},<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">()<\/span> <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">=&gt;<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{<\/span><\/span>\r\n<span class=\"line\">\t\t\t\t<span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">const<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">uuid<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">generateUUID<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">()<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">\t\t\t\t<span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">const<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">names<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\"> [<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">Alice<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">Bob<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">Charlie<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">Diana<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">Eve<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">Frank<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">Grace<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">Heidi<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">Ivan<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">Judy<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">]<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">\t\t\t\t<span style=\"color: #89ddff; font-style: italic;\" data-darkreader-inline-color=\"\">return<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\"> [<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">uuid<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">]<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\"> staffName<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">names<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">shift<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">() <\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">}<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">};<\/span><\/span>\r\n<span class=\"line\">\t\t\t<span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">}<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">)<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">reduce<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #eeffff; font-style: italic;\" data-darkreader-inline-color=\"\">acc<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #eeffff; font-style: italic;\" data-darkreader-inline-color=\"\">curr<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">)<\/span> <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">=&gt;<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\"> (<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">...<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">acc<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">...<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">curr<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">}<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">)<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{}<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">)<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n\r\n<span class=\"line\">\t\t<span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">const<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">bookings<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{};<\/span><\/span>\r\n<span class=\"line\">\t\t<span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">const<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">today<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">new<\/span> <span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">Date<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">()<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n\r\n<span class=\"line\">\t\t<span style=\"color: #89ddff; font-style: italic;\" data-darkreader-inline-color=\"\">for<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\"> (<\/span><span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">let<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">i<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">-<\/span><span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">30<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">i<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;=<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">60<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">i<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">++<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">) <\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{<\/span><\/span>\r\n<span class=\"line\">\t\t\t<span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">const<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">date<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">new<\/span> <span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">Date<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">()<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">\t\t\t<span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">date<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">setDate<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">today<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">getDate<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">() <\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">+<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">i<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">)<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">\t\t\t<span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">const<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">dateString<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">date<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">toISOString<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">()<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">split<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">T<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">)[<\/span><span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">0<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">]<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">\t\t\t<span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">bookings<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">[<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">dateString<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">] <\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{};<\/span><\/span>\r\n<span class=\"line\">\t\t\t<span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">const<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">periods<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\"> [<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">afternoon<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">evening<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">]<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">\t\t\t<span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">const<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">filledPeriods<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">Math<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">random<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">() <\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">0.9<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">?<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">periods<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\"> [<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">periods<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">[<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">Math<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">floor<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">Math<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">random<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">() <\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">*<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">periods<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">length<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">)]]<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n\r\n<span class=\"line\">\t\t\t<span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">filledPeriods<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">forEach<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #eeffff; font-style: italic;\" data-darkreader-inline-color=\"\">period<\/span> <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">=&gt;<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{<\/span><\/span>\r\n<span class=\"line\">\t\t\t\t<span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">const<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">bookingID<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">generateUUID<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">()<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">\t\t\t\t<span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">const<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">staffID<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">Object<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">keys<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">staffNames<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">)[<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">Math<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">floor<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">Math<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">random<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">() <\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">*<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">Object<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">keys<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">staffNames<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">)<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">length<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">)]<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">\t\t\t\t<span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">bookings<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">[<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">dateString<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">][<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">bookingID<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">] <\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">staffID<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">period<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\"> staffName<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">staffNames<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">[<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">staffID<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">]<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">staffName<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">};<\/span><\/span>\r\n<span class=\"line\">\t\t\t<span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">}<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">)<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">\t\t<span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">}<\/span><\/span>\r\n\r\n<span class=\"line\">\t\t<span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">window<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">application<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">window<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">application<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">||<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{};<\/span><\/span>\r\n<span class=\"line\">\t\t<span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">window<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">application<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">staffBookings<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">bookings<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">\t<span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">}<\/span><\/span>\r\n\r\n<span class=\"line\">\t<span style=\"color: #546e7a; font-style: italic;\" data-darkreader-inline-color=\"\">\/\/ Generate calendar with staff bookings<\/span><\/span>\r\n<span class=\"line\">\t<span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">function<\/span> <span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">generateCalendar<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #eeffff; font-style: italic;\" data-darkreader-inline-color=\"\">startDate<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #eeffff; font-style: italic;\" data-darkreader-inline-color=\"\">numMonths<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #eeffff; font-style: italic;\" data-darkreader-inline-color=\"\">staffBookings<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">)<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{<\/span><\/span>\r\n<span class=\"line\">\t\t<span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">const<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">calendarContainer<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">document<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">querySelector<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">.calendar-container .calendar<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">)<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">\t\t<span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">const<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">daysOfWeek<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\"> [<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">Monday<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">Tuesday<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">Wednesday<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">Thursday<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">Friday<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">Saturday<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">Sunday<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">]<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">\t\t<span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">const<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">benchmarks<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\"> []<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">\t\t<span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">let<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">currentDate<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">new<\/span> <span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">Date<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">startDate<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">)<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n\r\n<span class=\"line\">\t\t<span style=\"color: #89ddff; font-style: italic;\" data-darkreader-inline-color=\"\">for<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\"> (<\/span><span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">let<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">i<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">0<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">i<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">numMonths<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">i<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">++<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">) <\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{<\/span><\/span>\r\n<span class=\"line\">\t\t\t<span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">const<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">monthContainer<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">document<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">createElement<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">div<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">)<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">\t\t\t<span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">monthContainer<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">className<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">month<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n\r\n<span class=\"line\">\t\t\t<span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">const<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">monthHeader<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">document<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">createElement<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">div<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">)<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">\t\t\t<span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">monthHeader<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">className<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">month-header<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">\t\t\t<span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">monthHeader<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">textContent<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">`${<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">currentDate<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">toLocaleString<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">default<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{<\/span> <span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">month<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">long<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">}<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">)<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">}<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">${<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">currentDate<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">getFullYear<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">()<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">}`<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">\t\t\t<span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">monthContainer<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">appendChild<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">monthHeader<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">)<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n\r\n<span class=\"line\">\t\t\t<span style=\"color: #546e7a; font-style: italic;\" data-darkreader-inline-color=\"\">\/\/ Add day of the week headers<\/span><\/span>\r\n<span class=\"line\">\t\t\t<span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">daysOfWeek<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">forEach<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #eeffff; font-style: italic;\" data-darkreader-inline-color=\"\">day<\/span> <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">=&gt;<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{<\/span><\/span>\r\n<span class=\"line\">\t\t\t\t<span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">const<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">dayHeader<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">document<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">createElement<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">div<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">)<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">\t\t\t\t<span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">dayHeader<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">className<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">day-header<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">\t\t\t\t<span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">dayHeader<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">textContent<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">day<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">\t\t\t\t<span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">monthContainer<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">appendChild<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">dayHeader<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">)<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">\t\t\t<span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">}<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">)<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n\r\n<span class=\"line\">\t\t\t<span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">const<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">monthStart<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">new<\/span> <span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">Date<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">currentDate<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">getFullYear<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">()<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">currentDate<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">getMonth<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">()<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">1<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">)<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">\t\t\t<span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">const<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">monthEnd<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">new<\/span> <span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">Date<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">currentDate<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">getFullYear<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">()<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">currentDate<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">getMonth<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">() <\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">+<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">1<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">0<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">)<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n\r\n<span class=\"line\">\t\t\t<span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">let<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">startDay<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">monthStart<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">getDay<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">()<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">\t\t\t<span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">startDay<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">startDay<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">===<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">0<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">?<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">6<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">startDay<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">-<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">1<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span>  <span style=\"color: #546e7a; font-style: italic;\" data-darkreader-inline-color=\"\">\/\/ Adjust to have Monday as the first day<\/span><\/span>\r\n\r\n<span class=\"line\">\t\t\t<span style=\"color: #89ddff; font-style: italic;\" data-darkreader-inline-color=\"\">for<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\"> (<\/span><span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">let<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">blank<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">0<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">blank<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">startDay<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">blank<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">++<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">) <\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{<\/span><\/span>\r\n<span class=\"line\">\t\t\t\t<span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">const<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">blankDiv<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">document<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">createElement<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">div<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">)<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">\t\t\t\t<span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">blankDiv<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">className<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">day<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">\t\t\t\t<span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">monthContainer<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">appendChild<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">blankDiv<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">)<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">\t\t\t<span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">}<\/span><\/span>\r\n\r\n<span class=\"line\">\t\t\t<span style=\"color: #89ddff; font-style: italic;\" data-darkreader-inline-color=\"\">for<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\"> (<\/span><span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">let<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">day<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">1<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">day<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;=<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">monthEnd<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">getDate<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">()<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">day<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">++<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">) <\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{<\/span><\/span>\r\n\r\n<span class=\"line\">\t\t\t\t<span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">const<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">dayDiv<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">document<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">createElement<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">div<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">)<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">\t\t\t\t<span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">dayDiv<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">className<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">day<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n\r\n<span class=\"line\">\t\t\t\t<span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">const<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">dateHeader<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">document<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">createElement<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">div<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">)<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">\t\t\t\t<span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">dateHeader<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">className<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">date-header<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">\t\t\t\t<span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">dateHeader<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">textContent<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">`${<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">day<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">}`<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n\r\n<span class=\"line\">\t\t\t\t<span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">dayDiv<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">appendChild<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">dateHeader<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">)<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n\r\n<span class=\"line\">\t\t\t\t<span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">const<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">dateString<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">new<\/span> <span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">Date<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">currentDate<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">getFullYear<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">()<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">currentDate<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">getMonth<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">()<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">day<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">)<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">toISOString<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">()<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">split<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">T<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">)[<\/span><span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">0<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">]<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n\r\n\r\n<span class=\"line\">\t\t\t\t<span style=\"color: #89ddff; font-style: italic;\" data-darkreader-inline-color=\"\">if<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\"> (<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">staffBookings<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">[<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">dateString<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">]) <\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{<\/span><\/span>\r\n<span class=\"line\">\t\t\t\t\t<span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">Object<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">values<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">staffBookings<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">[<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">dateString<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">])<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">forEach<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #eeffff; font-style: italic;\" data-darkreader-inline-color=\"\">booking<\/span> <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">=&gt;<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{<\/span><\/span>\r\n<span class=\"line\">\t\t\t\t\t\t<span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">const<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">staffDiv<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">document<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">createElement<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">div<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">)<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">\t\t\t\t\t\t<span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">staffDiv<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">className<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">staff<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">\t\t\t\t\t\t<span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">staffDiv<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">textContent<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">`${<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">booking<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">staffName<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">}<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\"> (<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">${<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">booking<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">period<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">}<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">)<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">`<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">\t\t\t\t\t\t<span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">dayDiv<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">appendChild<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">staffDiv<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">)<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">\t\t\t\t\t<span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">}<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">)<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">\t\t\t\t<span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">}<\/span><\/span>\r\n\r\n<span class=\"line\">\t\t\t\t<span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">monthContainer<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">appendChild<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">dayDiv<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">)<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">\t\t\t\t<span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">currentDate<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">setDate<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">currentDate<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">getDate<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">() <\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">+<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">1<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">)<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">\t\t\t<span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">}<\/span><\/span>\r\n\r\n<span class=\"line\">\t\t\t<span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">calendarContainer<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">appendChild<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">monthContainer<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">)<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">\t\t\t<span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">currentDate<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">setMonth<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">currentDate<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">getMonth<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">() <\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">+<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">1<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">)<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #546e7a; font-style: italic;\" data-darkreader-inline-color=\"\">\/\/ Move to the next month<\/span><\/span>\r\n<span class=\"line\">\t\t\t<span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">currentDate<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">setDate<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">1<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">)<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #546e7a; font-style: italic;\" data-darkreader-inline-color=\"\">\/\/ Reset to the first day of the month<\/span><\/span>\r\n\r\n<span class=\"line\">\t\t<span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">}<\/span><\/span>\r\n\r\n\r\n\r\n<span class=\"line\">\t<span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">}<\/span><\/span>\r\n\r\n<span class=\"line\"><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">\tdocument<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">addEventListener<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">DOMContentLoaded<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">()<\/span> <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">=&gt;<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{<\/span><\/span>\r\n<span class=\"line\">\t\t<span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">loadStaffBookings<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">()<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">\t\t<span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">setTimeout<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">()<\/span> <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">=&gt;<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{<\/span><\/span>\r\n<span class=\"line\">\t\t\t<span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">const<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">today<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">new<\/span> <span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">Date<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">()<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">\t\t\t<span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">generateCalendar<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">today<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">2<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">window<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">application<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">staffBookings<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">)<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #546e7a; font-style: italic;\" data-darkreader-inline-color=\"\">\/\/ Generate calendar using staff bookings<\/span><\/span>\r\n<span class=\"line\">\t\t<span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">},<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">200<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">)<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">\t<span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">}<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">)<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\"><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;\/<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">script<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><\/span>\r\n\r\n<span class=\"line\"><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;\/<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">body<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><\/span>\r\n<span class=\"line\"><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;\/<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">html<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><\/span>\r\n<\/code><\/pre>\r\n<\/div>\r\n\r\n<p>To solve this question, the candidate has to refactor the generation of the staffBookings sample data (instead of a random series of names, Alice is the only name that appears) and fix the fact that the display function skips forward a whole month (instead of calendars for June &amp; July, it would generate calendars for June &amp; August).<\/p>\r\n<p>Most likely, to spot the errors, the candidate will need to employ breakpoints and step through the code, because the error only emerges mid-loop.<\/p>\r\n<p>The task is straightforward to debug, but like most debugging efforts, it might take the candidate a little while as they try different lines of inquiry.<\/p>\r\n<p>Remember, it&#8217;s best to test all questions before adding them to make sure it&#8217;s answerable in a reasonable timeframe by those who don&#8217;t know the answer.<\/p>\r\n<\/div><\/div>\r\n<p><strong>Modifying the question for other languages or frameworks<\/strong><\/p>\r\n<p>We can explore or reframe this style of questions in many different ways, frameworks and styles.<\/p>\r\n<p>\u00a0We&#8217;re still looking for something contrived to keep the user&#8217;s setup time down.<\/p>\r\n<p>A real application might swap DateTime for luxon, the string interpolation may be handled by a library, and of course we wouldn&#8217;t be generating a sample JSON structure to work with.<\/p>\r\n<p>(Some very quick examples in Angular and Svelte in the spoiler tags below)<\/p>\r\n\r\n<div class=\"su-spoiler su-spoiler-style-default su-spoiler-icon-plus su-spoiler-closed\" data-scroll-offset=\"0\" data-anchor-in-url=\"no\"><div class=\"su-spoiler-title\" tabindex=\"0\" role=\"button\"><span class=\"su-spoiler-icon\"><\/span>Contrived in Angular.js and Tailwind<\/div><div class=\"su-spoiler-content su-u-clearfix su-u-trim\">\r\n\r\n\r\n\r\n<div class=\"wp-block-kevinbatdorf-code-block-pro cbp-has-line-numbers\" style=\"font-size: .875rem; font-family: Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; --cbp-line-number-color: #EEFFFF; --cbp-line-number-width: calc(3 * 0.6 * .875rem); line-height: 1.25rem; --cbp-tab-width: 2; tab-size: var(--cbp-tab-width, 2);\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\"><span style=\"display: flex; align-items: center; padding: 10px 0px 0 16px; font-size: 0.8em; width: 100%; text-align: left; background-color: #263238; font-style: italic; color: #eeffff;\" data-darkreader-inline-bgcolor=\"\" data-darkreader-inline-color=\"\"><span style=\"border-bottom: 1px solid rgba(238, 255, 255, 0.2);\" data-darkreader-inline-border-bottom=\"\">HTML<\/span><\/span>\r\n<pre class=\"shiki material-theme\" style=\"background-color: #263238;\" tabindex=\"0\" data-darkreader-inline-bgcolor=\"\"><code><span class=\"line\"><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;!<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">DOCTYPE<\/span> <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">html<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><\/span>\r\n<span class=\"line\"><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">html<\/span> <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">lang<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">en<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span> <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">ng-app<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">calendarApp<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><\/span>\r\n<span class=\"line\"><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">head<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><\/span>\r\n<span class=\"line\">\t<span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">meta<\/span> <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">charset<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">UTF-8<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><\/span>\r\n<span class=\"line\">\t<span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">meta<\/span> <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">name<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">viewport<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span> <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">content<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">width=device-width, initial-scale=1.0<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><\/span>\r\n<span class=\"line\">\t<span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">link<\/span> <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">href<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">https:\/\/cdn.jsdelivr.net\/npm\/tailwindcss@2.0.1\/dist\/tailwind.min.css<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span> <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">rel<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">stylesheet<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><\/span>\r\n<span class=\"line\">\t<span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">title<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">Calendar for Karaoke Night - This month and next month<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;\/<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">title<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><\/span>\r\n<span class=\"line\"><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;\/<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">head<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><\/span>\r\n<span class=\"line\"><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">body<\/span> <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">class<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">h-screen bg-gray-100 p-5 box-border<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><\/span>\r\n<span class=\"line\"><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">section<\/span> <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">id<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">calendar<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span> <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">ng-controller<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">CalendarController as ctrl<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><\/span>\r\n<span class=\"line\">\t<span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">h3<\/span> <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">class<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">text-xl font-bold mb-5<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">Karaoke Hosts - this month and next month<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;\/<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">h3<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><\/span>\r\n<span class=\"line\">\t<span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">div<\/span> <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">class<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">calendar-container flex flex-col justify-center items-center w-full max-w-5xl mx-auto<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><\/span>\r\n<span class=\"line\">\t\t<span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">div<\/span> <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">class<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">calendar w-full<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span> <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">id<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">calendar<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><\/span>\r\n<span class=\"line\">\t\t\t<span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">div<\/span> <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">ng-repeat<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">month in ctrl.months<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span> <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">class<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">mb-5<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><\/span>\r\n<span class=\"line\">\t\t\t\t<span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">div<\/span> <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">class<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">month border-2 border-black grid grid-cols-7 gap-px mb-5<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><\/span>\r\n<span class=\"line\">\t\t\t\t\t<span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">div<\/span> <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">class<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">month-header col-span-7 text-center font-bold p-2 bg-gray-300<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><\/span>\r\n<span class=\"line\"><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">\t\t\t\t\t\t{{month.name}}<\/span><\/span>\r\n<span class=\"line\">\t\t\t\t\t<span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;\/<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">div<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><\/span>\r\n<span class=\"line\">\t\t\t\t\t<span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">div<\/span> <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">class<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">day-header font-bold text-center p-2 bg-gray-200<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span> <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">ng-repeat<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">day in ctrl.daysOfWeek<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><\/span>\r\n<span class=\"line\"><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">\t\t\t\t\t\t{{day}}<\/span><\/span>\r\n<span class=\"line\">\t\t\t\t\t<span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;\/<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">div<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><\/span>\r\n<span class=\"line\">\t\t\t\t\t<span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">div<\/span> <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">ng-repeat<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">blank in month.blanks<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span> <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">class<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">day p-2 bg-white<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;&lt;\/<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">div<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><\/span>\r\n<span class=\"line\">\t\t\t\t\t<span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">div<\/span> <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">ng-repeat<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">day in month.days<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span> <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">class<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">day border border-gray-200 bg-white box-border p-2 min-h-[100px] flex flex-col<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><\/span>\r\n<span class=\"line\">\t\t\t\t\t\t<span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">div<\/span> <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">class<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">date-header font-bold mb-2<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">{{day.date}}<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;\/<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">div<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><\/span>\r\n<span class=\"line\">\t\t\t\t\t\t<span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">div<\/span> <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">class<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">staff mb-1<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span> <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">ng-repeat<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">staff in day.staffs<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><\/span>\r\n<span class=\"line\"><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">\t\t\t\t\t\t\t{{staff.staffName}} ({{staff.period}})<\/span><\/span>\r\n<span class=\"line\">\t\t\t\t\t\t<span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;\/<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">div<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><\/span>\r\n<span class=\"line\">\t\t\t\t\t<span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;\/<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">div<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><\/span>\r\n<span class=\"line\">\t\t\t\t<span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;\/<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">div<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><\/span>\r\n<span class=\"line\">\t\t\t<span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;\/<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">div<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><\/span>\r\n<span class=\"line\">\t\t<span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;\/<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">div<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><\/span>\r\n<span class=\"line\">\t<span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;\/<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">div<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><\/span>\r\n<span class=\"line\"><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;\/<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">section<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><\/span>\r\n\r\n<span class=\"line\"><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">script<\/span> <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">src<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">https:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.8.2\/angular.min.js<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;&lt;\/<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">script<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><\/span>\r\n<span class=\"line\"><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">script<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><\/span>\r\n<span class=\"line\">\t<span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">const<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\"> app <\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\"> angular<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">module<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">calendarApp<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\"> [])<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n\r\n<span class=\"line\"><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">\tapp<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">controller<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">CalendarController<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">function<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #eeffff; font-style: italic;\" data-darkreader-inline-color=\"\">$scope<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">)<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{<\/span><\/span>\r\n<span class=\"line\">\t\t<span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">const<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">generateUUID<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">()<\/span> <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">=&gt;<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">replace<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\/[<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">xy<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">]\/<\/span><span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">g<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #eeffff; font-style: italic;\" data-darkreader-inline-color=\"\">c<\/span> <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">=&gt;<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\"> (<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">c<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">===<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">x<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">?<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\"> (<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">Math<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">random<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">() <\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">*<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">16<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">|<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">0<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">) <\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\"> ((<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">Math<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">random<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">() <\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">*<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">16<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">|<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">0<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">) <\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&amp;<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">0x3<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">|<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">0x8<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">))<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">toString<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">16<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">))<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n\r\n<span class=\"line\">\t\t<span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">const<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">loadStaffBookings<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">()<\/span> <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">=&gt;<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{<\/span><\/span>\r\n<span class=\"line\">\t\t\t<span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">const<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">staffNames<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">Array<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">from<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\"> length<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">10<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">},<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">()<\/span> <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">=&gt;<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{<\/span><\/span>\r\n<span class=\"line\">\t\t\t\t<span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">const<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">uuid<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">generateUUID<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">()<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">\t\t\t\t<span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">const<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">names<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\"> [<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">Alice<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">Bob<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">Charlie<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">Diana<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">Eve<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">Frank<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">Grace<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">Heidi<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">Ivan<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">Judy<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">]<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">\t\t\t\t<span style=\"color: #89ddff; font-style: italic;\" data-darkreader-inline-color=\"\">return<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\"> [<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">uuid<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">]<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\"> staffName<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">names<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">shift<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">() <\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">}<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">};<\/span><\/span>\r\n<span class=\"line\">\t\t\t<span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">}<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">)<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">reduce<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #eeffff; font-style: italic;\" data-darkreader-inline-color=\"\">acc<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #eeffff; font-style: italic;\" data-darkreader-inline-color=\"\">curr<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">)<\/span> <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">=&gt;<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\"> (<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">...<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">acc<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">...<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">curr<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">}<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">)<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{}<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">)<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n\r\n<span class=\"line\">\t\t\t<span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">const<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">bookings<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{};<\/span><\/span>\r\n<span class=\"line\">\t\t\t<span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">const<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">today<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">new<\/span> <span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">Date<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">()<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n\r\n<span class=\"line\">\t\t\t<span style=\"color: #89ddff; font-style: italic;\" data-darkreader-inline-color=\"\">for<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\"> (<\/span><span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">let<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">i<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">-<\/span><span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">30<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">i<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;=<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">60<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">i<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">++<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">) <\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{<\/span><\/span>\r\n<span class=\"line\">\t\t\t\t<span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">const<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">date<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">new<\/span> <span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">Date<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">()<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">\t\t\t\t<span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">date<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">setDate<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">today<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">getDate<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">() <\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">+<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">i<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">)<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">\t\t\t\t<span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">const<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">dateString<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">date<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">toISOString<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">()<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">split<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">T<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">)[<\/span><span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">0<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">]<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">\t\t\t\t<span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">bookings<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">[<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">dateString<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">] <\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{};<\/span><\/span>\r\n<span class=\"line\">\t\t\t\t<span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">const<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">periods<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\"> [<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">afternoon<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">evening<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">]<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">\t\t\t\t<span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">const<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">filledPeriods<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">Math<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">random<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">() <\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">0.9<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">?<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">periods<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\"> [<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">periods<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">[<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">Math<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">floor<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">Math<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">random<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">() <\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">*<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">periods<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">length<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">)]]<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n\r\n<span class=\"line\">\t\t\t\t<span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">filledPeriods<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">forEach<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #eeffff; font-style: italic;\" data-darkreader-inline-color=\"\">period<\/span> <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">=&gt;<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{<\/span><\/span>\r\n<span class=\"line\">\t\t\t\t\t<span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">const<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">bookingID<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">generateUUID<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">()<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">\t\t\t\t\t<span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">const<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">staffID<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">Object<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">keys<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">staffNames<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">)[<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">Math<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">floor<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">Math<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">random<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">() <\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">*<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">Object<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">keys<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">staffNames<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">)<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">length<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">)]<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">\t\t\t\t\t<span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">bookings<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">[<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">dateString<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">][<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">bookingID<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">] <\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">staffID<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">period<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\"> staffName<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">staffNames<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">[<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">staffID<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">]<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">staffName<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">};<\/span><\/span>\r\n<span class=\"line\">\t\t\t\t<span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">}<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">)<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">\t\t\t<span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">}<\/span><\/span>\r\n\r\n<span class=\"line\">\t\t\t<span style=\"color: #89ddff; font-style: italic;\" data-darkreader-inline-color=\"\">return<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">bookings<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">\t\t<span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">};<\/span><\/span>\r\n\r\n<span class=\"line\">\t\t<span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">const<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">generateCalendar<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #eeffff; font-style: italic;\" data-darkreader-inline-color=\"\">startDate<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #eeffff; font-style: italic;\" data-darkreader-inline-color=\"\">numMonths<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #eeffff; font-style: italic;\" data-darkreader-inline-color=\"\">staffBookings<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">)<\/span> <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">=&gt;<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{<\/span><\/span>\r\n<span class=\"line\">\t\t\t<span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">const<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">daysOfWeek<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\"> [<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">Monday<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">Tuesday<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">Wednesday<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">Thursday<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">Friday<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">Saturday<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">Sunday<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">]<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">\t\t\t<span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">const<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">months<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\"> []<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">\t\t\t<span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">let<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">currentDate<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">new<\/span> <span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">Date<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">startDate<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">)<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n\r\n<span class=\"line\">\t\t\t<span style=\"color: #89ddff; font-style: italic;\" data-darkreader-inline-color=\"\">for<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\"> (<\/span><span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">let<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">i<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">0<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">i<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">numMonths<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">i<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">++<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">) <\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{<\/span><\/span>\r\n<span class=\"line\">\t\t\t\t<span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">const<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">month<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{<\/span><\/span>\r\n<span class=\"line\"><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">\t\t\t\t\tname<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">`${<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">currentDate<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">toLocaleString<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">default<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{<\/span> <span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">month<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">long<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">}<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">)<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">}<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">${<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">currentDate<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">getFullYear<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">()<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">}`<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span><\/span>\r\n<span class=\"line\"><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">\t\t\t\t\tblanks<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\"> []<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span><\/span>\r\n<span class=\"line\"><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">\t\t\t\t\tdays<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\"> []<\/span><\/span>\r\n<span class=\"line\">\t\t\t\t<span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">};<\/span><\/span>\r\n\r\n<span class=\"line\">\t\t\t\t<span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">const<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">monthStart<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">new<\/span> <span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">Date<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">currentDate<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">getFullYear<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">()<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">currentDate<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">getMonth<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">()<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">1<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">)<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">\t\t\t\t<span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">const<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">monthEnd<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">new<\/span> <span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">Date<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">currentDate<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">getFullYear<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">()<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">currentDate<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">getMonth<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">() <\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">+<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">1<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">0<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">)<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n\r\n<span class=\"line\">\t\t\t\t<span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">let<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">startDay<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">monthStart<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">getDay<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">()<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">\t\t\t\t<span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">startDay<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">startDay<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">===<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">0<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">?<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">6<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">startDay<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">-<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">1<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n\r\n<span class=\"line\">\t\t\t\t<span style=\"color: #89ddff; font-style: italic;\" data-darkreader-inline-color=\"\">for<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\"> (<\/span><span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">let<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">blank<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">0<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">blank<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">startDay<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">blank<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">++<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">) <\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{<\/span><\/span>\r\n<span class=\"line\">\t\t\t\t\t<span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">month<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">blanks<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">push<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{}<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">)<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">\t\t\t\t<span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">}<\/span><\/span>\r\n\r\n<span class=\"line\">\t\t\t\t<span style=\"color: #89ddff; font-style: italic;\" data-darkreader-inline-color=\"\">for<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\"> (<\/span><span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">let<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">day<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">1<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">day<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;=<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">monthEnd<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">getDate<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">()<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">day<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">++<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">) <\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{<\/span><\/span>\r\n<span class=\"line\">\t\t\t\t\t<span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">const<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">dateString<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">new<\/span> <span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">Date<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">currentDate<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">getFullYear<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">()<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">currentDate<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">getMonth<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">()<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">day<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">)<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">toISOString<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">()<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">split<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">T<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">)[<\/span><span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">0<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">]<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">\t\t\t\t\t<span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">const<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">staffs<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">staffBookings<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">[<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">dateString<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">] <\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">?<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">Object<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">values<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">staffBookings<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">[<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">dateString<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">]) <\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\"> []<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">\t\t\t\t\t<span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">month<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">days<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">push<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\"> date<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">day<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">staffs<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">}<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">)<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">\t\t\t\t\t<span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">currentDate<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">setDate<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">currentDate<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">getDate<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">() <\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">+<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">1<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">)<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">\t\t\t\t<span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">}<\/span><\/span>\r\n\r\n<span class=\"line\">\t\t\t\t<span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">months<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">push<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">month<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">)<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">\t\t\t\t<span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">currentDate<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">setMonth<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">currentDate<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">getMonth<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">() <\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">+<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">1<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">)<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">\t\t\t\t<span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">currentDate<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">setDate<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">1<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">)<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">\t\t\t<span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">}<\/span><\/span>\r\n\r\n<span class=\"line\">\t\t\t<span style=\"color: #89ddff; font-style: italic;\" data-darkreader-inline-color=\"\">return<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">daysOfWeek<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">months<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">};<\/span><\/span>\r\n<span class=\"line\">\t\t<span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">};<\/span><\/span>\r\n\r\n<span class=\"line\">\t\t<span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">$scope<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">ctrl<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{};<\/span><\/span>\r\n\r\n<span class=\"line\">\t\t<span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">$scope<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">ctrl<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">daysOfWeek<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\"> [<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">Monday<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">Tuesday<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">Wednesday<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">Thursday<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">Friday<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">Saturday<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">Sunday<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">]<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">\t\t<span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">$scope<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">ctrl<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">months<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">generateCalendar<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">new<\/span> <span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">Date<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">()<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">2<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">loadStaffBookings<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">())<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">months<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">\t<span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">}<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">)<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\"><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;\/<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">script<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><\/span>\r\n\r\n<span class=\"line\"><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;\/<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">body<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><\/span>\r\n<span class=\"line\"><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;\/<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">html<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><\/span>\r\n<\/code><\/pre>\r\n<\/div>\r\n\r\n\r\n\r\n<\/div><\/div><div class=\"su-spoiler su-spoiler-style-default su-spoiler-icon-plus su-spoiler-closed\" data-scroll-offset=\"0\" data-anchor-in-url=\"no\"><div class=\"su-spoiler-title\" tabindex=\"0\" role=\"button\"><span class=\"su-spoiler-icon\"><\/span>Contrived in svelte<\/div><div class=\"su-spoiler-content su-u-clearfix su-u-trim\">App.svelte<\/p>\r\n\r\n\r\n\r\n<div class=\"wp-block-kevinbatdorf-code-block-pro cbp-has-line-numbers\" style=\"font-size: .875rem; font-family: Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; --cbp-line-number-color: #EEFFFF; --cbp-line-number-width: calc(2 * 0.6 * .875rem); line-height: 1.25rem; --cbp-tab-width: 2; tab-size: var(--cbp-tab-width, 2);\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\"><span style=\"display: flex; align-items: center; padding: 10px 0px 0 16px; font-size: 0.8em; width: 100%; text-align: left; background-color: #263238; font-style: italic; color: #eeffff;\" data-darkreader-inline-bgcolor=\"\" data-darkreader-inline-color=\"\"><span style=\"border-bottom: 1px solid rgba(238, 255, 255, 0.2);\" data-darkreader-inline-border-bottom=\"\">Svelte<\/span><\/span>\r\n<pre class=\"shiki material-theme\" style=\"background-color: #263238;\" tabindex=\"0\" data-darkreader-inline-bgcolor=\"\"><code><span class=\"line\"><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">script<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><\/span>\r\n<span class=\"line\">  <span style=\"color: #89ddff; font-style: italic;\" data-darkreader-inline-color=\"\">import<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\"> Calendar <\/span><span style=\"color: #89ddff; font-style: italic;\" data-darkreader-inline-color=\"\">from<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">.\/Calendar.svelte<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\"><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;\/<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">script<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><\/span>\r\n\r\n<span class=\"line\"><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">main<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><\/span>\r\n<span class=\"line\">  <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;<\/span><span style=\"color: #ffcb6b;\" data-darkreader-inline-color=\"\">Calendar<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\"> \/&gt;<\/span><\/span>\r\n<span class=\"line\"><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;\/<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">main<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><\/span>\r\n\r\n<span class=\"line\"><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">style<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><\/span>\r\n<span class=\"line\">  <span style=\"color: #ffcb6b;\" data-darkreader-inline-color=\"\">main<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{<\/span><\/span>\r\n<span class=\"line\">    <span style=\"color: #b2ccd6;\" data-darkreader-inline-color=\"\">padding<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">1rem<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">    <span style=\"color: #b2ccd6;\" data-darkreader-inline-color=\"\">font-family<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\"> Arial<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\"> sans-serif<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">  <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">}<\/span><\/span>\r\n<span class=\"line\"><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;\/<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">style<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><\/span>\r\n<\/code><\/pre>\r\n<\/div>\r\n\r\n\r\n\r\n<p>Calendar.svelte<\/p>\r\n\r\n\r\n\r\n<div class=\"wp-block-kevinbatdorf-code-block-pro cbp-has-line-numbers\" style=\"font-size: .875rem; font-family: Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; --cbp-line-number-color: #EEFFFF; --cbp-line-number-width: calc(3 * 0.6 * .875rem); line-height: 1.25rem; --cbp-tab-width: 2; tab-size: var(--cbp-tab-width, 2);\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\"><span style=\"display: flex; align-items: center; padding: 10px 0px 0 16px; font-size: 0.8em; width: 100%; text-align: left; background-color: #263238; font-style: italic; color: #eeffff;\" data-darkreader-inline-bgcolor=\"\" data-darkreader-inline-color=\"\"><span style=\"border-bottom: 1px solid rgba(238, 255, 255, 0.2);\" data-darkreader-inline-border-bottom=\"\">Svelte<\/span><\/span>\r\n<pre class=\"shiki material-theme\" style=\"background-color: #263238;\" tabindex=\"0\" data-darkreader-inline-bgcolor=\"\"><code><span class=\"line\"><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">script<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><\/span>\r\n<span class=\"line\">  <span style=\"color: #89ddff; font-style: italic;\" data-darkreader-inline-color=\"\">import<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">onMount<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">}<\/span> <span style=\"color: #89ddff; font-style: italic;\" data-darkreader-inline-color=\"\">from<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">svelte<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n\r\n<span class=\"line\">  <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">let<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\"> staffBookings <\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{};<\/span><\/span>\r\n\r\n<span class=\"line\">  <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">const<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\"> generateUUID <\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">()<\/span> <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">=&gt;<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">replace<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\/[<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">xy<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">]\/<\/span><span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">g<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #eeffff; font-style: italic;\" data-darkreader-inline-color=\"\">c<\/span> <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">=&gt;<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\"> (c <\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">===<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">x<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">?<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\"> (Math<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">random<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">() <\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">*<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">16<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">|<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">0<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">) <\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\"> ((Math<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">random<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">() <\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">*<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">16<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">|<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">0<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">) <\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&amp;<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">0x3<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">|<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">0x8<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">))<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">toString<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">16<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">))<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n\r\n<span class=\"line\">  <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">function<\/span> <span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">loadStaffBookings<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">()<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{<\/span><\/span>\r\n<span class=\"line\">    <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">const<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">names<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\"> [<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">Alice<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">Bob<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">Charlie<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">Diana<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">Eve<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">Frank<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">Grace<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">Heidi<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">Ivan<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">Judy<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">]<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">    <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">const<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">staffNames<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">names<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">reduce<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #eeffff; font-style: italic;\" data-darkreader-inline-color=\"\">acc<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #eeffff; font-style: italic;\" data-darkreader-inline-color=\"\">name<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">)<\/span> <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">=&gt;<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{<\/span><\/span>\r\n<span class=\"line\">      <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">const<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">uuid<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">generateUUID<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">()<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">      <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">acc<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">[<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">uuid<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">] <\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\"> staffName<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">name<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">};<\/span><\/span>\r\n<span class=\"line\">      <span style=\"color: #89ddff; font-style: italic;\" data-darkreader-inline-color=\"\">return<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">acc<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">    <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">},<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{}<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">)<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n\r\n<span class=\"line\">    <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">const<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">bookings<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{};<\/span><\/span>\r\n<span class=\"line\">    <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">const<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">today<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">new<\/span> <span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">Date<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">()<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n\r\n<span class=\"line\">    <span style=\"color: #89ddff; font-style: italic;\" data-darkreader-inline-color=\"\">for<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\"> (<\/span><span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">let<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">i<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">-<\/span><span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">30<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">i<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;=<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">60<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">i<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">++<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">) <\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{<\/span><\/span>\r\n<span class=\"line\">      <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">const<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">date<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">new<\/span> <span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">Date<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">()<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">      <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">date<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">setDate<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">today<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">getDate<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">() <\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">+<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">i<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">)<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">      <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">const<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">dateString<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">date<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">toISOString<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">()<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">split<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">T<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">)[<\/span><span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">0<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">]<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">      <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">bookings<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">[<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">dateString<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">] <\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{};<\/span><\/span>\r\n<span class=\"line\">      <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">const<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">periods<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\"> [<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">afternoon<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">evening<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">]<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">      <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">const<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">filledPeriods<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">Math<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">random<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">() <\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">0.9<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">?<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">periods<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\"> [<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">periods<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">[<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">Math<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">floor<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">Math<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">random<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">() <\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">*<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">periods<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">length<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">)]]<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n\r\n<span class=\"line\">      <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">filledPeriods<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">forEach<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #eeffff; font-style: italic;\" data-darkreader-inline-color=\"\">period<\/span> <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">=&gt;<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{<\/span><\/span>\r\n<span class=\"line\">        <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">const<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">bookingID<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">generateUUID<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">()<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">        <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">const<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">staffID<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">Object<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">keys<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">staffNames<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">)[<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">Math<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">floor<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">Math<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">random<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">() <\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">*<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">Object<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">keys<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">staffNames<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">)<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">length<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">)]<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">        <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">bookings<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">[<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">dateString<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">][<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">bookingID<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">] <\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">staffID<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">period<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\"> staffName<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">staffNames<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">[<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">staffID<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">]<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">staffName<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">};<\/span><\/span>\r\n<span class=\"line\">      <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">}<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">)<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">    <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">}<\/span><\/span>\r\n\r\n<span class=\"line\">    <span style=\"color: #89ddff; font-style: italic;\" data-darkreader-inline-color=\"\">return<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">bookings<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">  <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">}<\/span><\/span>\r\n\r\n<span class=\"line\">  <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">function<\/span> <span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">generateCalendar<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #eeffff; font-style: italic;\" data-darkreader-inline-color=\"\">startDate<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #eeffff; font-style: italic;\" data-darkreader-inline-color=\"\">numMonths<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #eeffff; font-style: italic;\" data-darkreader-inline-color=\"\">staffBookings<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">)<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{<\/span><\/span>\r\n<span class=\"line\">    <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">const<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">daysOfWeek<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\"> [<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">Monday<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">Tuesday<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">Wednesday<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">Thursday<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">Friday<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">Saturday<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">Sunday<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">]<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">    <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">const<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">months<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\"> []<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">    <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">let<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">currentDate<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">new<\/span> <span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">Date<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">startDate<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">)<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n\r\n<span class=\"line\">    <span style=\"color: #89ddff; font-style: italic;\" data-darkreader-inline-color=\"\">for<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\"> (<\/span><span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">let<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">i<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">0<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">i<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">numMonths<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">i<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">++<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">) <\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{<\/span><\/span>\r\n<span class=\"line\">      <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">const<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">month<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{<\/span><\/span>\r\n<span class=\"line\"><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">        name<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">`${<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">currentDate<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">toLocaleString<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">default<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{<\/span> <span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">month<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">long<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">}<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">)<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">}<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">${<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">currentDate<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">getFullYear<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">()<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">}`<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span><\/span>\r\n<span class=\"line\"><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">        blanks<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\"> []<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span><\/span>\r\n<span class=\"line\"><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">        days<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\"> []<\/span><\/span>\r\n<span class=\"line\">      <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">};<\/span><\/span>\r\n\r\n<span class=\"line\">      <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">const<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">monthStart<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">new<\/span> <span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">Date<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">currentDate<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">getFullYear<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">()<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">currentDate<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">getMonth<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">()<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">1<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">)<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">      <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">const<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">monthEnd<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">new<\/span> <span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">Date<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">currentDate<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">getFullYear<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">()<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">currentDate<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">getMonth<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">() <\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">+<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">1<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">0<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">)<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n\r\n<span class=\"line\">      <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">let<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">startDay<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">monthStart<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">getDay<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">()<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">      <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">startDay<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">startDay<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">===<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">0<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">?<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">6<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">startDay<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">-<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">1<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n\r\n<span class=\"line\">      <span style=\"color: #89ddff; font-style: italic;\" data-darkreader-inline-color=\"\">for<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\"> (<\/span><span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">let<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">blank<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">0<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">blank<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">startDay<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">blank<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">++<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">) <\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{<\/span><\/span>\r\n<span class=\"line\">        <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">month<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">blanks<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">push<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{}<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">)<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">      <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">}<\/span><\/span>\r\n\r\n<span class=\"line\">      <span style=\"color: #89ddff; font-style: italic;\" data-darkreader-inline-color=\"\">for<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\"> (<\/span><span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">let<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">day<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">1<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">day<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;=<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">monthEnd<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">getDate<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">()<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">day<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">++<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">) <\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{<\/span><\/span>\r\n<span class=\"line\">        <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">const<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">dateString<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">new<\/span> <span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">Date<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">currentDate<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">getFullYear<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">()<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">currentDate<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">getMonth<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">()<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">day<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">)<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">toISOString<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">()<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">split<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">T<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">'<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">)[<\/span><span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">0<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">]<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">        <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">const<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">staffs<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">staffBookings<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">[<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">dateString<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">] <\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">?<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">Object<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">values<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">staffBookings<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">[<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">dateString<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">]) <\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\"> []<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">        <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">month<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">days<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">push<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\"> date<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">day<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">staffs<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">}<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">)<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">        <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">currentDate<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">setDate<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">currentDate<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">getDate<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">() <\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">+<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">1<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">)<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">      <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">}<\/span><\/span>\r\n\r\n<span class=\"line\">      <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">months<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">push<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">month<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">)<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">      <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">currentDate<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">setMonth<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">currentDate<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">getMonth<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">() <\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">+<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">1<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">)<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">      <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">currentDate<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">setDate<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">1<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">)<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">    <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">}<\/span><\/span>\r\n\r\n<span class=\"line\">    <span style=\"color: #89ddff; font-style: italic;\" data-darkreader-inline-color=\"\">return<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">daysOfWeek<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">months<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">};<\/span><\/span>\r\n<span class=\"line\">  <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">}<\/span><\/span>\r\n\r\n<span class=\"line\">  <span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">onMount<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">()<\/span> <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">=&gt;<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{<\/span><\/span>\r\n<span class=\"line\">    <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">staffBookings<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">loadStaffBookings<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">()<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">    <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">const<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">today<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">new<\/span> <span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">Date<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">()<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">    <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">calendarData<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">generateCalendar<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">today<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">2<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">staffBookings<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">)<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n<span class=\"line\">  <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">}<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">)<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span><\/span>\r\n\r\n<span class=\"line\">  <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">let<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\"> calendarData <\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{<\/span> <span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">daysOfWeek<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\"> []<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">months<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\"> [] <\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">};<\/span><\/span>\r\n<span class=\"line\"><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;\/<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">script<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><\/span>\r\n\r\n<span class=\"line\"><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">section<\/span> <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">id<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">calendar<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><\/span>\r\n<span class=\"line\">  <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">h3<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">Karaoke Hosts - this month and next month<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;\/<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">h3<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><\/span>\r\n<span class=\"line\">  <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">div<\/span> <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">class<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">calendar-container d-flex flex-column justify-content-center align-items-center w-100 max-w-5xl mx-auto<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><\/span>\r\n<span class=\"line\">    <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{#<\/span><span style=\"color: #89ddff; font-style: italic;\" data-darkreader-inline-color=\"\">each<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\"> calendarData<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">months <\/span><span style=\"color: #89ddff; font-style: italic;\" data-darkreader-inline-color=\"\">as<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\"> month<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">}<\/span><\/span>\r\n<span class=\"line\">      <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">div<\/span> <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">class<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">calendar w-100 mb-5<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><\/span>\r\n<span class=\"line\">        <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">div<\/span> <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">class<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">month border border-dark d-grid gap-1 mb-5<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><\/span>\r\n<span class=\"line\">          <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">div<\/span> <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">class<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">month-header col-span-7 text-center font-weight-bold p-2 bg-light<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><\/span>\r\n<span class=\"line\">            <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">month<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">name<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">}<\/span><\/span>\r\n<span class=\"line\">          <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;\/<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">div<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><\/span>\r\n<span class=\"line\">          <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{#<\/span><span style=\"color: #89ddff; font-style: italic;\" data-darkreader-inline-color=\"\">each<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\"> calendarData<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">daysOfWeek <\/span><span style=\"color: #89ddff; font-style: italic;\" data-darkreader-inline-color=\"\">as<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\"> day<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">}<\/span><\/span>\r\n<span class=\"line\">            <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">div<\/span> <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">class<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">day-header font-weight-bold text-center p-2 bg-light<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><\/span>\r\n<span class=\"line\">              <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">day<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">}<\/span><\/span>\r\n<span class=\"line\">            <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;\/<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">div<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><\/span>\r\n<span class=\"line\">          <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{\/<\/span><span style=\"color: #89ddff; font-style: italic;\" data-darkreader-inline-color=\"\">each<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">}<\/span><\/span>\r\n<span class=\"line\">          <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{#<\/span><span style=\"color: #89ddff; font-style: italic;\" data-darkreader-inline-color=\"\">each<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\"> month<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">blanks <\/span><span style=\"color: #89ddff; font-style: italic;\" data-darkreader-inline-color=\"\">as<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\"> blank<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">}<\/span><\/span>\r\n<span class=\"line\">            <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">div<\/span> <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">class<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">day p-2 bg-white<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;&lt;\/<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">div<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><\/span>\r\n<span class=\"line\">          <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{\/<\/span><span style=\"color: #89ddff; font-style: italic;\" data-darkreader-inline-color=\"\">each<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">}<\/span><\/span>\r\n<span class=\"line\">          <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{#<\/span><span style=\"color: #89ddff; font-style: italic;\" data-darkreader-inline-color=\"\">each<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\"> month<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">days <\/span><span style=\"color: #89ddff; font-style: italic;\" data-darkreader-inline-color=\"\">as<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\"> day<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">}<\/span><\/span>\r\n<span class=\"line\">            <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">div<\/span> <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">class<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">day border border-light bg-white box-border p-2 d-flex flex-column<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><\/span>\r\n<span class=\"line\">              <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">div<\/span> <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">class<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">date-header font-weight-bold mb-2<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;{<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">day<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">date<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">}&lt;\/<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">div<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><\/span>\r\n<span class=\"line\">              <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{#<\/span><span style=\"color: #89ddff; font-style: italic;\" data-darkreader-inline-color=\"\">each<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\"> day<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">staffs <\/span><span style=\"color: #89ddff; font-style: italic;\" data-darkreader-inline-color=\"\">as<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\"> staff<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">}<\/span><\/span>\r\n<span class=\"line\">                <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">div<\/span> <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">class<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">staff mb-1<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><\/span>\r\n<span class=\"line\">                  <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">staff<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">staffName<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">}<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\"> (<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">staff<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">period<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">}<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">)<\/span><\/span>\r\n<span class=\"line\">                <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;\/<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">div<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><\/span>\r\n<span class=\"line\">              <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{\/<\/span><span style=\"color: #89ddff; font-style: italic;\" data-darkreader-inline-color=\"\">each<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">}<\/span><\/span>\r\n<span class=\"line\">            <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;\/<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">div<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><\/span>\r\n<span class=\"line\">          <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{\/<\/span><span style=\"color: #89ddff; font-style: italic;\" data-darkreader-inline-color=\"\">each<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">}<\/span><\/span>\r\n<span class=\"line\">        <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;\/<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">div<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><\/span>\r\n<span class=\"line\">      <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;\/<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">div<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><\/span>\r\n<span class=\"line\">    <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{\/<\/span><span style=\"color: #89ddff; font-style: italic;\" data-darkreader-inline-color=\"\">each<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">}<\/span><\/span>\r\n<span class=\"line\">  <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;\/<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">div<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><\/span>\r\n<span class=\"line\"><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;\/<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">section<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><\/span>\r\n\r\n<span class=\"line\"><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">style<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><\/span>\r\n<span class=\"line\">  <span style=\"color: #ffcb6b;\" data-darkreader-inline-color=\"\">body<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{<\/span> <span style=\"color: #b2ccd6;\" data-darkreader-inline-color=\"\">height<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">100vh<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #b2ccd6;\" data-darkreader-inline-color=\"\">background-color<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">#<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">f0f0f0<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #b2ccd6;\" data-darkreader-inline-color=\"\">padding<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">20px<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #b2ccd6;\" data-darkreader-inline-color=\"\">box-sizing<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\"> border-box<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">}<\/span><\/span>\r\n<span class=\"line\">  <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #ffcb6b;\" data-darkreader-inline-color=\"\">calendar-container<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{<\/span> <span style=\"color: #b2ccd6;\" data-darkreader-inline-color=\"\">display<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\"> flex<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #b2ccd6;\" data-darkreader-inline-color=\"\">flex-direction<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\"> column<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #b2ccd6;\" data-darkreader-inline-color=\"\">justify-content<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\"> center<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #b2ccd6;\" data-darkreader-inline-color=\"\">align-items<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\"> center<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #b2ccd6;\" data-darkreader-inline-color=\"\">width<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">100%<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #b2ccd6;\" data-darkreader-inline-color=\"\">max-width<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">1200px<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #b2ccd6;\" data-darkreader-inline-color=\"\">margin<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">0<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\"> auto<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">}<\/span><\/span>\r\n<span class=\"line\">  <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #ffcb6b;\" data-darkreader-inline-color=\"\">calendar<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{<\/span> <span style=\"color: #b2ccd6;\" data-darkreader-inline-color=\"\">width<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">100%<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">}<\/span><\/span>\r\n<span class=\"line\">  <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #ffcb6b;\" data-darkreader-inline-color=\"\">month<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{<\/span> <span style=\"color: #b2ccd6;\" data-darkreader-inline-color=\"\">display<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\"> grid<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #b2ccd6;\" data-darkreader-inline-color=\"\">grid-template-columns<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span> <span style=\"color: #82aaff;\" data-darkreader-inline-color=\"\">repeat<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">(<\/span><span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">7<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">,<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">1fr<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">);<\/span> <span style=\"color: #b2ccd6;\" data-darkreader-inline-color=\"\">gap<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">1px<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #b2ccd6;\" data-darkreader-inline-color=\"\">border<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">2px<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\"> solid <\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">#<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">000<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #b2ccd6;\" data-darkreader-inline-color=\"\">margin-bottom<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">20px<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">}<\/span><\/span>\r\n<span class=\"line\">  <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #ffcb6b;\" data-darkreader-inline-color=\"\">month-header<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{<\/span> <span style=\"color: #b2ccd6;\" data-darkreader-inline-color=\"\">grid-column<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\"> span <\/span><span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">7<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #b2ccd6;\" data-darkreader-inline-color=\"\">text-align<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\"> center<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #b2ccd6;\" data-darkreader-inline-color=\"\">font-weight<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\"> bold<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #b2ccd6;\" data-darkreader-inline-color=\"\">padding<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">10px<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #b2ccd6;\" data-darkreader-inline-color=\"\">background-color<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">#<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">ddd<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">}<\/span><\/span>\r\n<span class=\"line\">  <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #ffcb6b;\" data-darkreader-inline-color=\"\">day-header<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{<\/span> <span style=\"color: #b2ccd6;\" data-darkreader-inline-color=\"\">font-weight<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\"> bold<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #b2ccd6;\" data-darkreader-inline-color=\"\">text-align<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\"> center<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #b2ccd6;\" data-darkreader-inline-color=\"\">padding<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">10px<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #b2ccd6;\" data-darkreader-inline-color=\"\">background-color<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">#<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">eee<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">}<\/span><\/span>\r\n<span class=\"line\">  <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #ffcb6b;\" data-darkreader-inline-color=\"\">day<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{<\/span> <span style=\"color: #b2ccd6;\" data-darkreader-inline-color=\"\">border<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">1px<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\"> solid <\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">#<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">ddd<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #b2ccd6;\" data-darkreader-inline-color=\"\">background-color<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">#<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">fff<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #b2ccd6;\" data-darkreader-inline-color=\"\">box-sizing<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\"> border-box<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #b2ccd6;\" data-darkreader-inline-color=\"\">padding<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">8px<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #b2ccd6;\" data-darkreader-inline-color=\"\">min-height<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">100px<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #b2ccd6;\" data-darkreader-inline-color=\"\">display<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\"> flex<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #b2ccd6;\" data-darkreader-inline-color=\"\">flex-direction<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\"> column<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">}<\/span><\/span>\r\n<span class=\"line\">  <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #ffcb6b;\" data-darkreader-inline-color=\"\">date-header<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{<\/span> <span style=\"color: #b2ccd6;\" data-darkreader-inline-color=\"\">font-weight<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\"> bold<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #b2ccd6;\" data-darkreader-inline-color=\"\">margin-bottom<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">8px<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">}<\/span><\/span>\r\n<span class=\"line\">  <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">.<\/span><span style=\"color: #ffcb6b;\" data-darkreader-inline-color=\"\">staff<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">{<\/span> <span style=\"color: #b2ccd6;\" data-darkreader-inline-color=\"\">margin-bottom<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">:<\/span> <span style=\"color: #f78c6c;\" data-darkreader-inline-color=\"\">4px<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">;<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">}<\/span><\/span>\r\n<span class=\"line\"><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;\/<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">style<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><\/span>\r\n<\/code><\/pre>\r\n<\/div>\r\n\r\n\r\n\r\n<\/div><\/div>\r\n\r\n<p>While we can introduce framework specific issues to compound the complexity of the problem, we have a goal to constrain realistic time spent to less than forty minutes on this question.<\/p>\r\n<p>Good questions are about fundamental debugging skills, and expressible in many ways.<\/p>\r\n<p>Using naive and un-optimized code within our questions provide excellent launching points for deeper conversations and candidate insight.<\/p>\r\n<div class=\"su-spoiler su-spoiler-style-default su-spoiler-icon-plus su-spoiler-closed\" data-scroll-offset=\"0\" data-anchor-in-url=\"no\"><div class=\"su-spoiler-title\" tabindex=\"0\" role=\"button\"><span class=\"su-spoiler-icon\"><\/span>WHY DID WE CALL THE EXAMPLE KARAOKE HOSTS? (click)<\/div><div class=\"su-spoiler-content su-u-clearfix su-u-trim\">\r\n<p>Once we start asking questions that look like work, we want to make it clear it&#8217;s a contrived example. A little bit of whimsy (Karaoke Host Night) and a bit of futility (time periods instead of a useful measurement like hours) makes it clear for the candidate that nothing being debugged or written is useful to the organization.<\/p>\r\n<p>We talk a bit more in our troubleshooting section about why this can be important.<\/p>\r\n<\/div><\/div>\r\n<div class=\"su-spoiler su-spoiler-style-default su-spoiler-icon-plus su-spoiler-closed\" data-scroll-offset=\"0\" data-anchor-in-url=\"no\"><div class=\"su-spoiler-title\" tabindex=\"0\" role=\"button\"><span class=\"su-spoiler-icon\"><\/span>WHAT CAUSES THE MONTH TO JUMP? (click)<\/div><div class=\"su-spoiler-content su-u-clearfix su-u-trim\">\r\n<p>Line 136 causes the month to advance at the end of each step in the outer loop, however, the date has already been ticking forward in the interior loop.<\/p>\r\n<p>Simply disabling the outer loop&#8217;s advancement of the month is sufficient.<\/p>\r\n<\/div><\/div>\r\n\r\n<h3 class=\"wp-block-heading\">Incorporating AI tasks into the testing process<\/h3>\r\n\r\n<p>For organizations that include the use of AI tools to generate code for their projects as a core function of how they operate, it can be useful to directly test a candidate&#8217;s ability to operate with AI generated code.<br \/><br \/><br \/><\/p>\r\n<p>Here&#8217;s a solvable task that will cause some LLM models to loop through a series of bad results, requiring human intervention.<\/p>\r\n<p>&nbsp;<\/p>\r\n<p style=\"padding-left: 40px;\"><strong>Question D <\/strong>(<em>1st alternative<\/em>)<strong>:<\/strong><\/p>\r\n<p style=\"padding-left: 40px;\">Suppose you have a snippet of HTML that is defined by an application not operated by your organization. You have permission to only adjust the contents of style=&#8221;&#8221; attribute.<br \/><br \/>Adjust the given prompt so that Copilot will reliably produce a correct answer, even if unprompted with other data on a fresh session. Copilot must not introduce new tags of any kind and correctly return a properly styled table that meets the defined requirements of the original prompt. <br \/><br \/>Optionally, ensure the prompt also produces a visually pleasing set of style attributes in screen sizes above and below 800px;<\/p>\r\n<p>&nbsp;<\/p>\r\n\r\n<div class=\"wp-block-kevinbatdorf-code-block-pro cbp-has-line-numbers\" style=\"font-size: .875rem; font-family: Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; --cbp-line-number-color: #EEFFFF; --cbp-line-number-width: calc(2 * 0.6 * .875rem); line-height: 1.25rem; --cbp-tab-width: 2; tab-size: var(--cbp-tab-width, 2);\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\"><span style=\"display: flex; align-items: center; padding: 10px 0px 0 16px; font-size: 0.8em; width: 100%; text-align: left; background-color: #263238; font-style: italic; color: #eeffff;\" data-darkreader-inline-bgcolor=\"\" data-darkreader-inline-color=\"\"><span style=\"border-bottom: 1px solid rgba(238, 255, 255, 0.2);\" data-darkreader-inline-border-bottom=\"\">HTML<\/span><\/span>\r\n<pre class=\"shiki material-theme\" style=\"background-color: #263238;\" tabindex=\"0\" data-darkreader-inline-bgcolor=\"\"><code><span class=\"line\"><span style=\"color: #546e7a; font-style: italic;\" data-darkreader-inline-color=\"\">&lt;!--<\/span><\/span>\r\n<span class=\"line\"><span style=\"color: #546e7a; font-style: italic;\" data-darkreader-inline-color=\"\">PROMPT: <\/span><\/span>\r\n\r\n<span class=\"line\"><span style=\"color: #546e7a; font-style: italic;\" data-darkreader-inline-color=\"\">Cause this table with inline styles to hide the center column and place the two cells stacked vertically at screen sizes smaller than 760 pixels wide. No new tags of any kind can be introduced and existing tags cannot be renamed.<\/span><\/span>\r\n\r\n<span class=\"line\"><span style=\"color: #546e7a; font-style: italic;\" data-darkreader-inline-color=\"\">--&gt;<\/span><\/span>\r\n\r\n<span class=\"line\"><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">div<\/span> <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">style<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">width: 800px;<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><\/span>\r\n<span class=\"line\"><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">table<\/span> <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">style<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">border-collapse: collapse; width: 100%;<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">tbody<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">tr<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span> <\/span>\r\n\r\n<span class=\"line\"><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">td<\/span> <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">style<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">width: 50;<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">An arbitrarily long series of words about text<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;\/<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">td<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span> <\/span>\r\n<span class=\"line\"><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">td<\/span> <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">style<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"\"<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;\/<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">td<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span> <\/span>\r\n<span class=\"line\"><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">td<\/span> <span style=\"color: #c792ea;\" data-darkreader-inline-color=\"\">style<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">=<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #c3e88d;\" data-darkreader-inline-color=\"\">width: 50%;<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">\"<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><span style=\"color: #eeffff;\" data-darkreader-inline-color=\"\">And other criteria that can exist without complication.<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;\/<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">td<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><\/span>\r\n\r\n<span class=\"line\"><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;\/<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">tr<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;\/<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">tbody<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span> <span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;\/<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">table<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><\/span>\r\n<span class=\"line\"><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&lt;\/<\/span><span style=\"color: #f07178;\" data-darkreader-inline-color=\"\">div<\/span><span style=\"color: #89ddff;\" data-darkreader-inline-color=\"\">&gt;<\/span><\/span>\r\n<\/code><\/pre>\r\n<\/div>\r\n\r\n<p><br \/>Each task should have some complicating factor that frustrates an LLM&#8217;s naive approach and requires the user to critically think about what they are designing and trying to do when they write their prompt. <br \/><br \/>In the above example, that wrinkle is the restriction on new tags.\u00a0 It&#8217;s a quick solution (an experienced front-end developer has many tools to resolve this without javascript or media queries). <br \/><br \/>This type of exercise can be expanded to other tasks, such as &#8220;adjust this prompt so that, given an arbitrary database definition (sample included below), copilot will generate a class with a complete set of filter methods for every field that will only allow permitted values.&#8221;<br \/><br \/>In the database example, the wrinkle we could introduce is a JSON field that is described in a way that the LLM does not understand.<br \/><br \/>A lack of expertise here will become especially informative when the prompt is, subtly, asking for the wrong thing and the user does not know how to describe what is they are trying to achieve. <br \/><br \/>By asking a question in this style from a domain outside of a user&#8217;s expertise, the question will also give us an assessment of the candidate&#8217;s ability not just to use LLM models, but to learn on their own and critically evaluate their output.<br \/><br \/><br \/><\/p>\r\n\r\n<h3 class=\"wp-block-heading\">Producing a stronger gradient of results<\/h3>\r\n\r\n<p>Sharp-eyed readers will have noticed Question D (the calendar question prior to the AI Prompt writing question) has more shortcomings than just the listed bugs.<\/p>\r\n<p><strong>When developing the final advanced questions (Question E), remember to seed them with other issues that will not appear on a cursory inspection or test run.<\/strong><\/p>\r\n<p>&nbsp;<\/p>\r\n<div class=\"su-box su-box-style-default\" id=\"\" style=\"border-color:#000000;border-radius:3px;\"><div class=\"su-box-title\" style=\"background-color:#333333;color:#FFFFFF;border-top-left-radius:1px;border-top-right-radius:1px\">SIDEBAR: A final question<\/div><div class=\"su-box-content su-u-clearfix su-u-trim\" style=\"border-bottom-left-radius:1px;border-bottom-right-radius:1px\">\r\n<p><strong>Question E)<\/strong><\/p>\r\n<p style=\"padding-left: 40px;\">Once you have fixed the identified the bugs, <em>identify any remaining bugs<\/em> or edge cases, and offer some thoughts about the coding techniques and styles that made the original bug challenging to spot and whether there are other changes you would make to improve the legibility of the code.<\/p>\r\n<div class=\"su-spoiler su-spoiler-style-default su-spoiler-icon-plus su-spoiler-closed\" data-scroll-offset=\"0\" data-anchor-in-url=\"no\"><div class=\"su-spoiler-title\" tabindex=\"0\" role=\"button\"><span class=\"su-spoiler-icon\"><\/span>WHAT MIGHT AN ACCEPTABLE ANSWER BE? (click)<\/div><div class=\"su-spoiler-content su-u-clearfix su-u-trim\">\r\n<p>There are many great ways to answer this question. What we&#8217;re hoping for is identification of the remaining bugs.<\/p>\r\n<p>Additionally, the candidate might talk about design paradigms and specific technologies they&#8217;ve used in the past, and they may get into coding standards and readability thoughts, or packaging, or other software design issues.<\/p>\r\n<p><strong>Strong answers on remaining bugs<\/strong><\/p>\r\n<p style=\"padding-left: 40px;\">generateCalendar can&#8217;t handle results that have no days, and the program&#8217;s flow doesn&#8217;t handle timing issues that can lead to generateCalendar being called before the results are returned &#8211; both of which would be troublesome in a real application.<\/p>\r\n<p><strong>Other areas of inquiry<\/strong><\/p>\r\n<p style=\"padding-left: 40px;\">Particularly energetic candidates have sometimes answered the question by completely rewriting the application in the second question. That&#8217;s acceptable, but we still want to know if they understood where the bugs were, and it&#8217;s one of the reasons we separate the debug and inquiry parts. We use a bit of language to discourage complete re-writes as it&#8217;s a bit of a timesink to walk through a whole new application for every test we review.<\/p>\r\n<p><strong>Other smart notes to watch for<\/strong><\/p>\r\n<p style=\"padding-left: 40px;\">They might also catch some of the more interesting edgecases present in how UUIDs are handled.<\/p>\r\n<\/div><\/div>\r\n<div class=\"su-spoiler su-spoiler-style-default su-spoiler-icon-plus su-spoiler-closed\" data-scroll-offset=\"0\" data-anchor-in-url=\"no\"><div class=\"su-spoiler-title\" tabindex=\"0\" role=\"button\"><span class=\"su-spoiler-icon\"><\/span>WHAT ARE GOOD ANSWERS ABOUT APPLICATION STRUCTURE? (click)<\/div><div class=\"su-spoiler-content su-u-clearfix su-u-trim\"> We&#8217;re always looking for a grasp of cause and effect. Here&#8217;s one strong answer that gets right to the heart of the variable naming scheme.<\/p>\r\n<p style=\"padding-left: 40px;\">currentDate is not a good variable name for the date being looped through.<\/p>\r\n<p style=\"padding-left: 40px;\">The user&#8217;s currentDate should remain constant in the logic, and within the loop, the variable we named currentDate could be renamed calendarDate to make it clear what is advancing and why.<\/p>\r\n<p>Some developers might look to a discussion about a surface topic like camelCase vs lisp-case, but the root issue is that variable name is both meaningful and obscures the intent.<\/p>\r\n<\/div><\/div>\r\n<p>With that &#8211; an advanced question with a deep dive component &#8211; we have a strong coding test that is quick to filter out obvious non-fits, with a very deep gradient for differentiating skill.<\/p>\r\n<\/div><\/div>\r\n\r\n<p>&nbsp;<\/p>\r\n\r\n\r\n\r\n<p>&nbsp;<\/p>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\">Finally, improving the hiring pipeline by investing in test tooling<\/h3>\r\n\r\n<p>A quality test with great questions greatly enhances the process. We can also invest time in tooling.<\/p>\r\n<p>What we&#8217;re really hiring for is the ability to do work and solve complex issues, so tools that allow us to perform deeper assessments are worth examining.<\/p>\r\n<p><strong>Improving our tooling around testing candidates will make<\/strong><\/p>\r\n<p><strong>Playpen and jsFiddle:<\/strong> At the most basic level, we can supply candidates with tests using services like jsFiddle and other playpen examples. These take not much more time to set up, and if set to private, are reasonably secure.<\/p>\r\n<p><strong>Screen Shares<\/strong>: when we have capacity, we can do developer screen shares. Since the end of the pandemic, it seems less necessary. We usually find administering the short test and then spending the time in person talking with a real IDE open to be more productive than adding a screen share session back in.<\/p>\r\n<p><strong>Containerized Test Environment:<\/strong> At a higher level, we can supply a candidate with a rough approximate of what the workplace development environment looks like in a container, complete with buildscripts, and provide them with tasks within that environment. Credentials and instructions are easy to set up and reset.<\/p>\r\n<p>Of course, it&#8217;s important that the account we test under have <em>Full Relationship Isolation<\/em> for security purposes, but once that is accomplished, we gain the following things:<\/p>\r\n<ul>\r\n<li>Testing against very large data sets (100 gb+) which are impractical by email<\/li>\r\n<li>Testing candidate ability to navigate build environments<\/li>\r\n<li>Broad-spectrum questions that touch on multiple systems (from backend to front-end)<\/li>\r\n<li>Lower work burden to create &#8220;depth&#8221; questions from whole cloth (questions 3 and 5)<\/li>\r\n<li>A very real sense how quickly the developer could pick up technology and paradigms at the workplace, and, from question 4, their opinions about whether they would like working with them<\/li>\r\n<\/ul>\r\n<p>Additionally, because the developer does not have to perform routine tasks like setting up an environment or downloading components, we can spend <em>more<\/em> of the test time deep diving into hard questions.<\/p>\r\n<p><strong>Containerized environments are beneficial for both developers and non-developers<\/strong><\/p>\r\n<p>The uncapped data component is useful for any positions that test developer understanding of scalability and performance, and profoundly useful for testing data analyst and engineer skills.<\/p>\r\n<p>Questions like &#8220;this environment performs in aberrant fashion. Identify the issue from the logs and resolve it,&#8221; become possible in containerized settings.<\/p>\r\n<p>A ready-made containerized application is also exceptional for front-end developers.<\/p>\r\n<p>We&#8217;re a bit less interested in &#8220;explain border box to me in this constructed example&#8221; and a lot more interested in &#8220;there are visual defects in this page. Identify and correct them,&#8221; or &#8220;this page renders poorly and slowly on mobile devices. Explore the animation techniques and optimize them.&#8221;<\/p>\r\n<p>Since the advent of Copilot, we&#8217;ve cared less about knowing a specific framework or technology, as it accelerates learning on unfamiliar formats. However, being able to present someone with a simple task in a legacy framework (YUI or, say, ZK) and seeing how they handle it can be a useful data point.<\/p>\r\n<p><strong>Techniques &amp; Terms<\/strong><\/p>\r\n<div class=\"su-spoiler su-spoiler-style-default su-spoiler-icon-plus su-spoiler-closed\" data-scroll-offset=\"0\" data-anchor-in-url=\"no\"><div class=\"su-spoiler-title\" tabindex=\"0\" role=\"button\"><span class=\"su-spoiler-icon\"><\/span>FULL RELATIONSHIP ISOLATION? (click)<\/div><div class=\"su-spoiler-content su-u-clearfix su-u-trim\">\r\n<p>Full Relationship Isolation refers to isolating <em>all<\/em> aspects of an environment from other environments, not just technical elements.<\/p>\r\n<p>In practical terms, this means that the environment runs on a different server from a different vendor on an isolated network; or, in the case of cloud services, on a different account credential paid through an alternative card, and usually set up with a separate division or organization. The administration credentials for these systems have no access to the production environment.<\/p>\r\n<p>The environment should be thoroughly white-boxed (i.e, it contains no logos or graphics that can be construed as endorsing or connecting your brand to the service).<\/p>\r\n<p>FRI is very useful to <em>staging<\/em> and <em>developer<\/em> environments, where accidental mistakes by staff will not bring down your production environment, and credential issues cannot harm your organization. This is an important line of defense against social engineering attacks and other hacking.<\/p>\r\n<p>In the context of Containerized Testing Environments, this is mostly about reducing the burden of monitoring candidate usage and scoping this in a comprehensible way that does not impede requirements that apply to your corporate or organizational needs.<\/p>\r\n<\/div><\/div>\r\n<div class=\"su-spoiler su-spoiler-style-default su-spoiler-icon-plus su-spoiler-closed\" data-scroll-offset=\"0\" data-anchor-in-url=\"no\"><div class=\"su-spoiler-title\" tabindex=\"0\" role=\"button\"><span class=\"su-spoiler-icon\"><\/span>WHAT ARE SOME TOOL PIPELINES WE FOUND LESS USEFUL? (click)<\/div><div class=\"su-spoiler-content su-u-clearfix su-u-trim\">\r\n<p>There is an increasing amount of &#8220;<strong>proctoring<\/strong>&#8221; software that performs tasks such as timing and screen recording as they take the test.<\/p>\r\n<p>The idea behind some of these tools has been to &#8220;prevent&#8221; use of outside resources, like google and stackoverflow searches. Ostensibly, to rule out &#8220;AI influenced answers,&#8221; we could have some candidates enter a room with only a whiteboard pen with no computer or phone and have an employee administer a test.<\/p>\r\n<p>However, if we don&#8217;t actually fix the issue where our questions <strong>aren&#8217;t sufficiently developed to the point where we can distinguish what was prepared by a human or a computer<\/strong>, all we&#8217;ve managed to accomplish is to demonstrate that a potential hire is as reliable at being tasked with work as asking copilot to do it for us.<\/p>\r\n<p>&#8220;<strong>Enforced Timer<\/strong>&#8221; In a previous example, we found time limits were actually giving us worse results without any real gains, partially because a timer clicking down is not reflective of the actual work environment.<\/p>\r\n<p>We generally expect developers to complete their tasks and story points in a reasonable timeframe. Half a day is about the smallest resolution we&#8217;d consider for a given task. The difference between &#8220;finished in 30 minutes,&#8221; vs &#8220;finished in 37&#8221; in a tightly timed exercise is not a strong predictor of future performance; we&#8217;re much more interested in &#8220;finished reasonably, and finished well.&#8221;\u00a0 <\/div><\/div>\r\n\r\n<p>&nbsp;<\/p>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\">Not getting the results you&#8217;re looking for? Troubleshooting the process of code testing<\/h3>\r\n\r\n<p>For those who already have a code test, or have tried to implement one and are running into issues in the process, here&#8217;s a quick troubleshooting<strong> Q&amp;A<\/strong> derived from some experiences with different outcomes.<\/p>\r\n<div class=\"su-spoiler su-spoiler-style-default su-spoiler-icon-plus su-spoiler-closed\" data-scroll-offset=\"0\" data-anchor-in-url=\"no\"><div class=\"su-spoiler-title\" tabindex=\"0\" role=\"button\"><span class=\"su-spoiler-icon\"><\/span>PROBLEM: FEW CANDIDATES ARE PASSING THE TEST (click)<\/div><div class=\"su-spoiler-content su-u-clearfix su-u-trim\">The test should be trivially passable by intermediate staff already at the company. Ask some staff and individuals who have not seen the test before to attempt the test. Re-assess the difficulty level and attempt to match it to the time suggested.<\/div><\/div>\r\n<div class=\"su-spoiler su-spoiler-style-default su-spoiler-icon-plus su-spoiler-closed\" data-scroll-offset=\"0\" data-anchor-in-url=\"no\"><div class=\"su-spoiler-title\" tabindex=\"0\" role=\"button\"><span class=\"su-spoiler-icon\"><\/span>PROBLEM: CANDIDATES ARE COMPLETING TOO FEW OF THE QUESTIONS (click)<\/div><div class=\"su-spoiler-content su-u-clearfix su-u-trim\">Once we identified the right balance of questions to the time length (~2 hours), we found that adding time limits to the test was not meaningfully adding strength to the quality of candidates, and seemed to cause the final questions to taper off in quality.<\/p>\r\n<p>We re-structured the phrasing to read &#8220;suggested time&#8221; instead of &#8220;time limit,&#8221; and removed any clocks or timers. After this change, we were finding an increasing number of candidates in the pool that had somewhat exceeded the time allotment but in turn produced <em>significantly<\/em> more comprehensive and thorough answers to the tasks than many other candidates. We would have been overlooking or disqualifying an otherwise excellent possible hires.<\/p>\r\n<p>As a side note, the elimination of timers and limits also appeared to result in, at times, more tests being completed &#8220;on time,&#8221; presumably as a function of individuals working smoothly, at pace, and not making mistakes by trying to rush. The elimination of some aspect of &#8220;test nervousness&#8221; may also play a role.<\/p>\r\n<\/div><\/div>\r\n<div class=\"su-spoiler su-spoiler-style-default su-spoiler-icon-plus su-spoiler-closed\" data-scroll-offset=\"0\" data-anchor-in-url=\"no\"><div class=\"su-spoiler-title\" tabindex=\"0\" role=\"button\"><span class=\"su-spoiler-icon\"><\/span>PROBLEM: MANY CANDIDATES PASS BUT FAIL THE TECHNICAL INTERVIEW (click)<\/div><div class=\"su-spoiler-content su-u-clearfix su-u-trim\">Check that the questions are not trivial on copilot and contain sufficient depth to confound naive answers that do not attempt to work the problem.<\/p>\r\n<p>Importantly, the staff interviewing should also feel the questions are sufficient.<\/p>\r\n<p>In another article we&#8217;ll discuss the technical interview process, but part of the goal of the code test is to instill confidence in the candidate so that interviewers are verifying competence rather than assuming it isn&#8217;t present to begin with.<\/p>\r\n<\/div><\/div>\r\n<div class=\"su-spoiler su-spoiler-style-default su-spoiler-icon-plus su-spoiler-closed\" data-scroll-offset=\"0\" data-anchor-in-url=\"no\"><div class=\"su-spoiler-title\" tabindex=\"0\" role=\"button\"><span class=\"su-spoiler-icon\"><\/span>PROBLEM: EVERYONE WHO PASSES HAS GOOD ANSWERS WITH LITTLE TO DISCUSS AT THE INTERVIEW (click)<\/div><div class=\"su-spoiler-content su-u-clearfix su-u-trim\">\r\n<ul>\r\n<li>Increase the number and type of errors with rare edge cases in the third question.<\/li>\r\n<li>Increase the optional scope of the fifth question.<\/li>\r\n<\/ul>\r\n<p>A good test also produces thought-provoking topics and areas for a candidate to shine above a normal level.<\/p>\r\n<\/div><\/div>\r\n<div class=\"su-spoiler su-spoiler-style-default su-spoiler-icon-plus su-spoiler-closed\" data-scroll-offset=\"0\" data-anchor-in-url=\"no\"><div class=\"su-spoiler-title\" tabindex=\"0\" role=\"button\"><span class=\"su-spoiler-icon\"><\/span>PROBLEM: FEW EXPERIENCED CANDIDATES ARE TAKING THE TEST (click)<\/div><div class=\"su-spoiler-content su-u-clearfix su-u-trim\">\r\n<ul>\r\n<li>\r\n<p>Investing the time to speak with the candidate prior to testing is a key to establishing that the job opportunity actually exists and for the candidate to get a sense of it being worth their time to proceed. A short phonecall of 10 minutes or less was usually sufficient.<\/p>\r\n<\/li>\r\n<li>\r\n<p>Increasing the seniority or competency of the individual involved in initial phone calls.<\/p>\r\n<\/li>\r\n<li>\r\n<p>Check the time requirements. an excessive test (4-8 hours) is likely to be uninteresting or difficult to schedule for a candidate with many opportunities or responsibilities, especially if other companies are also expecting to test them.<\/p>\r\n<\/li>\r\n<li>\r\n<p>Check scheduling. Requiring candidates to take time off work to take a test is an additional challenge. We allow candidates to pick the date of their test and automate an email to them. The most typical time chosen is a free evening outside of work hours.<\/p>\r\n<\/li>\r\n<\/ul>\r\n<\/div><\/div>\r\n<div class=\"su-spoiler su-spoiler-style-default su-spoiler-icon-plus su-spoiler-closed\" data-scroll-offset=\"0\" data-anchor-in-url=\"no\"><div class=\"su-spoiler-title\" tabindex=\"0\" role=\"button\"><span class=\"su-spoiler-icon\"><\/span>PROBLEM: CANDIDATES RECEIVE THE TEST AND THEN DON'T COMPLETE IT ALL (click)<\/div><div class=\"su-spoiler-content su-u-clearfix su-u-trim\">\r\n<p>Ensure your questions don&#8217;t clearly resemble actual work at your company. Interject some whimsy or clear signal that it&#8217;s just a test.<\/p>\r\n<p>There are many scams that &#8220;test&#8221; developers by functionally making them complete real work tasks for free and never following up. This is also one of the reasons we suggest folks spend only 2 hours on a test.<\/p>\r\n<\/div><\/div>\r\n<div class=\"su-spoiler su-spoiler-style-default su-spoiler-icon-plus su-spoiler-closed\" data-scroll-offset=\"0\" data-anchor-in-url=\"no\"><div class=\"su-spoiler-title\" tabindex=\"0\" role=\"button\"><span class=\"su-spoiler-icon\"><\/span>PROBLEM: TOO FEW QUALIFIED CANDIDATES ARE COMPLETING THE WHOLE PROCESS (click)<\/div><div class=\"su-spoiler-content su-u-clearfix su-u-trim\">\r\n<p>Adding a code test into an existing process will have an impact on the final number of candidates reaching the end of the offer pipeline.<\/p>\r\n<p>Adjust your threshold expectations in other steps.<\/p>\r\n<p>As an example, if you have a 2-step process with a goal of eliminating 90% of candidates each, a hundred candidates on average generates 1 offer. If you add a third step with a 10% pass expectation, you need to process on average a thousand candidates per hire offer.<\/p>\r\n<p>There is a threshold where the hiring pipeline can become choked. The purpose of the code test is to improve the quality of the signal to noise ratio about potential candidates, early in the process before significant time has been invested.<\/p>\r\n<p>Properly designed and administered in concert with an awareness of the rest of the pipeline, the code test should increase the number of qualified candidates reaching an offer stage and reduce the investment of time and effort.<\/p>\r\n<\/div><\/div>\r\n<p>END<\/p>","protected":false},"excerpt":{"rendered":"<p>Bringing qualified candidates onto the team requires an investment of developer and leadership time. When it comes to developers, we&#8217;re usually a lot more interested in their ability to write, debug, and improve applications than their ability to be unflappable in an interview. There&#8217;s a lot to say about improving the hiring pipeline and providing [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-30","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/lampwrite.com\/j\/wp-json\/wp\/v2\/pages\/30","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lampwrite.com\/j\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/lampwrite.com\/j\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/lampwrite.com\/j\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lampwrite.com\/j\/wp-json\/wp\/v2\/comments?post=30"}],"version-history":[{"count":189,"href":"https:\/\/lampwrite.com\/j\/wp-json\/wp\/v2\/pages\/30\/revisions"}],"predecessor-version":[{"id":789,"href":"https:\/\/lampwrite.com\/j\/wp-json\/wp\/v2\/pages\/30\/revisions\/789"}],"wp:attachment":[{"href":"https:\/\/lampwrite.com\/j\/wp-json\/wp\/v2\/media?parent=30"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}