@@ -136,7 +136,6 @@ defineComponents(IgcCalendarComponent);
136136
137137{ProductName} Calendar コンポーネントを使用すると、日、月、年の 3 つの異なるビューを切り替えることができます。コンポーネントの ` ActiveView ` プロパティは、現在のビューを反映します。デフォルトでは、Calendar は最初に読み込まれたときに現在の日付を表示します。これは、` ActiveDate ` プロパティを設定することで変更できます。` ActiveDate ` プロパティは、エンド ユーザーが現在表示している日付の変更も反映します。
138138
139- <!-- WebComponents -->
140139
141140### ヘッダー オプション
142141
@@ -156,15 +155,23 @@ defineComponents(IgcCalendarComponent);
156155</igc-calendar >
157156```
158157
159- 次のサンプルは、上記の構成を示しています:
160-
161- ` sample="/scheduling/calendar/header", height="370", alt="{Platform} Calendar ヘッダーの例" `
158+ ``` tsx
159+ <IgrCalendar selection = " range" headerOrientation = " vertical"
160+ <span slot = " title" span >
161+ </IgrCalendar
162+ ```
162163
164+ ``` razor
165+ <IgbCalendar HeaderOrientation="@CalendarHeaderOrientation.Vertical" HasHeader="true">
166+ <span slot="title">Trip dates</span>
167+ </IgbCalendar>
168+ ```
163169
170+ 次のサンプルは、上記の構成を示しています:
164171
165- <!-- end: WebComponents -->
172+ ` sample="/scheduling/calendar/header", height="370", alt="{Platform} Calendar ヘッダーの例" `
166173
167- <!-- WebComponents -->
174+ <!-- WebComponents, React -->
168175
169176### ローカライズおよび書式設定
170177
@@ -205,21 +212,60 @@ this.radios.forEach(radio => {
205212})
206213```
207214
208- すべて適切に設定できると、カスタマイズされた表示の Calendar ができあがります。これにより、ユーザーの選択に基づいてロケールの表現も変更されます。以下は結果です:
215+ ``` tsx
216+ <IgrRadioGroup alignment = " horizontal" value = { this .state .calendarLocale } >
217+ <IgrRadio name = " lang" value = " en" checked = { true } onChange = { this .onRadioChange } >
218+ <span >EN</span >
219+ </IgrRadio
220+ <IgrRadio name = " lang" value = " de" onChange = { this .onRadioChange } >
221+ <span >DE</span >
222+ </IgrRadio
223+ <IgrRadio name = " lang" value = " fr" onChange = { this .onRadioChange } >
224+ <span >FR</span >
225+ </IgrRadio
226+ <IgrRadio name = " lang" value = " ar" onChange = { this .onRadioChange } >
227+ <span >AR</span >
228+ </IgrRadio
229+ <IgrRadio name = " lang" value = " ja" onChange = { this .onRadioChange } >
230+ <span >JA</span >
231+ </IgrRadio
232+ </IgrRadioGroup
233+
234+ <IgrCalendar weekStart = ' monday' formatOptions = { this .state .calendarFormat }
235+ locale = { this .state .calendarLocale }
236+ value = { new Date ()} />
237+ ```
209238
210- ` sample="/scheduling/calendar/formatting", height="520", alt="{Platform} Calendar 書式設定の例" `
239+ ``` tsx
240+ constructor (props : any ) {
241+ super (props );
242+ this .onRadioChange = this .onRadioChange .bind (this );
243+ const : IgrCalendarFormatOptions = {
244+ month: ' short'
245+ weekday: ' short'
246+ }
247+ this .state = { calendarLocale: " en" formatOptions };
248+ }
211249
250+ public onRadioChange (e : any ) {
251+ if (e .detail .checked ) {
252+ this .setState ({ calendarLocale: e .detail .value });
253+ }
254+ }
255+ ```
212256
257+ すべて適切に設定できると、カスタマイズされた表示の Calendar ができあがります。これにより、ユーザーの選択に基づいてロケールの表現も変更されます。以下は結果です:
213258
214- <!-- end: WebComponents -->
259+ ` sample="/scheduling/calendar/formatting", height="520", alt="{Platform} Calendar 書式設定の例" `
215260
216- <!-- WebComponents -->
261+ <!-- end: WebComponents, React -->
217262
218263### 日付の無効化
219264
220265場合によっては、エンド ユーザーが選択できない Calendar の日付を無効にしたいことがあります。この機能は、` DisabledDates ` プロパティを使用して実現されます。` DisabledDates ` プロパティは、` DateRangeDescriptor ` オブジェクトの配列です。各記述子には ` Type ` があり、オプションで ` Date ` オブジェクトの配列である ` DateRange ` があります。
221266
222267` Type ` プロパティで使用できるオプションは次のとおりです:
268+
223269- ` After ` - ` DateRange ` の最初の日付以降の日付を無効にします。
224270- ` Before ` - ` DateRange ` の最初の日付より前の日付を無効にします。
225271- ` Between ` - ` DateRange ` の最初の日付と 2 番目の日付の間の日付を無効にします。
@@ -239,15 +285,47 @@ const range = [
239285this .calendar .disabledDates = [{ type: DateRangeType .Between , dateRange: range }];
240286```
241287
242- これらの構成では、次の結果が得られます:
288+ ``` tsx
289+ <IgrCalendar disabledDates = { this .state .disabledDates } />
290+ ```
243291
244- ` sample="/scheduling/calendar/disabled-dates", height="480", alt="{Platform} Calendar 無効な日付の例" `
292+ ``` tsx
293+ const = new Date ();
294+ const = [
295+ new Date (today .getFullYear (), today .getMonth (), 3 ),
296+ new Date (today .getFullYear (), today .getMonth (), 8 )
297+ ];
298+ const : DateRangeDescriptor = {
299+ dateRange: range ,
300+ type: DateRangeType .Specific ,
301+ }
302+ const = [desc ];
303+ this .state = { disabledDates };
304+ ```
245305
306+ ``` razor
307+ <IgbCalendar DisabledDates="@DisabledDateDescriptor" />
246308
309+ @code {
310+ public IgbDateRangeDescriptor[] DisabledDateDescriptor { get; set; }
247311
248- <!-- end: WebComponents -->
312+ protected override void OnInitialized()
313+ {
314+ var today = DateTime.Today;
315+
316+ DateTime[] range = new DateTime[] { new DateTime(today.Year, today.Month, 3), new DateTime(today.Year, today.Month, 8) };
317+
318+ IgbDateRangeDescriptor dateDescriptor = new IgbDateRangeDescriptor() { DateRange = range, RangeType = DateRangeType.Specific };
319+
320+ this.DisabledDateDescriptor = new IgbDateRangeDescriptor[] { dateDescriptor };
321+ }
322+ }
323+ ```
324+
325+ これらの構成では、次の結果が得られます:
326+
327+ ` sample="/scheduling/calendar/disabled-dates", height="480", alt="{Platform} Calendar 無効な日付の例" `
249328
250- <!-- WebComponents -->
251329
252330### 特定の日付
253331
@@ -265,13 +343,50 @@ const range = [
265343this .calendar .specialDates = [{ type: DateRangeType .Between , dateRange: range }];
266344```
267345
268- 次のデモは、休暇申請オプション付きの Calendar を示しています。
346+ ``` tsx
347+ <IgrCalendar specialDates = { this .state .specialDates } />
348+ ```
269349
270- ` sample="/scheduling/calendar/special-dates", height="480", alt="{Platform} Calendar 特定の日付の例" `
350+ ``` tsx
351+ const = new Date ();
352+ const = [
353+ new Date (today .getFullYear (), today .getMonth (), 3 ),
354+ new Date (today .getFullYear (), today .getMonth (), 8 )
355+ ]
356+ const : DateRangeDescriptor = {
357+ dateRange: range ,
358+ type: DateRangeType .Between ,
359+ }
360+ const = [desc ]
361+ this .state = { specialDates };
362+ ```
271363
364+ ``` razor
365+ <IgbCalendar SpecialDates="@CalendarSpecialDates"/>
272366
367+ @code {
368+
369+ private IgbDateRangeDescriptor[] CalendarSpecialDates { get; set; }
370+
371+ protected override void OnInitialized()
372+ {
373+ DateTime today = DateTime.Today;
374+ IgbDateRangeDescriptor specialDates = new IgbDateRangeDescriptor()
375+ {
376+ DateRange = new[] { new DateTime(today.Year, today.Month, 3), new DateTime(today.Year, today.Month, 8) },
377+ RangeType = DateRangeType.Between
378+ };
379+
380+ this.CalendarSpecialDates = new IgbDateRangeDescriptor[] { specialDates };
381+ }
382+ }
383+
384+ ```
385+
386+ 次のデモは、休暇申請オプション付きの Calendar を示しています。
387+
388+ ` sample="/scheduling/calendar/special-dates", height="480", alt="{Platform} Calendar 特定の日付の例" `
273389
274- <!-- end: WebComponents -->
275390
276391### 週番号
277392
@@ -368,30 +483,37 @@ public onCalendarChange(e: IgrComponentDataValueChangedEventArgs) {
368483- アクティブな日付要素
369484
370485` Calendar ` コンポーネントの** 日/月/年** がフォーカスされている場合は、次を使用します:
486+
371487- <kbd >PAGE UP</kbd > キーを押すと、前の月/年のページに移動します。
372488- <kbd >PAGE DOWN</kbd > キーを押すと、次の月/年のページに移動します。
373489- <kbd >HOME</kbd > キーを使用して、現在の月の最初の日/最初の月を表示/最初の年を表示します。
374490- <kbd >END</kbd > キーを押すと、当月/先月/昨年の最終日にフォーカスされます。
375491- <kbd >矢印</kbd > キーを使用して、日/月/年をナビゲートします。最初の項目の前と最後の項目の後に移動すると、ビューが次/前の月/年のページに切り替わります。
376492
377493` days ` ビュー内の** 日** がフォーカスされている場合は、次を使用します:
494+
378495- <kbd >SHIFT</kbd > + <kbd >PAGE UP</kbd > キーで前年に移動します。
379496- <kbd >SHIFT</kbd > + <kbd >PAGE DOWN</kbd > キーを押して翌年に移動します。
380497- <kbd >SPACE</kbd > または <kbd >ENTER</kbd > キーを押して、現在フォーカスされている日を選択します。
381498
382499` months ` ビュー内の** 月** がフォーカスされている場合は、次を使用します:
500+
383501- <kbd >SPACE</kbd > または <kbd >ENTER</kbd > キーを押すと、` ActiveDate ` が現在フォーカスされている月に変更され、` days ` ビューに切り替わります。
384502
385503` years ` ビュー内の** 年** がフォーカスされている場合は、次を使用します:
504+
386505- <kbd >SPACE</kbd > または <kbd >ENTER</kbd > キーを使用して、` ActiveDate ` を現在フォーカスされている年に変更し、` months ` ビューに切り替えます。
387506
388507サブヘッダー内の** 前** または** 次** のボタンにフォーカスがある場合は、次を使用します:
508+
389509- <kbd >SPACE</kbd > または <kbd >ENTER</kbd > キーを押すと、前/翌月/年のページに切り替わります。
390510
391511サブヘッダー内の** 月** ボタンにフォーカスがある場合は、次を使用します:
512+
392513- <kbd >SPACE</kbd > または <kbd >ENTER</kbd > キーを押して、` months ` ビューに切り替えます。
393514
394515サブヘッダー内の** 年** ボタンにフォーカスがある場合は、次を使用します:
516+
395517- <kbd >SPACE</kbd > または <kbd >ENTER</kbd > キーを押して、` years ` ビューに切り替えます。
396518
397519## スタイル設定
0 commit comments