diff --git a/packages/block-library/src/calendar/edit.js b/packages/block-library/src/calendar/edit.js
index a60a18d8eeae8e..aee0e4116853c0 100644
--- a/packages/block-library/src/calendar/edit.js
+++ b/packages/block-library/src/calendar/edit.js
@@ -34,7 +34,17 @@ const getYearMonth = memoize( ( date ) => {
 } );
 
 export default function CalendarEdit( { attributes } ) {
-	const blockProps = useBlockProps();
+	const blockProps = useBlockProps( {
+		className: [
+			attributes.backgroundColor
+				? `has-${ attributes.backgroundColor }-background-color`
+				: '',
+			attributes.textColor ? `has-${ attributes.textColor }-color` : '',
+		]
+			.filter( Boolean )
+			.join( ' ' ),
+	} );
+
 	const { date, hasPosts, hasPostsResolved } = useSelect( ( select ) => {
 		const { getEntityRecords, hasFinishedResolution } = select( coreStore );
 
diff --git a/packages/block-library/src/calendar/style.scss b/packages/block-library/src/calendar/style.scss
index 969d1aafec99ef..f16b0c0ff7d06d 100644
--- a/packages/block-library/src/calendar/style.scss
+++ b/packages/block-library/src/calendar/style.scss
@@ -37,9 +37,26 @@
 			color: inherit;
 		}
 	}
+
+	&.has-background {
+		table#wp-calendar th {
+			background: inherit;
+		}
+	}
 }
 
 // Keep the hard-coded header background color for backward compatibility.
 :where(.wp-block-calendar table:not(.has-background) th) {
 	background: $gray-300;
 }
+
+// Update editor color.
+.wp-block-calendar.has-link-color table#wp-calendar th,
+.wp-block-calendar.has-link-color table#wp-calendar {
+	color: inherit;
+	border-color: inherit;
+}
+
+.wp-block-calendar.has-link-color table#wp-calendar td {
+	border-color: inherit;
+}