Démarrage rapide : gestion des rendez-vous (HTML)
[ Cet article est destiné aux développeurs de Windows 8.x et Windows Phone 8.x qui créent des applications Windows Runtime. Si vous développez une application pour Windows 10, voir la Documentation ]
Via l’espace de noms Windows.ApplicationModel.Appointments, vous pouvez créer et gérer des rendez-vous dans l’application Calendrier d’un utilisateur. Ici, nous allons vous montrer comment créer un rendez-vous, l’ajouter à l’application Calendrier, le remplacer dans l’application Calendrier et le supprimer de l’application Calendrier. Nous allons également vous montrer comment afficher une période de temps pour une application Calendrier et créer un objet appointment-recurrence. La gestion des rendez-vous est prise en charge uniquement à partir de Windows 8.1.
Ici, nous faisons référence à l’exemple d’API de rendez-vous. Cet exemple montre comment gérer des rendez-vous via l’API de l’espace de noms Windows.ApplicationModel.Appointments dans des applications Windows Runtime.
Prérequis
- Nous vous recommandons de vous familiariser avec Microsoft Visual Studio et ses modèles connexes.
- Nous vous recommandons de vous familiariser avec le développement JavaScript.
Créer un rendez-vous et lui ajouter des données
Créez un objet Windows.ApplicationModel.Appointments.Appointment et affectez-le à une variable. Appliquez ensuite à Appointment les propriétés de rendez-vous fournies par un utilisateur dans l’interface utilisateur.
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.";
}
}
Ajouter un rendez-vous au calendrier d’un utilisateur
Créez un objet Windows.ApplicationModel.Appointments.Appointment et affectez-le à une variable. Appelez ensuite la méthode AppointmentManager.ShowAddAppointmentAsync(Appointment, Rect, Placement) pour afficher l’interface utilisateur add-appointment du fournisseur de rendez-vous par défaut, pour permettre à l’utilisateur d’ajouter un rendez-vous. Si l’utilisateur a cliqué sur Ajouter, l’exemple affiche l’identificateur du rendez-vous retourné par 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";
}
});
}
Remplacer un rendez-vous dans le calendrier d’un utilisateur
Créez un objet Windows.ApplicationModel.Appointments.Appointment et affectez-le à une variable. Appelez ensuite la méthode AppointmentManager.ShowReplaceAppointmentAsync appropriée pour afficher l’interface utilisateur replace-appointment du fournisseur de rendez-vous par défaut, pour permettre à l’utilisateur de remplacer un rendez-vous. L’utilisateur fournit également l’identificateur du rendez-vous qu’il souhaite remplacer. Cet identificateur a été retourné à partir de AppointmentManager.ShowAddAppointmentAsync. Si l’utilisateur a cliqué sur Remplacer, l’exemple indique que l’identificateur du rendez-vous a été mis à jour.
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";
}
});
}
}
}
Supprimer un rendez-vous du calendrier d’un utilisateur
Appelez la méthode AppointmentManager.ShowRemoveAppointmentAsync appropriée pour afficher l’interface utilisateur remove-appointment du fournisseur de rendez-vous par défaut, pour permettre à l’utilisateur de supprimer un rendez-vous. L’utilisateur fournit également l’identificateur du rendez-vous qu’il souhaite supprimer. Cet identificateur a été retourné à partir de AppointmentManager.ShowAddAppointmentAsync. Si l’utilisateur a cliqué sur Supprimer, l’exemple indique que le rendez-vous spécifié par cet identificateur du rendez-vous a été supprimé.
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";
}
});
}
}
}
Afficher une période de temps pour le fournisseur de rendez-vous
Appelez la méthode AppointmentManager.ShowTimeFrameAsync pour afficher une période de temps spécifique pour l’interface utilisateur principale du fournisseur de rendez-vous par défaut si l’utilisateur a cliqué sur Afficher. L’exemple indique que le fournisseur de rendez-vous par défaut s’affiche à l’écran.
// 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.";
});
}
Créer un objet appointment-recurrence et lui ajouter des données
Créez un objet Windows.ApplicationModel.Appointments.AppointmentRecurrence et affectez-le à une variable. Appliquez ensuite à AppointmentRecurrence les propriétés de périodicité fournies par un utilisateur dans l’interface utilisateur.
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.";
}
}
Récapitulatif et étapes suivantes
Vous disposez désormais des notions de base pour gérer les rendez-vous. Téléchargez l’exemple d’API de rendez-vous dans la galerie de code pour obtenir l’exemple complet de gestion des rendez-vous.