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

캘린더

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

데모

WebP 애니메이션 데모

자연스러운 iOS 및 Android 캘린더 이벤트 생성, WebP 애니메이션 데모로 내보냄.

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

안내

캘린더 튜토리얼

장치 테스트

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

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

Using @capgo/capacitor-calendar

The @capgo/capacitor-calendar Capacitor 앱이 iOS 및 Android에서 네이티브 캘린더 이벤트를 관리할 수 있도록 하는 패키지입니다.

설치

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에서만 알림이 사용할 수 있습니다.

전체 참조