IMCalendar

依存関係

info

Smartlimeは全てのProviderを包括しているため、Smartlimeが配置されている場合にはこの項目の内容は無視することができます。

IMCalendarはIMOAuthとIMMeに依存しています。
IMCalendarを利用する場合は、常にIMOAuthとIMMeを合わせて配置してください。

import { IMTenant, IMOAuth, IMMe, useIMFetch } from "@intra-mart/smartlime";
import { DefaultAuthScreen, IMCalendar } 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>
              <IMCalendar />
            </DefaultAuthScreen>
            <IMMe>
        </IMOAuth>;
    </IMTenant>
  )
}

caution

IMCalendar内部で利用されるアクセストークンはIMOAuthあるいはSmartlimeから取得されます
このためIMCalendarは常にIMOAuthあるいはSmartlimeにネストされたコンポーネントでOAuthの認可が完了している必要があります。

IMCalendar内部で利用されるプロファイルはIMMeあるいはSmartlimeから取得されます
このためIMCalendarは常にIMMeあるいはSmartlimeにネストされたコンポーネントでプロファイル情報の取得が完了している必要があります。

これらのProviderが上位層に存在しない場合、IMCalendarは常にエラーを返します。

Example Usage

コンポーネント上にカレンダーを組み込みたい場合に利用する事を想定しています。 もしあなたがモーダルでカレンダーを呼び出したい場合はIMCalendar Providerの利用を検討してください。

import { IMCalendar } from "@intra-mart/smartlime";

const App = () => {
  const onPress = (day: IMDay) => {
    console.log(day);
  };

  return (
    <View>
      <IMCalendar
        onDayPress={onPress}
      />
    </View>
  )
}

Props

Name	Type	Required
onDayPress	function	no
defaultDate	string	no
maxDate	string	no
minDate	string	no
calendarId	string	no
calendarContext	Context	no

onDayPress

• 日付が押下された場合に呼び出されます。
• 引数としてIMDay形式のオブジェクトが渡ってきます。

defaultDate

• YYYY-MM-DD形式の文字列です。
• 初期表示する日付を指定できます。
• 指定しない場合、端末上の日付になります。

maxDate

• YYYY-MM-DD形式の文字列です。
• 有効となる日付を指定できます。
• 指定された日付より後の日付は無効な表示になります。

minDate

• YYYY-MM-DD形式の文字列です。
• 有効となる日付を指定できます。
• 指定された日付より前の日付は無効な表示になります。

calendarId

• 適用するカレンダーのIDを指定できます。
• 指定しない場合、iAP上でのユーザ事の設定に基づいて選択されます。
• カレンダーの設定

calendarContext

• context instanceを設定します。
• このPropを設定した場合、ネストされたコンポーネント全てで同じcontextを利用しなければならない事に注意してください。
• あなたがcontextについて詳しく知らない場合このオプションは利用するべきではありません。

IMDay

interface IMDay {
  day: ExtendedFormatDate;
  raw: DayInfoSummary;
}

day

• 押下された日付のYYYY-MM-DD形式の文字列です。

raw

• 押下された日付の詳細な情報です。
• iAPから返された日付に関する情報が直接格納されます。