메인 콘텐츠로 건너뛰기
@capgo/capacitor-캘린더 기업용 API 오픈 소스

캘린더 Capacitor 플러그인

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

설치

bun add @capgo/capacitor-calendar bunx cap sync
npm, pnpm 또는 yarn
  • npm install @capgo/capacitor-calendar
  • pnpm add @capgo/capacitor-calendar
  • yarn add @capgo/capacitor-calendar

데모

캘린더 데모

iOS와 Android에서 네이티브 캘린더 이벤트 생성, WebP 애니메이션 데모로 내보냈습니다.

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

설명서

캘린더를 사용하는 방법: Capacitor

장치에서 테스트

Capgo 앱을 다운로드한 후 QR code를 스캔하세요.

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

@capgo/capacitor-캘린더 사용

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

전체 참조

FAQ

캘린더 플러그인 FAQ

캘린더 플러그인을 Capacitor 앱에 설치하는 방법은 어떻게 되나요?

Run &quot;bun add @capgo/capacitor-calendar&quot; (또는 &quot;npm install @capgo/capacitor-calendar&quot;)를 실행한 다음 &quot;bunx cap sync&quot;를 실행하여 iOS 및 Android 프로젝트가 네이티브 code를 인식하도록 하세요. 그리고 code에서 &quot;@capgo/capacitor-calendar&quot;을 임포트하세요.

React, Vue 및 Angular과 함께 @capgo/capacitor-calendar이 작동하나요?

네. 캘린더는 Capacitor 패키지이므로, Ionic, React, Vue, Angular, Svelte 및 일반 JavaScript와 같은 웹 프레임워크가 Capacitor 내에서 실행되는 경우에 작동합니다.

어떤 Capacitor 버전이 @capgo/capacitor-calendar에 지원되나요?

Capgo plugins follow Capacitor&#39;s major version: use the plugin major version that matches your Capacitor major version (for example plugin v8 with Capacitor 8). The compatibility table in the GitHub README lists the maintained versions.

capgo/capacitor-calendar은 무료이며 오픈 소스인가요?

code의 소스는 GitHub에 https://github.com/Cap-go/capacitor-calendar/에서 공개되어 있으며 npm에서 무료로 설치할 수 있습니다. 버그 리포트와 풀 리퀘스트는 환영합니다.

code를 업데이트할 수 있나요?

code를 설치하거나 업그레이드하면 네이티브 code이 변경되므로 새로운 스토어 빌드를 필요로 합니다. 그 후에 Capgo live updates를 통해 즉시 자바스크립트, HTML 및 CSS 변경 사항을 배포할 수 있습니다.

앱 리뷰 기다리지 않고 캘린더 변경을 배포하세요.

Capgo로 시작하세요.

Capgo