bug(EJ2-3645): Calendar sample are updated.

Author: pipeline

src/calendar/calendar-style.css

@@ -1,6 +1,6 @@
 #control_wrapper {
     margin: 0 auto;
-    max-width: 350px;
+    max-width: 300px;
 }
 
 .control-section {

src/calendar/default-plnkr.json

@@ -2,13 +2,14 @@
     <div id="control_wrapper">
         <div id="container">
             <ej-calendar (change)="onValueChange($event)"></ej-calendar>
+            <span id="selected">Selected Value: </span>
         </div>
-        <span id="selected">Selected Value: </span>
     </div>
 </div>
 <div id="description">
     <p>
-        A <code>Calendar</code> is a graphical user interface control which provides the multi-view representation to display and select a date. Also, provide options to navigate in different levels of views like month, year, decade.
+        A <code>Calendar</code> is a graphical user interface control which provides the multi-view representation to display
+        and select a date. Also, provide options to navigate in different levels of views like month, year, decade.
     </p>
     <p>More information on the calendar instantiation can be found in this
         <a href="http://ej2.syncfusion.com/angular/documentation/calendar/getting-started.html" target="_blank"> documentation section</a>.</p>

src/calendar/default.html

@@ -2,18 +2,15 @@
     <div id="control_wrapper">
         <div id="container">
             <ej-calendar (renderDayCell)="onLoad($event)" (change)="onValueChange($event)"></ej-calendar>
+            <span id="selected">Selected Value: </span>
         </div>
-        <span id="selected">Selected Value: </span>
     </div>
 </div>
 <div id="description">
     <p>
-        Disabled Dates sample demonstrates, how to disable a specific dates in a calendar by using <code>renderDayCell</code> event. This event gets triggered on each day cell element creation that allows you to customize or disable the specific dates
-        in calendar.
-    </p>
-    <p>
-        Here, weekend date's are disabled by setting <code>args.disabled</code> as true.
+        Disabled Dates sample demonstrates, how to disable a specific dates in a calendar by using <code>renderDayCell</code>        event. This event gets triggered on each day cell element creation that allows you to customize or disable the specific
+        dates in calendar. Here the weekend date's are disabled by using renderDayCell.
     </p>
     <p>More information on the calendar customization can be found in this
-        <a href="http://ej2.syncfusion.com/angular/documentation/calendar/getting-started.html" target="_blank"> documentation section</a>.</p>
+        <a href="http://ej2.syncfusion.com/angular/documentation/calendar/customization.html" target="_blank"> documentation section</a>.</p>
 </div>

src/calendar/disabled-plnkr.json

@@ -1,9 +1,7 @@
 <div class="control-section">
     <div class="col-lg-8 content-wrapper">
         <div class="content">
-            <div>
-                <ej-calendar [locale]="locale" [value]="date" (change)="onValueChange($event)"></ej-calendar>
-            </div>
+            <ej-calendar [locale]="locale" [value]="date" (change)="onValueChange($event)"></ej-calendar>
             <span id="selected">Selected Value: </span>
         </div>
     </div>
@@ -33,28 +31,32 @@
 </div>
 <div id="description">
     <p>
-        The calendar control was rendered with <code>German</code> culture. Here the date separator, week header and month text content are updated based on current culture.
-    </p>
-    <p>
-        you can also change the control culture by selecting it from the culture options in the properties panel.
+        The calendar control was rendered with <code>German</code> culture. Here the date separator, week header and month
+        text content are updated based on current culture. You can also change the control culture by selecting it from the
+        culture options in the properties panel.
     </p>
-    <p>More information on the internationalization configuration can be found in this <a href="http://ej2.syncfusion.com/documentation/base/intl.html" target="_blank"> documentation section</a>.</p>
+    <p>More information on the internationalization configuration can be found in this <a href="http://ej2.syncfusion.com/angular/documentation/calendar/internationalization.html"
+            target="_blank"> documentation section</a>.</p>
 </div>
 <style>
     .property-panel-content {
         padding: 0 10px 10px 0;
     }
-    
+
     .content {
         width: 43%;
         margin: 0 auto;
         min-width: 185px;
         padding: 20px 0px;
     }
-    
+
     .control-label {
         padding: 24px 0px 0px 0px;
         font-size: 12px;
         opacity: 0.54;
     }
+
+    .e-bigger .content {
+        width: 100%;
+    }
 </style>

src/calendar/disabled.html

@@ -2,17 +2,17 @@
     <div id="control_wrapper">
         <div id="container">
             <ej-calendar [min]='minDate' [max]='maxDate' (change)="onValueChange($event)"></ej-calendar>
+            <span id="selected">Selected Value: </span>
         </div>
-        <span id="selected">Selected Value: </span>
     </div>
 </div>
 <div id="description">
     <p>
-        Date Range sample illustrates the date selection within a specific range in a calendar by using <code>min</code> and <code>max</code> properties.
+        Date Range sample illustrates the date selection within a specific range in a calendar by using <code>min</code>        and <code>max</code> properties.
     </p>
     <p>
         Here, the date selection range was resricted within 5/5/2017 - 5/27/2017.
     </p>
     <p>More information on the date range restriction can be found in this
-        <a href="http://ej2.syncfusion.com/angular/documentation/calendar/getting-started.html" target="_blank"> documentation section</a>.</p>
+        <a href="http://ej2.syncfusion.com/angular/documentation/calendar/date-range.html" target="_blank"> documentation section</a>.</p>
 </div>