메인 콘텐츠로 건너뛰기
플러그인으로 돌아가기
@capgo/capacitor-calendar
튜토리얼
@capgo/capacitor-calendar

캘린더

iOS 및 Android에서 네이티브 캘린더 이벤트 관리, iOS 알림 지원

데모

움직이는 WebP 데모

iOS 및 Android에서 네이티브 캘린더 이벤트 생성, 움직이는 WebP 데모로 내보내기.

원본 자산
iOS native 캘린더 이벤트 생성 데모
iOS 캘린더 이벤트 생성
안드로이드 native 캘린더 이벤트 생성 데모
안드로이드 캘린더 이벤트 생성

안내

캘린더 튜토리얼

장치 테스트

다운로드 Capgo 앱, 그리고 QR code 스캔.

캘린더 플러그인 미리보기 QR code

Using @capgo/capacitor-calendar

@capgo/capacitor-calendar Capacitor 앱은 iOS 및 Android에서 네이티브 캘린더 이벤트를 관리할 수 있는 패키지를 제공합니다. iOS 및 Android에서 캘린더 권한을 요청할 수 있으며 이벤트를 생성, 편집, 네이티브 캘린더 UI를 열 수 있으며 캘린더 및 이벤트 목록을 관리할 수 있습니다. iOS에서만 알림을 관리할 수 있습니다.

설치

npm install @capgo/capacitor-calendar
npx cap sync

네이티브 권한을 구성합니다

iOS에서 앱이 필요로하는 사용 설명을 추가하세요 ios/App/App/Info.plist:

<key>NSCalendarsUsageDescription</key>
<string>This app needs calendar access.</string>
<key>NSCalendarsWriteOnlyAccessUsageDescription</key>
<string>This app needs permission to add calendar events.</string>
<key>NSCalendarsFullAccessUsageDescription</key>
<string>This app needs permission to read and manage calendar events.</string>
<key>NSRemindersFullAccessUsageDescription</key>
<string>This app needs permission to read and manage reminders.</string>

Android에서 앱이 필요로하는 캘린더 권한을 추가하세요 android/app/src/main/AndroidManifest.xml:

<uses-permission android:name="android.permission.READ_CALENDAR" />
<uses-permission android:name="android.permission.WRITE_CALENDAR" />

권한을 요청합니다

import { CapacitorCalendar } from '@capgo/capacitor-calendar';

const permission = await CapacitorCalendar.requestFullCalendarAccess();

if (permission.result !== 'granted') {
  throw new Error('Calendar permission was not granted');
}

이벤트를 생성합니다

const startDate = Date.now() + 60 * 60 * 1000;
const endDate = startDate + 60 * 60 * 1000;

const { id } = await CapacitorCalendar.createEvent({
  title: 'Product review',
  location: 'Capgo',
  startDate,
  endDate,
  description: 'Created with @capgo/capacitor-calendar',
});

console.log('Created event', id);

네이티브 이벤트 UI를 열합니다

await CapacitorCalendar.createEventWithPrompt({
  title: 'Planning session',
  location: 'Office',
  startDate: Date.now() + 24 * 60 * 60 * 1000,
  endDate: Date.now() + 25 * 60 * 60 * 1000,
});

이벤트 목록

const now = Date.now();

const { result: events } = await CapacitorCalendar.listEventsInRange({
  from: now,
  to: now + 7 * 24 * 60 * 60 * 1000,
});

iOS 알림

const permission = await CapacitorCalendar.requestFullRemindersAccess();

if (permission.result === 'granted') {
  await CapacitorCalendar.createReminder({
    title: 'Send launch notes',
    dueDate: Date.now() + 2 * 24 * 60 * 60 * 1000,
  });
}

iOS에서만 알림이 사용 가능합니다.

전체 참조