Skip to content

Commit

Permalink
feature(EJ2-3069): Calendar plunker support committed
Browse files Browse the repository at this point in the history
  • Loading branch information
pipeline committed Aug 3, 2017
1 parent 2102c8e commit 59ae9c2
Show file tree
Hide file tree
Showing 9 changed files with 33 additions and 31 deletions.
4 changes: 3 additions & 1 deletion src/calendar/default.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
8 changes: 4 additions & 4 deletions src/calendar/disabled.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
2 changes: 1 addition & 1 deletion src/calendar/internationalization-plnkr.json
View file

Large diffs are not rendered by default.

10 changes: 5 additions & 5 deletions src/calendar/internationalization.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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 {
Expand Down
22 changes: 10 additions & 12 deletions src/calendar/internationalization.ts
View file
Original file line number Diff line number Diff line change
@@ -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()
});
Expand All @@ -34,4 +32,4 @@ this.default = (): void => {
(<HTMLInputElement>document.getElementById('date_label')).textContent = 'Selected Value: ' + globalize.formatDate(calendar.value);
calendar.dataBind();
}
};
};
8 changes: 4 additions & 4 deletions src/calendar/range.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
2 changes: 1 addition & 1 deletion src/calendar/special-plnkr.json
View file
Original file line number Diff line number Diff line change
@@ -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/typescript@2.2.2/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/typescript@2.2.2/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));"}
6 changes: 4 additions & 2 deletions src/calendar/special.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
2 changes: 1 addition & 1 deletion src/calendar/special.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

0 comments on commit 59ae9c2

Please sign in to comment.