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

캘린더

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

데모

Animated WebP 데모

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

원본 자산
iOS에서 네이티브 캘린더 이벤트 생성 데모
iOS 이벤트 생성
Android에서 네이티브 캘린더 이벤트 생성 데모
Android 이벤트 생성

Guide

달력에 대한 튜토리얼

장치에서 테스트

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

달력 플러그인 미리보기 QR code

Using @capgo/capacitor-calendar

The @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에서만 알림이 사용 가능합니다.

전체 참조