diff --git a/docs/api/javascript/ui/calendar.md b/docs/api/javascript/ui/calendar.md
index 1ecb506276a..b5fc9ebe276 100644
--- a/docs/api/javascript/ui/calendar.md
+++ b/docs/api/javascript/ui/calendar.md
@@ -205,19 +205,32 @@ note that a check for an empty `date` is needed, as the widget can work with a n
 
 #### Example - specify cell template as a string
 
-    <div id="calendar"></div>
-    <script id="cell-template" type="text/x-kendo-template">
-        <div class="#= data.value < 10 ? 'exhibition' : 'party' #"></div>
-        #= data.value #
-    </script>
-    <script>
-        $("#calendar").kendoCalendar({
-            month: {
-               content: $("#cell-template").html()
-            }
-        });
-    </script>
-
+    <style>
+      .exhibition{
+        background-color: #9DD0E0;
+        color:black;
+      }
+      .party{
+        color: red;
+        background-color: #ccc;
+      }
+    </style>
+    <body>
+
+    <div id="calendar"></div>
+    <script id="cell-template" type="text/x-kendo-template">
+        <div class="#= data.value < 10 ? 'exhibition' : 'party' #">
+        #= data.value #
+      </div>
+    </script>
+    <script>
+      $("#calendar").kendoCalendar({
+        month: {
+          content: $("#cell-template").html()
+        }
+      });
+    </script>
+
 ### month.empty `String`
 
  The template to be used for rendering the cells in the "month" view, which are not in the min/max range.
