added layout for empty month to go to the next month (#6011)

apps/web/pages/settings/admin/apps/[category].tsx

@@ -10,7 +10,7 @@ function AdminAppsView() {
   const { t } = useLocale();
   return (
     <>
-      <Meta title={t("apps")} description={t("apps_description")} />
+      <Meta title={t("apps")} description={t("admin_apps_description")} />
       <AdminAppsList baseURL="/settings/admin/apps" className="w-0" />
     </>
   );

apps/web/public/static/locales/en/common.json

@@ -1431,7 +1431,7 @@
   "disable_app": "Disable App",
   "disable_app_description": "Disabling this app could cause problems with how your users interact with Cal",
   "edit_keys": "Edit Keys",
-  "apps_description": "Enable apps for your instance of Cal",
+  "admin_apps_description": "Enable apps for your instance of Cal",
   "no_available_apps": "There are no available apps",
   "no_available_apps_description": "Please ensure there are apps in your deployment under 'packages/app-store'",
   "no_apps": "There are no apps enabled in this instance of Cal",
@@ -1454,5 +1454,7 @@
   "date_overrides_update_btn": "Update Override",
   "event_type_duplicate_copy_text": "{{slug}}-copy",
   "set_as_default": "Set as default",
-  "hide_eventtype_details": "Hide EventType Details"
+  "hide_eventtype_details": "Hide EventType Details",
+  "no_availability_in_month": "No availability in {{month}}",
+  "view_next_month": "View next month"
 }

packages/ui/v2/modules/booker/DatePicker.tsx

@@ -6,6 +6,7 @@ import classNames from "@calcom/lib/classNames";
 import { daysInMonth, yyyymmdd } from "@calcom/lib/date-fns";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { weekdayNames } from "@calcom/lib/weekday";
+import { Button, Icon } from "@calcom/ui";
 
 import { SkeletonText } from "../../..";
 
@@ -69,6 +70,27 @@ export const Day = ({
   );
 };
 
+const NoAvailabilityOverlay = ({
+  month,
+  nextMonthButton,
+}: {
+  month: string | null;
+  nextMonthButton: () => void;
+}) => {
+  const { t } = useLocale();
+
+  return (
+    <div className="dark:border-darkgray-300 dark:bg-darkgray-200 absolute top-40 left-1/2 -mt-10 w-max -translate-x-1/2 -translate-y-1/2 transform rounded-md border border-gray-200 bg-gray-50 p-8 shadow-sm">
+      <h4 className="mb-4 font-medium text-gray-900 dark:text-white">
+        {t("no_availability_in_month", { month: month })}
+      </h4>
+      <Button onClick={nextMonthButton} color="primary" EndIcon={Icon.FiArrowRight}>
+        {t("view_next_month")}
+      </Button>
+    </div>
+  );
+};
+
 const Days = ({
   minDate = dayjs.utc(),
   excludedDates = [],
@@ -76,16 +98,19 @@ const Days = ({
   weekStart,
   DayComponent = Day,
   selected,
+  month,
+  nextMonthButton,
   ...props
 }: Omit<DatePickerProps, "locale" | "className" | "weekStart"> & {
   DayComponent?: React.FC<React.ComponentProps<typeof Day>>;
   browsingDate: Dayjs;
   weekStart: number;
+  month: string | null;
+  nextMonthButton: () => void;
 }) => {
   // Create placeholder elements for empty days in first week
   const weekdayOfFirst = browsingDate.day();
   const currentDate = minDate.utcOffset(browsingDate.utcOffset());
-
   const availableDates = (includedDates: string[] | undefined) => {
     const dates = [];
     const lastDateOfMonth = browsingDate.date(daysInMonth(browsingDate));
@@ -120,7 +145,7 @@ const Days = ({
             <div key={`e-${idx}`} />
           ) : props.isLoading ? (
             <button
-              className=" dark:bg-darkgray-200 absolute top-0 left-0 right-0 bottom-0 mx-auto flex w-full items-center justify-center rounded-sm border-transparent bg-gray-50 text-center text-gray-400 opacity-50 dark:text-gray-400"
+              className="dark:bg-darkgray-200 absolute top-0 left-0 right-0 bottom-0 mx-auto flex w-full items-center justify-center rounded-sm border-transparent bg-gray-50 text-center text-gray-400 opacity-50 dark:text-gray-400"
               key={`e-${idx}`}
               disabled>
               <SkeletonText className="h-4 w-5" />
@@ -146,6 +171,10 @@ const Days = ({
           )}
         </div>
       ))}
+
+      {!props.isLoading && includedDates && includedDates?.length === 0 && (
+        <NoAvailabilityOverlay month={month} nextMonthButton={nextMonthButton} />
+      )}
     </>
   );
 };
@@ -215,8 +244,15 @@ const DatePicker = ({
           </div>
         ))}
       </div>
-      <div className="grid grid-cols-7 gap-1 text-center">
-        <Days weekStart={weekStart} selected={selected} {...passThroughProps} browsingDate={browsingDate} />
+      <div className="relative grid grid-cols-7 gap-1 text-center">
+        <Days
+          weekStart={weekStart}
+          selected={selected}
+          {...passThroughProps}
+          browsingDate={browsingDate}
+          month={month}
+          nextMonthButton={() => changeMonth(+1)}
+        />
       </div>
     </div>
   );