From f5e394bb574600e1ce9cebd24fd4476fd5851256 Mon Sep 17 00:00:00 2001
From: Hariom Balhara <hariombalhara@gmail.com>
Date: Wed, 31 Aug 2022 15:17:23 +0530
Subject: [PATCH] Add back enabledDateButton and disabledDateButton UI custom
 styling for embed (#4059)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
---
 packages/embeds/embed-core/index.html        | 6 ++++++
 packages/ui/v2/modules/booker/DatePicker.tsx | 4 ++++
 2 files changed, 10 insertions(+)

diff --git a/packages/embeds/embed-core/index.html b/packages/embeds/embed-core/index.html
index 06933d63a4..7e3cce6249 100644
--- a/packages/embeds/embed-core/index.html
+++ b/packages/embeds/embed-core/index.html
@@ -313,6 +313,12 @@
                   highlightColor: "#9b0e0e",
                   medianColor: "black",
                 },
+                enabledDateButton: {
+                  backgroundColor: "red"
+                },
+                disabledDateButton: {
+                  backgroundColor: "green"
+                }
               },
             },
           ]
diff --git a/packages/ui/v2/modules/booker/DatePicker.tsx b/packages/ui/v2/modules/booker/DatePicker.tsx
index 58eae8bb67..5a29252999 100644
--- a/packages/ui/v2/modules/booker/DatePicker.tsx
+++ b/packages/ui/v2/modules/booker/DatePicker.tsx
@@ -1,6 +1,7 @@
 import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/react/solid";
 
 import dayjs, { Dayjs } from "@calcom/dayjs";
+import { useEmbedStyles } from "@calcom/embed-core/embed-iframe";
 import classNames from "@calcom/lib/classNames";
 import { daysInMonth, yyyymmdd } from "@calcom/lib/date-fns";
 import { weekdayNames } from "@calcom/lib/weekday";
@@ -36,8 +37,11 @@ export const Day = ({
   active,
   ...props
 }: JSX.IntrinsicElements["button"] & { active: boolean; date: Dayjs }) => {
+  const enabledDateButtonEmbedStyles = useEmbedStyles("enabledDateButton");
+  const disabledDateButtonEmbedStyles = useEmbedStyles("disabledDateButton");
   return (
     <button
+      style={props.disabled ? { ...disabledDateButtonEmbedStyles } : { ...enabledDateButtonEmbedStyles }}
       className={classNames(
         "disabled:text-bookinglighter  absolute top-0 left-0 right-0 bottom-0 mx-auto w-full rounded-md border-2 border-transparent text-center font-medium hover:bg-gray-300 disabled:cursor-default disabled:border-transparent disabled:font-light dark:hover:border-white disabled:dark:border-transparent",
         active