クイック スタート: 予定の管理 (HTML)
[ この記事は、Windows ランタイム アプリを作成する Windows 8.x および Windows Phone 8.x 開発者を対象としています。Windows 10 向けの開発を行っている場合は、「最新のドキュメント」をご覧ください]
Windows.ApplicationModel.Appointments 名前空間を使うと、ユーザーのカレンダー アプリで予定の作成と管理を行うことができます。ここでは、予定を作成してカレンダー アプリに追加し、カレンダー アプリで置換して、カレンダー アプリから削除する方法を示します。さらに、カレンダー アプリの一定の期間を表示し、予定の繰り返しオブジェクトを作る方法も示します。予定の管理は、Windows 8.1 以降でサポートされます。
ここでは、予定 API のサンプルを参照します。このサンプルでは、Windows ランタイム アプリ内から Windows.ApplicationModel.Appointments 名前空間の API を通じて、予定を管理する方法について説明します。
必要条件
- Microsoft Visual Studio と関連するテンプレートについて理解することをお勧めします。
- JavaScript での開発について理解することをお勧めします。
予定を作成してデータを適用する
Windows.ApplicationModel.Appointments.Appointment オブジェクトを作成し、変数に割り当てます。次に、ユーザーが UI を通じて提供した予定のプロパティを Appointment に適用します。
function createAppointment() {
var isAppointmentValid = true;
var appointment = new Windows.ApplicationModel.Appointments.Appointment();
// StartTime
var startTime = document.querySelector('#startDatePicker').winControl.current;
var time = document.querySelector('#startTimePicker').winControl.current;
startTime.setMinutes(time.getMinutes());
startTime.setHours(time.getHours());
appointment.startTime = startTime;
// Subject
appointment.subject = document.querySelector('#subjectInput').value;
if (appointment.subject.length > 255) {
isAppointmentValid = false;
document.querySelector('#result').innerText = "The subject cannot be greater than 255 characters.";
}
// Location
appointment.location = document.querySelector('#locationInput').value;;
if (appointment.location.length > 32768) {
isAppointmentValid = false;
document.querySelector('#result').innerText = "The location cannot be greater than 32,768 characters.";
}
// Details
appointment.details = document.querySelector('#detailsInput').value;
if (appointment.details.length > 1073741823) {
isAppointmentValid = false;
document.querySelector('#result').innerText = "The details cannot be greater than 1,073,741,823 characters.";
}
// Duration
if (document.querySelector('#durationSelect').selectedIndex === 0) {
// 30 minute duration is selected
appointment.duration = (30 * 60 * 1000);
} else {
// 1 hour duration is selected
appointment.duration = (60 * 60 * 1000);
}
// All Day
appointment.allDay = (document.querySelector('#allDayCheckBox').checked);
// Reminder
if (document.querySelector('#reminderCheckBox').checked) {
switch (document.querySelector('#reminderSelect').selectedIndex) {
case 0:
appointment.reminder = (15 * 60 * 1000);
break;
case 1:
appointment.reminder = (60 * 60 * 1000);
break;
case 2:
appointment.reminder = (24 * 60 * 60 * 1000);
break;
}
}
//Busy Status
switch (document.querySelector('#busyStatusSelect').selectedIndex) {
case 0:
appointment.busyStatus = Windows.ApplicationModel.Appointments.AppointmentBusyStatus.busy;
break;
case 1:
appointment.busyStatus = Windows.ApplicationModel.Appointments.AppointmentBusyStatus.tentative;
break;
case 2:
appointment.busyStatus = Windows.ApplicationModel.Appointments.AppointmentBusyStatus.free;
break;
case 3:
appointment.busyStatus = Windows.ApplicationModel.Appointments.AppointmentBusyStatus.outOfOffice;
break;
case 4:
appointment.busyStatus = Windows.ApplicationModel.Appointments.AppointmentBusyStatus.workingElsewhere;
break;
}
// Sensitivity
switch (document.querySelector('#sensitivitySelect').selectedIndex) {
case 0:
appointment.sensitivity = Windows.ApplicationModel.Appointments.AppointmentSensitivity.public;
break;
case 1:
appointment.sensitivity = Windows.ApplicationModel.Appointments.AppointmentSensitivity.private;
break;
}
// Uri
var uriValue = document.querySelector('#uriInput').value;
if (uriValue.length > 0) {
try {
appointment.uri = new Windows.Foundation.Uri(uriValue);
}
catch (e) {
isAppointmentValid = false;
document.querySelector('#result').innerText = "The Uri provided is invalid.";
}
}
// Organizer
// Note: Organizer can only be set if there are no invitees added to this appointment.
if (document.querySelector('#organizerRadioButton').checked) {
var organizer = new Windows.ApplicationModel.Appointments.AppointmentOrganizer();
// Organizer Display Name
organizer.displayName = document.querySelector('#organizerDisplayNameInput').value;
if (organizer.displayName.length > 256) {
isAppointmentValid = false;
document.querySelector('#result').innerText = "The organizer display name cannot be greater than 256 characters.";
} else {
// Organizer Address (e.g. Email Address)
organizer.address = document.querySelector('#organizerAddressInput').value;
if (organizer.address.length > 321) {
isAppointmentValid = false;
document.querySelector('#result').innerText = "The organizer address cannot be greater than 321 characters.";
} else if (organizer.address.length === 0) {
isAppointmentValid = false;
document.querySelector('#result').innerText = "The organizer address must be greater than 0 characters.";
} else {
appointment.organizer = organizer;
}
}
}
// Invitees
// Note: If the size of the Invitees list is not zero, then an Organizer cannot be set.
if (document.querySelector('#inviteeRadioButton').checked) {
var invitee = new Windows.ApplicationModel.Appointments.AppointmentInvitee();
// Invitee Display Name
invitee.displayName = document.querySelector('#inviteeDisplayNameInput').value;
if (invitee.displayName.length > 256) {
isAppointmentValid = false;
document.querySelector('#result').innerText = "The invitee display name cannot be greater than 256 characters.";
} else {
// Invitee Address (e.g. Email Address)
invitee.address = document.querySelector('#inviteAddressInput').value;
if (invitee.address.length > 321) {
isAppointmentValid = false;
document.querySelector('#result').innerText = "The invitee address cannot be greater than 321 characters.";
} else if (invitee.address.length === 0) {
isAppointmentValid = false;
document.querySelector('#result').innerText = "The invitee address must be greater than 0 characters.";
} else {
// Invitee Role
switch (document.querySelector('#inviteeRoleSelect').selectedIndex) {
case 0:
invitee.role = Windows.ApplicationModel.Appointments.AppointmentParticipantRole.requiredAttendee;
break;
case 1:
invitee.role = Windows.ApplicationModel.Appointments.AppointmentParticipantRole.optionalAttendee;
break;
case 2:
invitee.role = Windows.ApplicationModel.Appointments.AppointmentParticipantRole.resource;
break;
}
// Invitee Response
switch (document.querySelector('#inviteeResponseSelect').selectedIndex) {
case 0:
invitee.response = Windows.ApplicationModel.Appointments.AppointmentParticipantResponse.none;
break;
case 1:
invitee.response = Windows.ApplicationModel.Appointments.AppointmentParticipantResponse.tentative;
break;
case 2:
invitee.response = Windows.ApplicationModel.Appointments.AppointmentParticipantResponse.accepted;
break;
case 3:
invitee.response = Windows.ApplicationModel.Appointments.AppointmentParticipantResponse.declined;
break;
case 4:
invitee.response = Windows.ApplicationModel.Appointments.AppointmentParticipantResponse.unknown;
break;
}
appointment.invitees.append(invitee);
}
}
}
if (isAppointmentValid) {
document.querySelector('#result').innerText = "The appointment was created successfully and is valid.";
}
}
予定をユーザーのカレンダーに追加する
Windows.ApplicationModel.Appointments.Appointment オブジェクトを作成し、変数に割り当てます。次に、AppointmentManager.ShowAddAppointmentAsync(Appointment, Rect, Placement) メソッドを呼び出して、既定の予定プロバイダーの予定追加 UI を表示し、ユーザーが予定を追加できるようにします。ユーザーが [追加] をクリックすると、このサンプルは ShowAddAppointmentAsync によって返された予定識別子を出力します。
function addAppointment(e) {
// Create an Appointment that should be added the user's appointments provider app.
var appointment = new Windows.ApplicationModel.Appointments.Appointment();
// Get the selection rect of the button pressed to add this appointment
var boundingRect = e.srcElement.getBoundingClientRect();
var selectionRect = { x: boundingRect.left, y: boundingRect.top, width: boundingRect.width, height: boundingRect.height };
// ShowAddAppointmentAsync returns an appointment id if the appointment given was added to the user's calendar.
// This value should be stored in app data and roamed so that the appointment can be replaced or removed in the future.
// An empty string return value indicates that the user canceled the operation before the appointment was added.
Windows.ApplicationModel.Appointments.AppointmentManager.showAddAppointmentAsync(appointment, selectionRect, Windows.UI.Popups.Placement.default)
.done(function (appointmentId) {
if (appointmentId) {
document.querySelector('#result').innerText = "Appointment Id: " + appointmentId;
} else {
document.querySelector('#result').innerText = "Appointment not added";
}
});
}
ユーザーのカレンダーで予定を置換する
Windows.ApplicationModel.Appointments.Appointment オブジェクトを作成し、変数に割り当てます。次に、該当する AppointmentManager.ShowReplaceAppointmentAsync メソッドを呼び出して既定の予定プロバイダーの予定置換 UI を表示し、ユーザーが予定を置換できるようにします。ユーザーは、置換する予定識別子も指定します。この識別子は、AppointmentManager.ShowAddAppointmentAsync から返されたものです。 ユーザーが [置換] をクリックした場合、このサンプルは更新されたその予定識別子を出力します。
function replaceAppointment(e) {
// The appointment id argument for ReplaceAppointmentAsync is typically retrieved from AddAppointmentAsync and stored in app data.
var appointmentIdOfAppointmentToReplace = document.querySelector('#appointmentIdInput').value;
if (!appointmentIdOfAppointmentToReplace) {
document.querySelector('#result').innerText = "The appointment id cannot be empty";
} else {
// The Appointment argument for ReplaceAppointmentAsync should contain all of the Appointment's properties including those that may have changed.
var appointment = new Windows.ApplicationModel.Appointments.Appointment();
// Get the selection rect of the button pressed to replace this appointment
var boundingRect = e.srcElement.getBoundingClientRect();
var selectionRect = { x: boundingRect.left, y: boundingRect.top, width: boundingRect.width, height: boundingRect.height };
// ReplaceAppointmentAsync returns an updated appointment id when the appointment was successfully replaced.
// The updated id may or may not be the same as the original one retrieved from AddAppointmentAsync.
// An optional instance start time can be provided to indicate that a specific instance on that date should be replaced
// in the case of a recurring appointment.
// If the appointment id returned is an empty string, that indicates that the appointment was not replaced.
if (document.querySelector('#instanceStartDateCheckBox').checked) {
// Replace a specific instance starting on the date provided.
var instanceStartDate = document.querySelector('#startTimeDatePicker').winControl.current;
Windows.ApplicationModel.Appointments.AppointmentManager.showReplaceAppointmentAsync(
appointmentIdOfAppointmentToReplace, appointment, selectionRect, Windows.UI.Popups.Placement.default, instanceStartDate)
.done(function (updatedAppointmentId) {
if (updatedAppointmentId) {
document.querySelector('#result').innerText = "Updated Appointment Id: " + updatedAppointmentId;
} else {
document.querySelector('#result').innerText = "Appointment not replaced";
}
});
} else {
// Replace an appointment that occurs only once or in the case of a recurring appointment, replace the entire series.
Windows.ApplicationModel.Appointments.AppointmentManager.showReplaceAppointmentAsync(
appointmentIdOfAppointmentToReplace, appointment, selectionRect, Windows.UI.Popups.Placement.default)
.done(function (updatedAppointmentId) {
if (updatedAppointmentId) {
document.querySelector('#result').innerText = "Updated Appointment Id: " + updatedAppointmentId;
} else {
document.querySelector('#result').innerText = "Appointment not replaced";
}
});
}
}
}
ユーザーのカレンダーから予定を削除する
適切な AppointmentManager.ShowRemoveAppointmentAsync メソッドを呼び出して、既定の予定プロバイダーの予定削除 UI を表示し、ユーザーが予定を削除できるようにします。ユーザーは、削除する予定識別子も指定します。この識別子は、AppointmentManager.ShowAddAppointmentAsync から返されたものです。 ユーザーが [削除] をクリックした場合、このサンプルは、その予定識別子により指定された予定が削除されたことを出力します。
function removeAppointment(e) {
// The appointment id argument for ShowRemoveAppointmentAsync is typically retrieved from AddAppointmentAsync and stored in app data.
var appointmentId = document.querySelector('#appointmentIdInput').value;
// The appointment id cannot be empty.
if (!appointmentId) {
document.querySelector('#result').innerText = "The appointment id cannot be empty";
} else {
// Get the selection rect of the button pressed to remove this appointment
var boundingRect = e.srcElement.getBoundingClientRect();
var selectionRect = { x: boundingRect.left, y: boundingRect.top, width: boundingRect.width, height: boundingRect.height };
// ShowRemoveAppointmentAsync returns a boolean indicating whether or not the appointment related to the appointment id given was removed.
// An optional instance start time can be provided to indicate that a specific instance on that date should be removed
// in the case of a recurring appointment.
if (document.querySelector('#instanceStartDateCheckBox').checked) {
// Remove a specific instance starting on the date provided.
var instanceStartDate = document.querySelector('#startTimeDatePicker').winControl.current;
Windows.ApplicationModel.Appointments.AppointmentManager.showRemoveAppointmentAsync(
appointmentId, selectionRect, Windows.UI.Popups.Placement.default, instanceStartDate)
.done(function (removed) {
if (removed) {
document.querySelector('#result').innerText = "Appointment removed";
} else {
document.querySelector('#result').innerText = "Appointment not removed";
}
});
} else {
// Remove an appointment that occurs only once or in the case of a recurring appointment, remove the entire series.
Windows.ApplicationModel.Appointments.AppointmentManager.showRemoveAppointmentAsync(
appointmentId, selectionRect, Windows.UI.Popups.Placement.default)
.done(function (removed) {
if (removed) {
document.querySelector('#result').innerText = "Appointment removed";
} else {
document.querySelector('#result').innerText = "Appointment not removed";
}
});
}
}
}
予定プロバイダーの一定の期間を表示する
ユーザーが [表示] をクリックした場合、AppointmentManager.ShowTimeFrameAsync メソッドを呼び出して、既定の予定プロバイダーのプライマリ UI の一定期間を表示します。このサンプルは、既定の予定プロバイダーが画面に表示されたことを出力します。
// Show the appointment provider app at the current date and time with a 1 hour duration
function showTimeFrame() {
var dateToShow = new Date();
Windows.ApplicationModel.Appointments.AppointmentManager.showTimeFrameAsync(dateToShow, (60 * 60 * 1000))
.done(function () {
document.querySelector('#result').innerText = "The default appointments provider should have appeared on screen.";
});
}
定期的な予定のオブジェクトを作成してデータを適用する
Windows.ApplicationModel.Appointments.AppointmentRecurrence オブジェクトを作成し、変数に割り当てます。次に、UI を通じてユーザーから提供された繰り返しに関するプロパティを AppointmentRecurrence に適用します。
function createRecurrence() {
var isRecurrenceValid = true;
var recurrence = new Windows.ApplicationModel.Appointments.AppointmentRecurrence();
// Unit
switch (document.querySelector('#unitSelect').selectedIndex) {
case 0:
recurrence.unit = Windows.ApplicationModel.Appointments.AppointmentRecurrenceUnit.daily;
break;
case 1:
recurrence.unit = Windows.ApplicationModel.Appointments.AppointmentRecurrenceUnit.weekly;
break;
case 2:
recurrence.unit = Windows.ApplicationModel.Appointments.AppointmentRecurrenceUnit.monthly;
break;
case 3:
recurrence.unit = Windows.ApplicationModel.Appointments.AppointmentRecurrenceUnit.monthlyOnDay;
break;
case 4:
recurrence.unit = Windows.ApplicationModel.Appointments.AppointmentRecurrenceUnit.yearly;
break;
case 5:
recurrence.unit = Windows.ApplicationModel.Appointments.AppointmentRecurrenceUnit.yearlyOnDay;
break;
}
// Occurrences
// Note: Occurrences and Until properties are mutually exclusive.
if (document.querySelector('#occurrencesRadioButton').checked) {
recurrence.occurrences = document.querySelector('#occurrencesRange').valueAsNumber;
}
// Until
// Note: Until and Occurrences properties are mutually exclusive.
if (document.querySelector('#untilRadioButton').checked) {
recurrence.until = document.querySelector('#untilDatePicker').winControl.current;
}
// Interval
recurrence.interval = document.querySelector('#intervalRange').valueAsNumber;
// Week of the month
switch (document.querySelector('#weekOfMonthSelect').selectedIndex) {
case 0:
recurrence.weekOfMonth = Windows.ApplicationModel.Appointments.AppointmentWeekOfMonth.first;
break;
case 1:
recurrence.weekOfMonth = Windows.ApplicationModel.Appointments.AppointmentWeekOfMonth.second;
break;
case 2:
recurrence.weekOfMonth = Windows.ApplicationModel.Appointments.AppointmentWeekOfMonth.third;
break;
case 3:
recurrence.weekOfMonth = Windows.ApplicationModel.Appointments.AppointmentWeekOfMonth.fourth;
break;
case 4:
recurrence.weekOfMonth = Windows.ApplicationModel.Appointments.AppointmentWeekOfMonth.last;
break;
}
// Days of the Week
// Note: For Weekly, MonthlyOnDay or YearlyOnDay recurrence unit values, at least one day must be specified.
if (document.querySelector('#sundayCheckBox').checked) { recurrence.daysOfWeek |= Windows.ApplicationModel.Appointments.AppointmentDaysOfWeek.sunday; }
if (document.querySelector('#mondayCheckBox').checked) { recurrence.daysOfWeek |= Windows.ApplicationModel.Appointments.AppointmentDaysOfWeek.monday; }
if (document.querySelector('#tuesdayCheckBox').checked) { recurrence.daysOfWeek |= Windows.ApplicationModel.Appointments.AppointmentDaysOfWeek.tuesday; }
if (document.querySelector('#wednesdayCheckBox').checked) { recurrence.daysOfWeek |= Windows.ApplicationModel.Appointments.AppointmentDaysOfWeek.wednesday; }
if (document.querySelector('#thursdayCheckBox').checked) { recurrence.daysOfWeek |= Windows.ApplicationModel.Appointments.AppointmentDaysOfWeek.thursday; }
if (document.querySelector('#fridayCheckBox').checked) { recurrence.daysOfWeek |= Windows.ApplicationModel.Appointments.AppointmentDaysOfWeek.friday; }
if (document.querySelector('#saturdayCheckBox').checked) { recurrence.daysOfWeek |= Windows.ApplicationModel.Appointments.AppointmentDaysOfWeek.saturday; }
if (((recurrence.unit === Windows.ApplicationModel.Appointments.AppointmentRecurrenceUnit.weekly) ||
(recurrence.unit === Windows.ApplicationModel.Appointments.AppointmentRecurrenceUnit.monthlyOnDay) ||
(recurrence.unit === Windows.ApplicationModel.Appointments.AppointmentRecurrenceUnit.yearlyOnDay)) &&
(recurrence.daysOfWeek === Windows.ApplicationModel.Appointments.AppointmentDaysOfWeek.none)) {
isRecurrenceValid = false;
document.querySelector('#result').innerText = "The recurrence specified is invalid. For Weekly, MonthlyOnDay or YearlyOnDay recurrence unit values,
at least one day must be specified.";
}
// Month of the year
recurrence.month = document.querySelector('#monthOfYearRange').valueAsNumber;
// Day of the month
recurrence.day = document.querySelector('#dayOfMonthRange').valueAsNumber;
if (isRecurrenceValid)
{
document.querySelector('#result').innerText = "The recurrence specified was created successfully and is valid.";
}
}
要約と次のステップ
これで、予定を管理する方法の基本について理解できました。予定を管理する方法の詳しいサンプルを参照するには、コード ギャラリーから予定 API のサンプルをダウンロードします。