diff --git a/packages/react-core/src/components/CalendarMonth/examples/CalendarMonth.md b/packages/react-core/src/components/CalendarMonth/examples/CalendarMonth.md
index ef0b44817aa..4ac809257e4 100644
--- a/packages/react-core/src/components/CalendarMonth/examples/CalendarMonth.md
+++ b/packages/react-core/src/components/CalendarMonth/examples/CalendarMonth.md
@@ -9,27 +9,11 @@ beta: true
 ## Examples
 
 ### Default
-```js
-import React from 'react';
-import { CalendarMonth } from '@patternfly/react-core';
 
-<CalendarMonth />
+```ts file="./CalendarMonthDefault.tsx"
 ```
 
 ### Selectable date
-```js
-import React from 'react';
-import { CalendarMonth } from '@patternfly/react-core';
 
-SelectableCalendarMonth = () => {
-  const [date, setDate] = React.useState(new Date(2020, 10, 24));
-  
-  return (
-    <React.Fragment>
-      <pre>Selected date: {date.toString()}</pre>
-      <CalendarMonth date={date} onChange={setDate} />
-    </React.Fragment>
-  );
-}
+```ts file="./CalendarMonthSelectableDate.tsx"
 ```
-
diff --git a/packages/react-core/src/components/CalendarMonth/examples/CalendarMonthDefault.tsx b/packages/react-core/src/components/CalendarMonth/examples/CalendarMonthDefault.tsx
new file mode 100644
index 00000000000..57c4bc9452d
--- /dev/null
+++ b/packages/react-core/src/components/CalendarMonth/examples/CalendarMonthDefault.tsx
@@ -0,0 +1,4 @@
+import React from 'react';
+import { CalendarMonth } from '@patternfly/react-core';
+
+export const CalendarMonthDefault: React.FunctionComponent = () => <CalendarMonth date={new Date()} />;
diff --git a/packages/react-core/src/components/CalendarMonth/examples/CalendarMonthSelectableDate.tsx b/packages/react-core/src/components/CalendarMonth/examples/CalendarMonthSelectableDate.tsx
new file mode 100644
index 00000000000..6f77dccf600
--- /dev/null
+++ b/packages/react-core/src/components/CalendarMonth/examples/CalendarMonthSelectableDate.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import { CalendarMonth } from '@patternfly/react-core';
+
+export const CalendarMonthSelectableDate: React.FunctionComponent = () => {
+  const [date, setDate] = React.useState(new Date(2020, 10, 24));
+
+  return (
+    <React.Fragment>
+      <pre>Selected date: {date.toString()}</pre>
+      <CalendarMonth date={date} onChange={setDate} />
+    </React.Fragment>
+  );
+};