diff --git a/components/doc/button/linkdoc.js b/components/doc/button/linkdoc.js
index 5004fc8fe5..c9353fbd7f 100644
--- a/components/doc/button/linkdoc.js
+++ b/components/doc/button/linkdoc.js
@@ -6,7 +6,7 @@ export function LinkDoc(props) {
     const code = {
         basic: `
 <Button label="Link" link />
-<a href="https://react.dev" target="_blank" rel="noopener noreferrer" class="p-button font-bold">
+<a href="https://react.dev" target="_blank" rel="noopener noreferrer" className="p-button font-bold">
     Navigate
 </a>
         `,
@@ -18,7 +18,7 @@ export default function LinkDemo() {
     return (
         <div className="card flex justify-content-center">
             <Button label="Link" link />
-            <a href="https://react.dev" target="_blank" rel="noopener noreferrer" class="p-button font-bold">
+            <a href="https://react.dev" target="_blank" rel="noopener noreferrer" className="p-button font-bold">
                 Navigate
             </a>
 
@@ -34,7 +34,7 @@ export default function LinkDemo() {
     return (
         <div className="card flex justify-content-center">
             <Button label="Link" link />
-            <a href="https://react.dev" target="_blank" rel="noopener noreferrer" class="p-button font-bold">
+            <a href="https://react.dev" target="_blank" rel="noopener noreferrer" className="p-button font-bold">
                 Navigate
             </a>
         </div>
@@ -52,7 +52,7 @@ export default function LinkDemo() {
             </DocSectionText>
             <div className="card flex justify-content-center">
                 <Button label="Link" link />
-                <a href="https://react.dev" target="_blank" rel="noopener noreferrer" class="p-button font-bold">
+                <a href="https://react.dev" target="_blank" rel="noopener noreferrer" className="p-button font-bold">
                     Navigate
                 </a>
             </div>
diff --git a/components/doc/calendar/icondoc.js b/components/doc/calendar/icondoc.js
index 1a407e0721..ada519247b 100644
--- a/components/doc/calendar/icondoc.js
+++ b/components/doc/calendar/icondoc.js
@@ -19,25 +19,25 @@ export default function IconDemo() {
 
     return (
         <div className="card flex flex-wrap gap-3 p-fluid">
-            <div class="flex-auto">
-                <label labelFor="buttondisplay" class="font-bold block mb-2">
+            <div className="flex-auto">
+                <label htmlFor="buttondisplay" className="font-bold block mb-2">
                     Button Display
                 </label>
                 <Calendar id="buttondisplay" value={date} onChange={(e) => setDate(e.value)} showIcon />
             </div>
-            <div class="flex-auto">
-                <label labelFor="buttondisplay" class="font-bold block mb-2">
+            <div className="flex-auto">
+                <label htmlFor="buttondisplay" className="font-bold block mb-2">
                     Icon Display
                 </label>
 
-                <Calendar value={date} onChange={(e) => setDate(e.value)} showIcon iconDisplay="input" />
+                <Calendar value={date} onChange={(e) => setDate(e.value)} showIcon  />
             </div>
-            <div class="flex-auto">
-                <label labelFor="buttondisplay" class="font-bold block mb-2">
+            <div className="flex-auto">
+                <label htmlFor="buttondisplay" className="font-bold block mb-2">
                     Icon Template
                 </label>
 
-                <Calendar value={date} onChange={(e) => setDate(e.value)} showIcon timeOnly iconDisplay="input" icon={() => <i className="pi pi-clock" />} />
+                <Calendar value={date} onChange={(e) => setDate(e.value)} showIcon timeOnly  icon={() => <i className="pi pi-clock" />} />
             </div>
         </div>
     )
@@ -53,25 +53,25 @@ export default function IconDemo() {
 
     return (
         <div className="card flex flex-wrap gap-3 p-fluid">
-            <div class="flex-auto">
-                <label labelFor="buttondisplay" class="font-bold block mb-2">
+            <div className="flex-auto">
+                <label htmlFor="buttondisplay" className="font-bold block mb-2">
                     Button Display
                 </label>
                 <Calendar id="buttondisplay" value={date} onChange={(e) => setDate(e.value)} showIcon />
             </div>
-            <div class="flex-auto">
-                <label labelFor="buttondisplay" class="font-bold block mb-2">
+            <div className="flex-auto">
+                <label htmlFor="buttondisplay" className="font-bold block mb-2">
                     Icon Display
                 </label>
 
-                <Calendar value={date} onChange={(e) => setDate(e.value)} showIcon iconDisplay="input" />
+                <Calendar value={date} onChange={(e) => setDate(e.value)} showIcon  />
             </div>
-            <div class="flex-auto">
-                <label labelFor="buttondisplay" class="font-bold block mb-2">
+            <div className="flex-auto">
+                <label htmlFor="buttondisplay" className="font-bold block mb-2">
                     Icon Template
                 </label>
 
-                <Calendar value={date} onChange={(e) => setDate(e.value)} showIcon timeOnly iconDisplay="input" icon={() => <i className="pi pi-clock" />} />
+                <Calendar value={date} onChange={(e) => setDate(e.value)} showIcon timeOnly  icon={() => <i className="pi pi-clock" />} />
             </div>
         </div>
     )
@@ -87,25 +87,25 @@ export default function IconDemo() {
                 </p>
             </DocSectionText>
             <div className="card flex flex-wrap gap-3 p-fluid">
-                <div class="flex-auto">
-                    <label labelFor="buttondisplay" class="font-bold block mb-2">
+                <div className="flex-auto">
+                    <label htmlFor="buttondisplay" className="font-bold block mb-2">
                         Button Display
                     </label>
                     <Calendar id="buttondisplay" value={date} onChange={(e) => setDate(e.value)} showIcon />
                 </div>
-                <div class="flex-auto">
-                    <label labelFor="buttondisplay" class="font-bold block mb-2">
+                <div className="flex-auto">
+                    <label htmlFor="buttondisplay" className="font-bold block mb-2">
                         Icon Display
                     </label>
 
-                    <Calendar value={date} onChange={(e) => setDate(e.value)} showIcon iconDisplay="input" />
+                    <Calendar value={date} onChange={(e) => setDate(e.value)} showIcon />
                 </div>
-                <div class="flex-auto">
-                    <label labelFor="buttondisplay" class="font-bold block mb-2">
+                <div className="flex-auto">
+                    <label htmlFor="buttondisplay" className="font-bold block mb-2">
                         Icon Template
                     </label>
 
-                    <Calendar value={date} onChange={(e) => setDate(e.value)} showIcon timeOnly iconDisplay="input" icon={() => <i className="pi pi-clock" />} />
+                    <Calendar value={date} onChange={(e) => setDate(e.value)} showIcon timeOnly icon={() => <i className="pi pi-clock" />} />
                 </div>
             </div>
             <DocSectionCode code={code} />
diff --git a/components/doc/panel/templatedoc.js b/components/doc/panel/templatedoc.js
index 3115543b59..cec4534e35 100644
--- a/components/doc/panel/templatedoc.js
+++ b/components/doc/panel/templatedoc.js
@@ -37,8 +37,8 @@ export function TemplateDoc(props) {
                 </div>
                 <div>
                     <Menu model={items} popup ref={configMenu} id="config_menu" />
-                    <button class="p-panel-header-icon p-link mr-2" onClick={(e) => configMenu?.current?.toggle(e)}>
-                        <span class="pi pi-cog"></span>
+                    <button className="p-panel-header-icon p-link mr-2" onClick={(e) => configMenu?.current?.toggle(e)}>
+                        <span className="pi pi-cog"></span>
                     </button>
                     {options.togglerElement}
                 </div>
@@ -107,8 +107,8 @@ export default function TemplateDemo() {
                 </div>
                 <div>
                     <Menu model={items} popup ref={configMenu} id="config_menu" />
-                    <button class="p-panel-header-icon p-link mr-2" onClick={(e) => configMenu?.current?.toggle(e)}>
-                        <span class="pi pi-cog"></span>
+                    <button className="p-panel-header-icon p-link mr-2" onClick={(e) => configMenu?.current?.toggle(e)}>
+                        <span className="pi pi-cog"></span>
                     </button>
                     {options.togglerElement}
                 </div>
@@ -178,8 +178,8 @@ export default function TemplateDemo() {
                 </div>
                 <div>
                     <Menu model={items} popup ref={configMenu} id="config_menu" />
-                    <button class="p-panel-header-icon p-link mr-2" onClick={(e) => configMenu?.current?.toggle(e)}>
-                        <span class="pi pi-cog"></span>
+                    <button className="p-panel-header-icon p-link mr-2" onClick={(e) => configMenu?.current?.toggle(e)}>
+                        <span className="pi pi-cog"></span>
                     </button>
                     {options.togglerElement}
                 </div>
diff --git a/components/doc/ripple/customdoc.js b/components/doc/ripple/customdoc.js
index b0b81cdd6d..12c4f7ddc7 100644
--- a/components/doc/ripple/customdoc.js
+++ b/components/doc/ripple/customdoc.js
@@ -5,7 +5,7 @@ import { Ripple } from '@/components/lib/ripple/Ripple';
 export function CustomDoc(props) {
     const code = {
         basic: `
-<div class="p-ripple p-5 border-round border-radius-10 shadow-2">
+<div className="p-ripple p-5 border-round border-radius-10 shadow-2">
     Green
     <Ripple
         pt={{
@@ -13,7 +13,7 @@ export function CustomDoc(props) {
         }}
     />
 </div>
-<div class="p-ripple p-5 border-round border-radius-10 shadow-2">
+<div className="p-ripple p-5 border-round border-radius-10 shadow-2">
     Orange
     <Ripple
         pt={{
@@ -21,7 +21,7 @@ export function CustomDoc(props) {
         }}
     />
 </div>
-<div class="p-ripple p-5 border-round border-radius-10 shadow-2">
+<div className="p-ripple p-5 border-round border-radius-10 shadow-2">
     Purple
     <Ripple
         pt={{
@@ -37,7 +37,7 @@ import { Ripple } from 'primereact/ripple';
 export default function CustomDemo() {
     return (
         <div className="card flex justify-content-center align-items-center gap-2">
-            <div class="p-ripple p-5 border-round border-radius-10 shadow-2">
+            <div className="p-ripple p-5 border-round border-radius-10 shadow-2">
                 Green
                 <Ripple
                     pt={{
@@ -45,7 +45,7 @@ export default function CustomDemo() {
                     }}
                 />
             </div>
-            <div class="p-ripple p-5 border-round border-radius-10 shadow-2">
+            <div className="p-ripple p-5 border-round border-radius-10 shadow-2">
                 Orange
                 <Ripple
                     pt={{
@@ -53,7 +53,7 @@ export default function CustomDemo() {
                     }}
                 />
             </div>
-            <div class="p-ripple p-5 border-round border-radius-10 shadow-2">
+            <div className="p-ripple p-5 border-round border-radius-10 shadow-2">
                 Purple
                 <Ripple
                     pt={{
@@ -72,7 +72,7 @@ import { Ripple } from 'primereact/ripple';
 export default function CustomDemo() {
     return (
         <div className="card flex justify-content-center align-items-center gap-2">
-            <div class="p-ripple p-5 border-round border-radius-10 shadow-2">
+            <div className="p-ripple p-5 border-round border-radius-10 shadow-2">
                 Green
                 <Ripple
                     pt={{
@@ -80,7 +80,7 @@ export default function CustomDemo() {
                     }}
                 />
             </div>
-            <div class="p-ripple p-5 border-round border-radius-10 shadow-2">
+            <div className="p-ripple p-5 border-round border-radius-10 shadow-2">
                 Orange
                 <Ripple
                     pt={{
@@ -88,7 +88,7 @@ export default function CustomDemo() {
                     }}
                 />
             </div>
-            <div class="p-ripple p-5 border-round border-radius-10 shadow-2">
+            <div className="p-ripple p-5 border-round border-radius-10 shadow-2">
                 Purple
                 <Ripple
                     pt={{
@@ -110,7 +110,7 @@ export default function CustomDemo() {
                 </p>
             </DocSectionText>
             <div className="card flex justify-content-center align-items-center gap-2">
-                <div class="p-ripple p-5 border-round border-radius-10 shadow-2">
+                <div className="p-ripple p-5 border-round border-radius-10 shadow-2">
                     Green
                     <Ripple
                         pt={{
@@ -118,7 +118,7 @@ export default function CustomDemo() {
                         }}
                     />
                 </div>
-                <div class="p-ripple p-5 border-round border-radius-10 shadow-2">
+                <div className="p-ripple p-5 border-round border-radius-10 shadow-2">
                     Orange
                     <Ripple
                         pt={{
@@ -126,7 +126,7 @@ export default function CustomDemo() {
                         }}
                     />
                 </div>
-                <div class="p-ripple p-5 border-round border-radius-10 shadow-2">
+                <div className="p-ripple p-5 border-round border-radius-10 shadow-2">
                     Purple
                     <Ripple
                         pt={{
diff --git a/components/doc/toolbar/customdoc.js b/components/doc/toolbar/customdoc.js
index 8e881543d3..979e99d1ed 100644
--- a/components/doc/toolbar/customdoc.js
+++ b/components/doc/toolbar/customdoc.js
@@ -46,9 +46,9 @@ export function CustomDoc(props) {
 
     const endContent = (
         <React.Fragment>
-            <div class="flex align-items-center gap-2">
+            <div className="flex align-items-center gap-2">
                 <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
-                <span class="font-bold text-bluegray-50">Amy Elsner</span>
+                <span className="font-bold text-bluegray-50">Amy Elsner</span>
             </div>
         </React.Fragment>
     );
@@ -104,9 +104,9 @@ export default function CustomDemo() {
 
     const endContent = (
         <React.Fragment>
-            <div class="flex align-items-center gap-2">
+            <div className="flex align-items-center gap-2">
                 <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
-                <span class="font-bold text-bluegray-50">Amy Elsner</span>
+                <span className="font-bold text-bluegray-50">Amy Elsner</span>
             </div>
         </React.Fragment>
     );
@@ -165,9 +165,9 @@ export default function CustomDemo() {
 
     const endContent = (
         <React.Fragment>
-            <div class="flex align-items-center gap-2">
+            <div className="flex align-items-center gap-2">
                 <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
-                <span class="font-bold text-bluegray-50">Amy Elsner</span>
+                <span className="font-bold text-bluegray-50">Amy Elsner</span>
             </div>
         </React.Fragment>
     );
diff --git a/components/lib/calendar/Calendar.js b/components/lib/calendar/Calendar.js
index 178e2954e2..148fe65aa0 100644
--- a/components/lib/calendar/Calendar.js
+++ b/components/lib/calendar/Calendar.js
@@ -2310,8 +2310,14 @@ export const Calendar = React.memo(
             if (isNaN(h) || isNaN(m) || h > 23 || m > 59 || (props.hourFormat === '12' && h > 12) || (props.showSeconds && (isNaN(s) || s > 59)) || (props.showMillisec && (isNaN(s) || s > 1000))) {
                 throw new Error('Invalid time');
             } else {
-                if (props.hourFormat === '12' && h !== 12 && ampm === 'PM') {
-                    h += 12;
+                if (props.hourFormat === '12') {
+                    if (h !== 12 && ampm === 'PM') {
+                        h += 12;
+                    }
+
+                    if (h === 12 && ampm === 'AM') {
+                        h -= 12;
+                    }
                 }
 
                 return { hour: h, minute: m, second: s, millisecond: ms };