내용으로 건너뛰기

기본 설정

GitHub

플러그인을 설치하기 위해 AI-Assisted Setup을 사용할 수 있습니다. AI 도구에 Capgo 스킬을 추가하려면 다음 명령어를 사용하세요:

터미널 창
npx skills add https://github.com/Cap-go/capgo-skills --skill capacitor-plugins

그런 다음 다음 명령어를 사용하세요:

Use the `capacitor-plugins` skill from `Cap-go/capgo-skills` to install the `@capgo/capacitor-calendar` plugin in my project.

만약 Manual Setup을 선호한다면, 다음 명령어를 실행하고 아래의 플랫폼별 지침을 따르세요:

터미널 창
npm install @capgo/capacitor-calendar
npx cap sync

앱에 필요한 사용 설명을 추가하세요. 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>NSRemindersUsageDescription</key>
<string>This app needs reminders access.</string>
<key>NSRemindersFullAccessUsageDescription</key>
<string>This app needs permission to read and manage reminders.</string>

iOS 17 이상은 쓰기 전용 및 전체 캘린더 접근을 구분합니다.만약 앱이 알림 API를 호출한다면, 사용 설명에 알림 사용 설명을 포함하세요.

애플 참조: 최신 캘린더 접근 수준으로 마이그레이션.

안드로이드 설정

안드로이드 설정

앱이 필요한 캘린더 권한을 추가하세요 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');
}

이벤트만 추가하는 앱의 경우 requestWriteOnlyCalendarAccess()안드로이드 전용 읽기 흐름의 경우 requestReadOnlyCalendarAccess().

이벤트 생성

이벤트를 만들기

날짜는 밀리초 단위의 Unix 타임스탬프입니다.

import { CapacitorCalendar } from '@capgo/capacitor-calendar';
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);

원시 이벤트 편집기를 열기

원시 이벤트 편집기를 열기
await CapacitorCalendar.createEventWithPrompt({
title: 'Planning session',
location: 'Office',
startDate: Date.now() + 24 * 60 * 60 * 1000,
endDate: Date.now() + 25 * 60 * 60 * 1000,
});

안드로이드에서, 프롬프트 기반의 이벤트 생성 및 수정 호출은 null. 이벤트 ID를 찾기 위해 생성된 이벤트를 나열할 필요가 있을 때 나열된 이벤트 목록이 반환됩니다.

다음 이벤트 목록

이벤트를 선택
const now = Date.now();
const oneWeekFromNow = now + 7 * 24 * 60 * 60 * 1000;
const { result: events } = await CapacitorCalendar.listEventsInRange({
from: now,
to: oneWeekFromNow,
});
const { result: calendars } = await CapacitorCalendar.listCalendars();
const { result: defaultCalendar } = await CapacitorCalendar.getDefaultCalendar();
const calendarId = defaultCalendar?.id ?? calendars[0]?.id;

selectCalendarsWithPrompt() iOS에서만 사용할 수 있는 알림 API가 있습니다.

const permission = await CapacitorCalendar.requestFullRemindersAccess();
if (permission.result === 'granted') {
await CapacitorCalendar.createReminder({
title: 'Send launch notes',
dueDate: Date.now() + 2 * 24 * 60 * 60 * 1000,
notes: 'Created with @capgo/capacitor-calendar',
});
}

예제 앱

repository에는 Capacitor 예시 앱이 포함되어 있습니다. 이 앱에는 권한 확인, 이벤트 생성, 네이티브 이벤트提示, 캘린더 목록, 이벤트 범위 목록이 포함되어 있습니다.

안드로이드Android
iOS의 네이티브 캘린더 이벤트 생성 데모안드로이드의 네이티브 캘린더 이벤트 생성 데모

API의 완전한 참조는 패키지 README와 TypeScript 정의에서 유지됩니다.