Update calendar props and demos

components/doc/calendar/filleddoc.js

@@ -0,0 +1,57 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Calendar } from '@/components/lib/calendar/Calendar';
+import { useState } from 'react';
+
+export function FilledDoc(props) {
+    const [date, setDate] = useState(null);
+
+    const code = {
+        basic: `
+<Calendar variant="filled" value={date} onChange={(e) => setDate(e.value)} />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { Calendar } from 'primereact/calendar';
+
+export default function FilledDemo() {
+    const [date, setDate] = useState(null);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Calendar variant="filled" value={date} onChange={(e) => setDate(e.value)} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { Calendar } from 'primereact/calendar';
+import { Nullable } from "primereact/ts-helpers";
+
+export default function FilledDemo() {
+    const [date, setDate] = useState<Nullable<Date>>(null);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Calendar variant="filled" value={date} onChange={(e) => setDate(e.value)} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Calendar variant="filled" value={date} onChange={(e) => setDate(e.value)} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}