質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Ionic

Ionicは、クロスプラットフォームに対応したモバイルアプリ開発のためのオープンソースUIフレームワークです。iOSやAndroid、Webのアプリケーションを1つのコードベースで開発できます。

Angular

Angularは、JavaScriptフレームワークです。AngularJSの後継であり、TypeScriptベースで実装されています。機能ごとに実装を分けやすく、コードの見通しが良いコンポーネント指向です。

Q&A

解決済

1回答

1485閲覧

ionicカレンダーアプリを日本語にしたい。

Gento

総合スコア77

Ionic

Ionicは、クロスプラットフォームに対応したモバイルアプリ開発のためのオープンソースUIフレームワークです。iOSやAndroid、Webのアプリケーションを1つのコードベースで開発できます。

Angular

Angularは、JavaScriptフレームワークです。AngularJSの後継であり、TypeScriptベースで実装されています。機能ごとに実装を分けやすく、コードの見通しが良いコンポーネント指向です。

0グッド

0クリップ

投稿2019/08/15 04:13

前提・実現したいこと

ionic2-calendarを使ってカレンダーアプリを製作しており、それを日本語化したいです。

試したこと

こちらのAngular公式ドキュメントを参考にしましたが、下記のエラーが発生しました。

import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { RouteReuseStrategy } from '@angular/router'; import { IonicModule, IonicRouteStrategy } from '@ionic/angular'; import { SplashScreen } from '@ionic-native/splash-screen/ngx'; import { StatusBar } from '@ionic-native/status-bar/ngx'; import { AppComponent } from './app.component'; import { AppRoutingModule } from './app-routing.module'; import { NgCalendarModule } from 'ionic2-calendar'; import { LOCALE_ID } from '@angular/core'; @NgModule({ declarations: [AppComponent], entryComponents: [], imports: [ BrowserModule, IonicModule.forRoot(), AppRoutingModule, NgCalendarModule], providers: [ StatusBar, SplashScreen, { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }, { provide: LOCALE_ID, useValue: 'ja-JP' } ], bootstrap: [AppComponent] }) export class AppModule {}

今度はionic2-calendarのドキュメントにあった様に

イメージ説明

calendar = { mode: 'month', locale: 'ja-JP' };

を追加しましたが、同じエラーでした。

発生している問題・エラーメッセージ

core.js:9110 ERROR Error: Uncaught (in promise): Error: InvalidPipeArgument: 'Missing locale data for the locale "ja-JP".' for pipe 'DatePipe' Error: InvalidPipeArgument: 'Missing locale data for the locale "ja-JP".' for pipe 'DatePipe' at invalidPipeArgumentError (common.js:5624) at DatePipe.transform (common.js:6764) at MonthViewComponent.formatDayHeaderLabel (monthview.js:45) at MonthViewComponent.push../node_modules/ionic2-calendar/monthview.js.MonthViewComponent.getViewData (monthview.js:174) at CalendarService.push../node_modules/ionic2-calendar/calendar.service.js.CalendarService.populateAdjacentViews (calendar.service.js:103) at MonthViewComponent.push../node_modules/ionic2-calendar/monthview.js.MonthViewComponent.refreshView (monthview.js:329) at MonthViewComponent.push../node_modules/ionic2-calendar/monthview.js.MonthViewComponent.ngOnInit (monthview.js:63) at checkAndUpdateDirectiveDynamic (core.js:27821) at checkAndUpdateNodeDynamic (core.js:38494) at checkAndUpdateNode (core.js:38414) at resolvePromise (zone-evergreen.js:797) at resolvePromise (zone-evergreen.js:754) at zone-evergreen.js:858 at ZoneDelegate.invokeTask (zone-evergreen.js:391) at Object.onInvokeTask (core.js:34182) at ZoneDelegate.invokeTask (zone-evergreen.js:390) at Zone.runTask (zone-evergreen.js:168) at drainMicroTaskQueue (zone-evergreen.js:559)
ERROR TypeError: Cannot read property 'dayHeaders' of undefined

補足情報(FW/ツールのバージョンなど)

ionic info

Ionic: Ionic CLI : 5.2.3 (/usr/local/lib/node_modules/ionic) Ionic Framework : @ionic/angular 4.7.1 @angular-devkit/build-angular : 0.801.3 @angular-devkit/schematics : 8.1.3 @angular/cli : 8.1.3 @ionic/angular-toolkit : 2.0.0 Utility: cordova-res : 0.6.0 native-run : 0.2.8 System: NodeJS : v10.15.1 (/usr/local/bin/node) npm : 6.4.1 OS : macOS Mojave

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

こちらを参考に解決しました。

また、ionic2-calendarのドキュメントのLocalizationの項目に以下の内容がありました。

For version 0.4.x+ which depends on Ionic 3.9.2+ and Angular 5.0+, locale module needs to be registered explicitly in module file as below.

import { registerLocaleData } from '@angular/common'; import localeZh from '@angular/common/locales/zh'; registerLocaleData(localeZh);

その為、app.module.tsを

import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { RouteReuseStrategy } from '@angular/router'; import { IonicModule, IonicRouteStrategy } from '@ionic/angular'; import { SplashScreen } from '@ionic-native/splash-screen/ngx'; import { StatusBar } from '@ionic-native/status-bar/ngx'; import { AppComponent } from './app.component'; import { AppRoutingModule } from './app-routing.module'; import { NgCalendarModule } from 'ionic2-calendar'; import { LOCALE_ID } from '@angular/core'; import { registerLocaleData } from '@angular/common'; import localeJa from '@angular/common/locales/ja'; registerLocaleData(localeJa); @NgModule({ declarations: [AppComponent], entryComponents: [], imports: [ BrowserModule, IonicModule.forRoot(), AppRoutingModule, NgCalendarModule], providers: [ StatusBar, SplashScreen, { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }, { provide: LOCALE_ID, useValue: 'ja-JP' } ], bootstrap: [AppComponent] }) export class AppModule {}

としてやると、日本語になりました。

home.page.tsの

calendar = { mode: 'month', locale: 'ja-JP' };

は無くても日本語になりました。。。

home.page.htmlの

<calendar ... [locale]="calendar.locale"></calendar>

も無くてOKでした。。。。

投稿2019/08/15 04:22

Gento

総合スコア77

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問