Dim calendar when no iCal links and show single month

app/components/AvailabilityCalendar.tsx

@@ -40,13 +40,21 @@ function buildMonths(monthCount: number, blocked: Set<string>): MonthView[] {
   return months;
 }
 
-export default function AvailabilityCalendar({ blockedDates, months = 2 }: { blockedDates: string[]; months?: number }) {
+export default function AvailabilityCalendar({
+  blockedDates,
+  months = 2,
+  disabled = false,
+}: {
+  blockedDates: string[];
+  months?: number;
+  disabled?: boolean;
+}) {
   const { t } = useI18n();
   const blockedSet = useMemo(() => new Set(blockedDates), [blockedDates]);
   const monthViews = useMemo(() => buildMonths(months, blockedSet), [months, blockedSet]);
 
   return (
-    <div style={{ display: 'grid', gap: 16 }}>
+    <div style={{ display: 'grid', gap: 16, opacity: disabled ? 0.45 : 1 }}>
       <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
         <span style={{ fontWeight: 700 }}>{t('availabilityTitle')}</span>
         <span className="badge secondary">{t('availabilityLegendBooked')}</span>

app/listings/[slug]/page.tsx

@@ -137,7 +137,7 @@ export default async function ListingPage({ params }: ListingPageProps) {
               </div>
               <div className="panel" style={{ padding: 12 }}>
                 {hasCalendar ? (
-                  <AvailabilityCalendar blockedDates={blockedDates} months={2} />
+                  <AvailabilityCalendar blockedDates={blockedDates} months={1} disabled={!listing.calendarUrls?.length} />
                 ) : (
                   <div style={{ display: 'grid', gap: 8 }}>
                     <div style={{ fontWeight: 700 }}>{t('availabilityTitle')}</div>