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

캘린더

iOS와 Android에서 네이티브 캘린더 이벤트를 관리하고 iOS 알림 기능도 지원합니다.

데모

웹P 애니메이션 데모

iOS 및 Android에서 네이티브 캘린더 이벤트 생성

소스 자산
iOS 네이티브 캘린더 이벤트 생성 데모
iOS 이벤트 생성
Android 네이티브 캘린더 이벤트 생성 데모
Android 이벤트 생성

안내

캘린더 튜토리얼

장치 테스트

다운로드 Capgo 앱, 그리고 QR code를 스캔하세요.

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

@capgo/capacitor-calendar 사용

The @capgo/capacitor-calendar package lets a Capacitor app manage native calendar events on iOS and Android. It can request calendar permissions, create and edit events, open native calendar UI, list calendars and events, and manage Reminders on 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에서만 사용할 수 있습니다.

전체 참조