ネイティブのカレンダーを操作するPhoneGap Calendar pluginの紹介

皆さんはスケジュールの管理をどのように行っているでしょうか。おそらく多くの方が、スマートフォンのアプリを使ってスケジュール管理をしていると思います。
スケジュール機能をアプリに組み込む場合は独自にカレンダーを実装しても良いのですが、ネイティブカレンダーと連動していれば予定が一元管理できるため、より利便性の高いアプリになるでしょう。
今回ご紹介する PhoneGap Calendar plugin は、ネイティブカレンダーの操作機能を提供するCordovaプラグインです。

PhoneGap Calendar pluginのインストール

PhoneGap Calendar pluginの最新バージョン（v5.0.0）は、現在MonacaがサポートしているCordova6.5とは対象プラットフォームのバージョンが異なり、プロジェクトに組み込むことができません。こちらからv4.6.0のzipファイルをダウンロードし、Monaca IDEの［Cordovaプラグインの管理］画面でインポートしてください。

ネイティブカレンダーにアクセスする場合、プライバシーの問題で初回アクセス時にユーザーの許可を得る必要があります。
その時に表示されるメッセージを指定するには、プラグインの［設定］ボタンを押して、CALENDAR_USAGE_DESCRIPTION を入力します。

カレンダーを作る

新しくカレンダーを作るには createCalendar() を使います。オプションにカレンダーの名前や色の指定をします。

// オプション設定
let createCalOptions = window.plugins.calendar.getCreateCalendarOptions();
createCalOptions.calendarName = "Monaca";
createCalOptions.calendarColor = "#0254AC";
// カレンダー作成
window.plugins.calendar.createCalendar(createCalOptions,
function() {
  alert("カレンダー「Monaca」を作成しました。")
},
error);

// 処理失敗時のコールバック
let error = function(message) {
  alert("Error: " + message);
};

予定を作る

予定の登録は calendarcreateEventInteractivelyWithOptions() で行います。タイトル、場所、メモ、詳細、日付、リマインド、繰り返し、URLなどの様々なオプションを指定できます。

let title = '今日の予定';
let eventLocation = "Home";
let notes = "予定の詳細";

// 予定の日付
let startDate = new Date();
let endDate = new Date(
  startDate.getFullYear(),
  startDate.getMonth(),
  startDate.getDate(),
  startDate.getHours() + 1,
  startDate.getMinutes(),
  startDate.getSeconds()
);

// オプション情報
let calOptions = window.plugins.calendar.getCalendarOptions();

// リマインド設定
calOptions.firstReminderMinutes = 120;
calOptions.secondReminderMinutes = 5;

// 繰り返し設定（１年間、2か月に1回繰り返す）
calOptions.recurrence = "monthly";
calOptions.recurrenceEndDate = new Date(
  startDate.getFullYear() + 1,
  startDate.getMonth(),
  startDate.getDate(),
  startDate.getHours(),
  startDate.getMinutes(),
  startDate.getSeconds()
);
calOptions.recurrenceInterval = 2;

// 登録するカレンダー情報
calOptions.calendarName = "Monaca";

// URL      
calOptions.url = "https://www.google.com";

// 入力フォームを表示してから登録
window.plugins.calendar.createEventInteractivelyWithOptions(
  title,
  eventLocation,
  notes,
  startDate,
  endDate,
  calOptions,
  success,
  error
);

// 処理成功時のコールバック
let success = function(message) {
  alert("Success: " + JSON.stringify(message));
};

// 処理失敗時のコールバック
let error = function(message) {
  alert("Error: " + message);
};

実行すると、入力フォームが表示されます。各項目には指定したデフォルト値が入力された状態になっています。

ユーザーによって登録が実行されると、ネイティブカレンダーに予定が追加されます。

入力フォームを表示せず、プログラムから即登録を実行する場合は createEventInteractivelyWithOptions() のかわりに createEventWithOptions() を使います。

カレンダーの予定を取得

すでに登録されている予定を取得するには findEvent() を使います。取得の際には予定のタイトル、場所、メモ、日付の範囲などの検索条件を指定できます。結果は配列で返ってきます。

// 検索条件
let title = '今日の予定';
let eventLocation = "";
let notes = "";
let startDate = new Date();
let endDate = new Date(
  startDate.getFullYear(),
  startDate.getMonth() + 1,
  startDate.getDate(),
  startDate.getHours(),
  startDate.getMinutes(),
  startDate.getSeconds()
);

// 検索実行
window.plugins.calendar.findEvent(
  title,
  eventLocation,
  notes,
  startDate,
  endDate,
  success,
  error
);

// 予定が取得できた時のコールバック
let success = function(message) {
  const result = document.getElementById('result');
  result.value = JSON.stringify(message);
};

// 処理失敗時のコールバック
let error = function(message) {
  alert("Error: " + message);
};

ここでは結果をテキストエリアに出力しています。

カレンダーを開く

openCalendar() で日付を指定してネイティブのカレンダーアプリを開くことができます。以下は3日後の予定を開く例です。日付はミリセカンドで指定します。

// 3日後を指定して開く
let d = new Date(new Date().getTime() + 3*24*60*60*1000);
window.plugins.calendar.openCalendar(d, success, error);

// 予定が取得できた時のコールバック
let success = function(message) {
  const result = document.getElementById('result');
  result.value = JSON.stringify(message);
};

// 処理失敗時のコールバック
let error = function(message) {
  alert("Error: " + message);
};

PhoneGap Calendar pluginではこの他にも予定の編集や削除などを行うことができます。Androidでは予定の編集ができないなど、一部機能差があるようなので注意してください。

アプリ内に入力された情報を元にネイティブカレンダーへ予定を登録したり、カレンダーから情報を読み取ってアプリの中に表示するなど、様々な使い方が考えられるでしょう。

今回のサンプルコードはこちらにアップロードしてあります。実装時の参考にしてください。