From f8be7411e660aab7d9b50cde43f1d598be1a0663 Mon Sep 17 00:00:00 2001
From: Rohan Satkar <coderxrohan@gmail.com>
Date: Sat, 3 Jan 2026 16:14:54 +0530
Subject: [PATCH 1/2] docs(Calendar): fix first-click issue with SSR-safe
 appendTo

---
 components/doc/calendar/basicdoc.js | 24 ++++++++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

diff --git a/components/doc/calendar/basicdoc.js b/components/doc/calendar/basicdoc.js
index 8f6b3a7b58..7113243fbe 100644
--- a/components/doc/calendar/basicdoc.js
+++ b/components/doc/calendar/basicdoc.js
@@ -8,7 +8,11 @@ export function BasicDoc(props) {
 
     const code = {
         basic: `
-<Calendar value={date} onChange={(e) => setDate(e.value)} />
+        <Calendar
+            value={date}
+            onChange={(e) => setDate(e.value)}
+            appendTo={typeof window !== 'undefined' ? document.body : null}
+        />
         `,
         javascript: `
 import React, { useState } from "react";
@@ -19,7 +23,11 @@ export default function BasicDemo() {
 
     return (
         <div className="card flex justify-content-center">
-            <Calendar value={date} onChange={(e) => setDate(e.value)} />
+        <Calendar
+            value={date}
+            onChange={(e) => setDate(e.value)}
+            appendTo={typeof window !== 'undefined' ? document.body : null}
+        />
         </div>
     )
 }
@@ -34,7 +42,11 @@ export default function BasicDemo() {
 
     return (
         <div className="card flex justify-content-center">
-            <Calendar value={date} onChange={(e) => setDate(e.value)} />
+            <Calendar
+                value={date}
+                onChange={(e) => setDate(e.value)}
+                appendTo={typeof window !== 'undefined' ? document.body : null}
+            />
         </div>
     )
 }
@@ -49,7 +61,11 @@ export default function BasicDemo() {
                 </p>
             </DocSectionText>
             <div className="card flex justify-content-center">
-                <Calendar value={date} onChange={(e) => setDate(e.value)} />
+                <Calendar
+                    value={date}
+                    onChange={(e) => setDate(e.value)}
+                    appendTo={typeof window !== 'undefined' ? document.body : null}
+                />
             </div>
             <DocSectionCode code={code} />
         </>

From d418af76f61135cde796a79d0ecc98f4b6488077 Mon Sep 17 00:00:00 2001
From: Rohan Satkar <coderxrohan@gmail.com>
Date: Sat, 3 Jan 2026 16:20:28 +0530
Subject: [PATCH 2/2] style(docs): format calendar basic demo with Prettier

---
 components/doc/calendar/basicdoc.js | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/components/doc/calendar/basicdoc.js b/components/doc/calendar/basicdoc.js
index 7113243fbe..94231b2470 100644
--- a/components/doc/calendar/basicdoc.js
+++ b/components/doc/calendar/basicdoc.js
@@ -61,11 +61,7 @@ export default function BasicDemo() {
                 </p>
             </DocSectionText>
             <div className="card flex justify-content-center">
-                <Calendar
-                    value={date}
-                    onChange={(e) => setDate(e.value)}
-                    appendTo={typeof window !== 'undefined' ? document.body : null}
-                />
+                <Calendar value={date} onChange={(e) => setDate(e.value)} appendTo={typeof window !== 'undefined' ? document.body : null} />
             </div>
             <DocSectionCode code={code} />
         </>