IMCalendar Provider
依存関係
IMCalendarはIMOAuthとIMMeに依存しています。
IMCalendarを利用する場合は、常にIMOAuthとIMMeを合わせて配置してください。
import { IMTenant, IMOAuth, IMMe, useIMFetch } from "@intra-mart/smartlime";
import { DefaultAuthScreen, IMCalendarProvider } from "@intra-mart/smartlime-ui";
const App = () => {
return (
<IMTenant
baseUrl={'https://example.org/imart'}
tenantId={'default'}
>
<IMOAuth
requestConfig={
clientId: 'exampleId',
clientSecret: 'exampleSecret',
scopes: ['exampleScope'],
redirectUri: 'exp://example.org:19000',
}
>
<IMMe>
<DefaultAuthScreen>
<IMCalendarProvider />
</DefaultAuthScreen>
<IMMe>
</IMOAuth>;
</IMTenant>
)
}
IMCalendar内部で利用されるアクセストークンはIMOAuthあるいはSmartlimeから取得されます
このためIMCalendarは常にIMOAuthあるいはSmartlimeにネストされたコンポーネントでOAuthの認可が完了している必要があります。
IMCalendar内部で利用されるプロファイルはIMMeあるいはSmartlimeから取得されます
このためIMCalendarは常にIMMeあるいはSmartlimeにネストされたコンポーネントでプロファイル情報の取得が完了している必要があります。
これらのProviderが上位層に存在しない場合、IMCalendarは常にエラーを返します。
Provider
このProviderはネストされたコンポーネントでIMCalendarの機能を利用できるようにします。
hooksを利用して、モーダルのカレンダーを呼び出す事を想定しています。
もしあなたが自身のコンポーネント上にカレンダーを組み込みたい場合はIMCalendarの利用を検討してください。
import { IMCalendarProvider } from "@intra-mart/smartlime";
const App = () => {
return (
<IMCalendarProvider >
{/* content */}
</IMCalendarProvider >;
)
}
Props
Name | Type | Required |
---|---|---|
defaultDate | string | no |
maxDate | string | no |
minDate | string | no |
calendarId | string | no |
calendarContext | Context | no |
defaultDate
YYYY-MM-DD
形式の文字列です。
初期表示する日付を指定できます。
指定しない場合、端末上の日付になります。
maxDate
YYYY-MM-DD
形式の文字列です。
有効となる日付を指定できます。
指定された日付より後の日付は無効な表示になります。
minDate
YYYY-MM-DD
形式の文字列です。
有効となる日付を指定できます。
指定された日付より前の日付は無効な表示になります。
calendarId
適用するカレンダーのIDを指定できます。
指定しない場合、iAP上でのユーザ事の設定に基づいて選択されます。
カレンダーの設定
calendarContext
context instanceを設定します。
このPropを設定した場合、ネストされたコンポーネント全てで同じcontextを利用しなければならない事に注意してください。
あなたがcontextについて詳しく知らない場合このオプションは利用するべきではありません。