feature(EJ2-3069): Calendar plunker support committed

Author: pipeline

src/calendar/default.html

@@ -8,8 +8,10 @@
 </div>
 <div id="description">
     <p>
-        <b>Calendar</b> 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/documentation/calendar/getting-started.html#create-a-simple-calendar" target="_blank"> documentation section</a>.</p>
 </div>
 <style>
     #wrapper {

src/calendar/disabled.html

@@ -8,11 +8,11 @@
 </div>
 <div id="description">
     <p>
-        Disabled Dates sample demonstrates, how to disable a specific dates in a calendar by using <b>renderDayCell</b> 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 <b>args.disabled</b> 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, weekend date's are disabled by setting <code>args.disabled</code> as true.
     </p>
+    <p>More information on the calendar customization can be found in this
+        <a href="http://ej2.syncfusion.com/documentation/calendar/getting-started.html" target="_blank"> documentation section</a>.</p>
 </div>
 <style>
     #date_label {

src/calendar/internationalization-plnkr.json

@@ -18,7 +18,8 @@
                     <select id="cultures" class="form-control">
                         <option value="de">de</option>
                         <option value="en">en</option>
-                        <option value="zh">zh</option> 
+                        <option value="zh">zh</option>
+                        <option value="vi">vi</option> 
                     </select>
                 </div>
             </td>
@@ -27,11 +28,10 @@
 </div>
 <div id="description">
     <p>
-        The calendar control was rendered with <b>German</b> 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>
 </div>
 <style>
     .property-panel-content {

src/calendar/internationalization.html

@@ -1,21 +1,19 @@
 import { Calendar, ChangedEventArgs } from '@syncfusion/ej2-calendars';
 import { loadCldr, Internationalization } from '@syncfusion/ej2-base';
+import * as numberingSystems from '../common/cldr-data/supplemental/numberingSystems.json';
+import * as zhgregorian from '../common/cldr-data/main/zh/ca-gregorian.json';
+import * as zhnumbers from '../common/cldr-data/main/zh/numbers.json';
+import * as degregorian from '../common/cldr-data/main/de/ca-gregorian.json';
+import * as denumbers from '../common/cldr-data/main/de/numbers.json';
+import * as vigregorian from '../common/cldr-data/main/vi/ca-gregorian.json';
+import * as vinumbers from '../common/cldr-data/main/vi/numbers.json';
 /**
  * Internationalization calendar sample
  */
 
 this.default = (): void => {
-    loadCldr(
-        require('../common/cldr-data/supplemental/numberingSystems.json'),
-        require('../common/cldr-data/main/zh/ca-gregorian.json'),
-        require('../common/cldr-data/main/zh/timeZoneNames.json'),
-        require('../common/cldr-data/main/zh/numbers.json'),
-        require('../common/cldr-data/main/zh/currencies.json'),
-        require('../common/cldr-data/main/de/ca-gregorian.json'),
-        require('../common/cldr-data/main/de/timeZoneNames.json'),
-        require('../common/cldr-data/main/de/numbers.json'),
-        require('../common/cldr-data/main/de/currencies.json')
-    );
+    // loadCldr method to load the culture specific JSON file.
+    loadCldr(numberingSystems, zhgregorian, zhnumbers, degregorian, denumbers, vigregorian, vinumbers);
     let calendar: Calendar = new Calendar({
         change: valueChange, locale: 'de', value: new Date()
     });
@@ -34,4 +32,4 @@ this.default = (): void => {
         (<HTMLInputElement>document.getElementById('date_label')).textContent = 'Selected Value: ' + globalize.formatDate(calendar.value);
         calendar.dataBind();
     }
-};
+};

src/calendar/internationalization.ts

@@ -8,11 +8,11 @@
 </div>
 <div id="description">
     <p>
-        Date Range sample illustrates the date selection within a specific range in a calendar by using <b>min</b> and <b>max</b> properties.
-    </p>
-    <p>
-        Here, the date selection range was resricted within 5/5/2017 - 5/27/2017.
+        Date Range sample illustrates the date selection within a specific range in a calendar by using <code>min</code> and <code>max</code> properties. 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/documentation/calendar/getting-started.html#range" target="_blank"> documentation section</a>.</p>
+
 </div>
 <style>
     .control_wrapper #container {

src/calendar/range.html

@@ -1 +1 @@
-{"index.ts":"import { Calendar, RenderDayCellEventArgs, ChangedEventArgs } from '@syncfusion/ej2-calendars';\n/**\n * Special calendar sample\n */\n\n\n    let calendar: Calendar = new Calendar({\n        renderDayCell: customDates, change: valueChange\n    });\n    calendar.appendTo('#calendar');\n\nfunction customDates(args: RenderDayCellEventArgs): void {\n    if (args.date.getDate() === 10) {\n        let span: HTMLElement;\n        span = document.createElement('span');\n        span.setAttribute('class', 'e-icons highlight');\n        args.element.appendChild(span);\n        args.element.setAttribute('title', 'Birthday !');\n        args.element.setAttribute('data-val', 'Birthday !');\n    }\n    if (args.date.getDate() === 15) {\n        args.element.className = 'special';\n        args.element.setAttribute('title', 'Farewell');\n        args.element.setAttribute('data-val', 'Farewell !');\n    }\n    if (args.date.getDate() === 20) {\n        args.element.className = 'daycell';\n    }\n}\nfunction valueChange(args: ChangedEventArgs): void {\n    let title: string = (<HTMLElement>event.currentTarget).querySelector('.e-link').getAttribute('data-val');\n    title = title == null ? '' : ' ( ' + title + ' )';\n    (<HTMLInputElement>document.getElementById('date_label')).textContent = 'Selected Value: ' + args.value.toLocaleDateString() + title;\n}","index.html":"<html><head>\n    <link href=\"http://ej2ci.syncfusion.com/production/demos/styles/material.css\" rel=\"stylesheet\">\n    <script src=\"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js\"></script>\n    <script src=\"systemjs.config.js\"></script>\n</head>\n<body>\n<div class=\"col-lg-12 control-section\">\n    <div class=\"control_wrapper\">\n        <div id=\"container\">\n            <div id=\"calendar\"></div><br>\n        </div>\n        <span id=\"date_label\"> Selected Value: </span>\n    </div>\n</div>\n\n<style>\n    .control_wrapper #container {\n        min-height: 310px;\n    }\n    \n    .e-bigger .control_wrapper #container {\n        min-height: 400px;\n    }\n    \n    #date_label {\n        display: block;\n        width: 248px;\n        color: rgba(0, 0, 0, 0.58);\n    }\n    \n    .control_wrapper {\n        max-width: 350px;\n        margin: 0 auto;\n    }\n    \n    span.e-icons.highlight {\n        margin-top: -13px;\n        display: block;\n        margin-left: 4px;\n    }\n    \n    span.e-icons.highlight,\n    span.e-icons.highlight:before {\n        color: rgb(0, 0, 255);\n    }\n    \n    span.e-icons.highlight:before {\n        content: \"\\e865\";\n        vertical-align: middle;\n        margin-right: 3px;\n        font-size: 4px;\n        position: relative;\n        top: -1px;\n        font-weight: normal;\n    }\n    \n    .e-bigger.e-calendar span.e-icons.highlight:before,\n    .e-bigger .e-calendar span.e-icons.highlight:before {\n        top: -3px;\n    }\n    \n    .e-selected span.e-icons.highlight:before {\n        color: #fff;\n    }\n    \n    span.e-icons.highlight,\n    .e-calendar .e-content span.special,\n    .e-calendar .e-content span.daycell {\n        font-weight: bold;\n    }\n    \n    .e-calendar .e-content span.special {\n        color: red;\n    }\n    \n    .e-calendar .e-content span.daycell {\n        color: #ff9e00;\n    }\n</style>\n\n</body></html>","systemjs.config.js":"System.config({\n    transpiler: \"typescript\",\n    typescriptOptions: {\n        compilerOptions: {\n            target: \"umd\",\n            module: \"commonjs\",\n            moduleResolution: \"node\",\n            emitDecoratorMetadata: true,\n            experimentalDecorators: true\n        }\n    },\n    paths: {\n        \"syncfusion:\": \"http://ej2ci.syncfusion.com/packages/production/\"\n    },\n    map: {\n        main: \"index.ts\",\n        typescript: \"https://unpkg.com/[email protected]/lib/typescript.js\",\n        'plugin-json':'https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js',\n        \"@syncfusion/ej2-base\": \"syncfusion:ej2-base/dist/ej2-base.umd.min.js\",\n        \"@syncfusion/ej2-buttons\": \"syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js\",\n        \"@syncfusion/ej2-calendars\": \"syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js\",\n        \"@syncfusion/ej2-charts\": \"syncfusion:ej2-charts/dist/ej2-charts.umd.min.js\",\n        \"@syncfusion/ej2-data\": \"syncfusion:ej2-data/dist/ej2-data.umd.min.js\",\n        \"@syncfusion/ej2-grids\": \"syncfusion:ej2-grids/dist/ej2-grids.umd.min.js\",        \n        \"@syncfusion/ej2-inputs\": \"syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js\",        \n        \"@syncfusion/ej2-lists\": \"syncfusion:ej2-lists/dist/ej2-lists.umd.min.js\",\n        \"@syncfusion/ej2-navigations\": \"syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js\",        \n        \"@syncfusion/ej2-popups\": \"syncfusion:ej2-popups/dist/ej2-popups.umd.min.js\",  \n        \"@syncfusion/ej2-circulargauge\": \"syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js\",      \n    },\n     meta: { \n       '*.json': { loader: 'plugin-json' }\n    }\n});\n\nSystem.import('index.ts').catch(console.error.bind(console));"}
+{"index.ts":"import { Calendar, RenderDayCellEventArgs, ChangedEventArgs } from '@syncfusion/ej2-calendars';\n/**\n * Special calendar sample\n */\n\n\n    let calendar: Calendar = new Calendar({\n        renderDayCell: customDates, change: valueChange\n    });\n    calendar.appendTo('#calendar');\n\nfunction customDates(args: RenderDayCellEventArgs): void {\n    if (args.date.getDate() === 10) {\n        let span: HTMLElement;\n        span = document.createElement('span');\n        span.setAttribute('class', 'e-icons highlight');\n        args.element.appendChild(span);\n        args.element.setAttribute('title', 'Birthday !');\n        args.element.setAttribute('data-val', 'Birthday !');\n    }\n    if (args.date.getDate() === 15) {\n        args.element.className = 'special';\n        args.element.setAttribute('title', 'Farewell');\n        args.element.setAttribute('data-val', 'Farewell !');\n    }\n    if (args.date.getDate() === 20) {\n        args.element.className = 'daycell';\n    }\n}\nfunction valueChange(args: ChangedEventArgs): void {\n    let title: string = (<HTMLElement>event.currentTarget).querySelector('.e-day').getAttribute('data-val');\n    title = title == null ? '' : ' ( ' + title + ' )';\n    (<HTMLInputElement>document.getElementById('date_label')).textContent = 'Selected Value: ' + args.value.toLocaleDateString() + title;\n}","index.html":"<html><head>\n    <link href=\"http://ej2ci.syncfusion.com/production/demos/styles/material.css\" rel=\"stylesheet\">\n    <script src=\"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js\"></script>\n    <script src=\"systemjs.config.js\"></script>\n</head>\n<body>\n<div class=\"col-lg-12 control-section\">\n    <div class=\"control_wrapper\">\n        <div id=\"container\">\n            <div id=\"calendar\"></div><br>\n        </div>\n        <span id=\"date_label\"> Selected Value: </span>\n    </div>\n</div>\n\n<style>\n    .control_wrapper #container {\n        min-height: 310px;\n    }\n    \n    .e-bigger .control_wrapper #container {\n        min-height: 400px;\n    }\n    \n    #date_label {\n        display: block;\n        width: 248px;\n        color: rgba(0, 0, 0, 0.58);\n    }\n    \n    .control_wrapper {\n        max-width: 350px;\n        margin: 0 auto;\n    }\n    \n    span.e-icons.highlight {\n        margin-top: -13px;\n        display: block;\n        margin-left: 4px;\n    }\n    \n    span.e-icons.highlight,\n    span.e-icons.highlight:before {\n        color: rgb(0, 0, 255);\n    }\n    \n    span.e-icons.highlight:before {\n        content: \"\\e865\";\n        vertical-align: middle;\n        margin-right: 3px;\n        font-size: 4px;\n        position: relative;\n        top: -1px;\n        font-weight: normal;\n    }\n    \n    .e-bigger.e-calendar span.e-icons.highlight:before,\n    .e-bigger .e-calendar span.e-icons.highlight:before {\n        top: -3px;\n    }\n    \n    .e-selected span.e-icons.highlight:before {\n        color: #fff;\n    }\n    \n    span.e-icons.highlight,\n    .e-calendar .e-content span.special,\n    .e-calendar .e-content span.daycell {\n        font-weight: bold;\n    }\n    \n    .e-calendar .e-content span.special {\n        color: red;\n    }\n    \n    .e-calendar .e-content span.daycell {\n        color: #ff9e00;\n    }\n</style>\n\n</body></html>","systemjs.config.js":"System.config({\n    transpiler: \"typescript\",\n    typescriptOptions: {\n        compilerOptions: {\n            target: \"umd\",\n            module: \"commonjs\",\n            moduleResolution: \"node\",\n            emitDecoratorMetadata: true,\n            experimentalDecorators: true\n        }\n    },\n    paths: {\n        \"syncfusion:\": \"http://ej2ci.syncfusion.com/packages/production/\"\n    },\n    map: {\n        main: \"index.ts\",\n        typescript: \"https://unpkg.com/[email protected]/lib/typescript.js\",\n        'plugin-json':'https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js',\n        \"@syncfusion/ej2-base\": \"syncfusion:ej2-base/dist/ej2-base.umd.min.js\",\n        \"@syncfusion/ej2-buttons\": \"syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js\",\n        \"@syncfusion/ej2-calendars\": \"syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js\",\n        \"@syncfusion/ej2-charts\": \"syncfusion:ej2-charts/dist/ej2-charts.umd.min.js\",\n        \"@syncfusion/ej2-data\": \"syncfusion:ej2-data/dist/ej2-data.umd.min.js\",\n        \"@syncfusion/ej2-grids\": \"syncfusion:ej2-grids/dist/ej2-grids.umd.min.js\",        \n        \"@syncfusion/ej2-inputs\": \"syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js\",        \n        \"@syncfusion/ej2-lists\": \"syncfusion:ej2-lists/dist/ej2-lists.umd.min.js\",\n        \"@syncfusion/ej2-navigations\": \"syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js\",        \n        \"@syncfusion/ej2-popups\": \"syncfusion:ej2-popups/dist/ej2-popups.umd.min.js\",  \n        \"@syncfusion/ej2-circulargauge\": \"syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js\",      \n    },\n     meta: { \n       '*.json': { loader: 'plugin-json' }\n    }\n});\n\nSystem.import('index.ts').catch(console.error.bind(console));"}

src/calendar/special-plnkr.json

@@ -8,9 +8,11 @@
 </div>
 <div id="description">
     <p>
-        Special Dates sample demonstrates, how to customize a specific dates in a calendar by using <b>renderDayCell</b> event. This event gets triggered on each day cell element creation that allows you to customize or disable the specific dates in calendar.
+        Special Dates sample demonstrates, how to customize 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 10, 15 and 20 date's are customized with custom styles and custom classes.
     </p>
-    <p>Here 10, 15 and 20 date's are customized with custom styles and custom classes. </p>
+    <p>More information on the calendar customization can be found in this
+        <a href="http://ej2.syncfusion.com/documentation/calendar/getting-started.html" target="_blank"> documentation section</a>.</p>
 </div>
 <style>
     .control_wrapper #container {

src/calendar/special.html

@@ -28,7 +28,7 @@ function customDates(args: RenderDayCellEventArgs): void {
     }
 }
 function valueChange(args: ChangedEventArgs): void {
-    let title: string = (<HTMLElement>event.currentTarget).querySelector('.e-link').getAttribute('data-val');
+    let title: string = (<HTMLElement>event.currentTarget).querySelector('.e-day').getAttribute('data-val');
     title = title == null ? '' : ' ( ' + title + ' )';
     (<HTMLInputElement>document.getElementById('date_label')).textContent = 'Selected Value: ' + args.value.toLocaleDateString() + title;
 }