DESARROLLADORES > REFERENCIA DE PICK-A-TIME
Pick-a-Time agrega conocimiento de disponibilidad a su aplicación para facilitar la coordinación de reuniones, sin tener que federar los datos del calendario en su servidor. Si necesita más ayuda después de leer esta documentación de referencia, contáctenos por correo electrónico ( [email protected] ) o usando el botón de ayuda en la aplicación.
El widget FreeBusy Pick-a-Time es una oferta central para que los desarrolladores de terceros integren directamente el conocimiento de la disponibilidad en sus aplicaciones. La API Pick-a-Time admite los siguientes escenarios:
- programar una reunión a la hora seleccionada por su usuario directamente a través de FreeBusy
FreeBusy lo tiene cubierto. Sus clientes siempre ven la vista de disponibilidad combinada para todos los participantes, por lo que es muy fácil encontrar un horario que funcione.
Incluyendo Pick-a-Time
1. Agregue esta etiqueta de secuencia de comandos al <head> elemento de cada página donde debería aparecer Pick-a-Time:
<script type="text/javascript" src="https://js.freebusy.io/pick-a-time/v2"></script>
Nota: Si bien puede agregar la etiqueta de secuencia de comandos en cualquier lugar antes de que se declare en la página el botón del Paso 2 a continuación, le recomendamos enfáticamente que lo haga en el<head> etiqueta. Esto permitirá que su aplicación haga referencia a los métodos API Pick-a-Time en cualquier lugar, sin tener que preocuparse si el widget Pick-a-Time ya se ha cargado.
2. Decida cómo desea mostrar el botón Elegir una hora:
A. Botón nativo diseñado e inyectado por FreeBusy
Utilice esta opción cuando pueda editar libremente la plantilla HTML y no necesite cambiar el estilo del botón.
El botón inyectado se verá así:
Agregue el botón Pick-a-Time donde desee que se muestre en la página: <div id="freebusy-pickatime-button"></div>
Nota: FreeBusy inyectará automáticamente el botón Pick-a-Time nativo dondequiera que coloque el elemento div anterior.
B. Botón personalizado diseñado por ti mismo
Utilice esta opción cuando no pueda agregar HTML personalizado a su página, tenga un elemento existente al que desee adjuntar Pick-a-Time o necesite cambiar el estilo del botón. Anote la identificación del elemento o el nombre de clase único.
3. Inicialice el botón Pick-a-Time llamando al Para obtener detalles sobre cómo llamar a este método, consulte la Referencia de la API Pick-a-Time a continuación. freebusy.pickatime.initmétodo.
4. Llame a los siguientes métodos y suscríbase a eventos, en cualquier lugar de la página. Recomendamos suscribirse a todos los eventos a los que se hace referencia a continuación para obtener una gran experiencia de usuario.
Referencia de la API Pick-a-Time
Métodos públicos
freebusy.pickatime. init(JSON object: config)
Descripción | Proporciona configuración de inicialización para el widget Pick-a-Time. Debe llamar a este método cuando se carga su página. Config, que es un objeto JSON especificado a continuación, representa la configuración del widget Pick-a-Time. |
Parámetros | config Objeto JSON con las siguientes propiedades aceptadas. Requerido en audaz . Tenga en cuenta que Tipo de botón denota cómo desea mostrar el botón Pick-a-Time en su página. Si selecciona disfraz , debe proporcionar ID de botón o clase de boton de un elemento existente en su página al que se debe adjuntar el widget Pick-a-Time. Cuando su usuario haga clic en este elemento, FreeBusy abrirá el widget Pick-a-Time como si se usara un botón nativo. Si desea inyectar el nativo botón FreeBusy Pick-a-Time, solo configure el Tipo de botón propiedad. No suministre el ID de botón y clase de boton propiedades. Si desea iniciar Pick-a-Time programáticamente (por ejemplo, en respuesta a la devolución de llamada XHR), configure el Tipo de botón propiedad a ninguna . No suministre el ID de botón y clase de boton propiedades. Para iniciar Pick-a-Time programáticamente, llame freebusy.pickatime.abierto en el momento apropiado. |
Uso | Para inyectar el botón Pick-a-Time nativo, use: freebusy.pickatime.init({
buttonType: "native"
});
Para adjuntar Pick-a-Time a un elemento existente, use: freebusy.pickatime.init({
buttonType: "custom",
buttonId: "{YourCustomButtonId}"
});o: freebusy.pickatime.init({
buttonType: "custom",
buttonClass: "{YourUniqueButtonClassName}"
}); |
Nota | - |
freebusy.pickatime. open(JSON object: availabilityRequest, JSON object: availabilityQuery)
Descripción | Revela la naturaleza del escenario de programación a FreeBusy. Debe llamar a este método cuando o antes de que su usuario haga clic en el botón Pick-a-Time. AvailabilityRequest y AvailabilityQuery, que son objetos JSON especificados a continuación, representan las entradas del widget Pick-a-Time. |
Parámetros | availabilityRequest Objeto JSON con las siguientes propiedades aceptadas. Requerido en audaz . Decida cómo desea que se muestre el widget Pick-a-Time usando el monitor parámetro. Elegir surgir abrirá Pick-a-Time en una ventana emergente separada. Seleccionando modal muestra Pick-a-Time incrustado directamente en su aplicación, utilizando un modal con un fondo. En algunos escenarios, es posible que no pueda actuar directamente sobre la programación de una reunión en su aplicación. Puede evitar que el widget FreeBusy Pick-a-Time se cierre cuando se programa una reunión y permitirnos mostrar la confirmación de la reunión a su usuario directamente en el widget. Para ello, establezca closeOnSchedule a falso . availabilityQuery Objeto JSON con las siguientes propiedades aceptadas. Requerido en audaz . Nota: Un error común durante la fase de implementación/prueba es proporcionar un proponente que coincida con el anfitrión de la reunión. Para evitar esto, asegúrese de que el participante declarado como proponente sea diferente del anfitrión de la reunión. El anfitrión de la reunión se determina a partir de la solicitud de disponibilidad.enlace propiedad, que apunta a su plantilla de evento |
Nota | - |
freebusy.pickatime .enable()
Descripción | Evita que se haga clic en el botón Pick-a-Time. En este estado, sus usuarios no podrán interactuar con el widget FreeBusy Pick-a-Time. |
Parámetros | - |
Nota | - |
Eventos publicos
freebusy.pickatime .onclick(callback)
Descripción | Se dispara cuando se hace clic en el botón Pick-a-Time. La devolución de llamada permite configurar los datos de entrada a través de freebusy.pickatime. open(request, query) |
Uso | freebusy.pickatime.onclick(function() {
freebusy.pickatime.open({
link: 'https://freebusy.io/freebusy.io/pick-a-time-demo'
},
{
participants: [{
email: '[email protected]',
name: "John Doe",
role: "proposer",
timeZone: "America/Los_Angeles"
}]
});
});En su lugar, los desarrolladores de terceros pueden optar por hacer referencia a una variable de su propio espacio de nombres o global: freebusy.pickatime.onclick(function() {
freebusy.pickatime.open(
MyAppNamespace.availabilityRequest,
MyAppNamespace.availabilityQuery
);
});Los desarrolladores de terceros también pueden decidir configurar la solicitud de disponibilidad y la consulta dentro de sus propias funciones y pasar solo sus referencias: freebusy.pickatime.onclick(function() {
var request = GetRequest();
var query = GetQuery();
freebusy.pickatime.open(request, query);
feedbackToUser();
}); |
Nota | Si bien puede configurar la solicitud de disponibilidad y la consulta en cualquier momento, le recomendamos que lo haga en la devolución de llamada de freebusy.pickatime. onclick()como se detalla arriba. Esto asegura que FreeBusy recibirá datos actualizados cuando su usuario haga clic en el botón Pick-a-Time.
|
freebusy.pickatime. onselect(callback)
Descripción | Se activa cuando un usuario selecciona una hora en el widget Pick-a-Time. |
Uso | freebusy.pickatime.onselect(function(response, proposal) {
if (response.statusCode === 200) {
var meetingDate = new Date(proposal.startTime);
var clientTz = response.organizer.timeZone;
}
else {
handleProposalFailure(response, proposal);
}
});
En su lugar, los desarrolladores de terceros pueden optar por pasar una referencia a su propia función: freebusy.pickatime.onselect(MyAppNamespace.setFcn);
donde, por ejemplo, MyAppNamespace.setFcn Se define como: MyAppNamespace.setFcn = function (response, proposal) {
if (response.statusCode === 200) {
var dt = new Date(proposal.startTime);
setUI(dt);
}
else {
handleProposalFailure(response, proposal);
}
}; |
Nota | Llamar de vuelta La función debe definir dos parámetros, respuesta y propuesta , cuyas propiedades son: var response = {
statusCode: (int; success returns 200),
id: (string: meetingId)
}y var proposal = {
organizer: {
email: (string: email address),
name: (string: organizer name),
timeZone: (string: IANA time zone)
},
participants: [{
email: (string: email address),
name: (string: participant name),
timeZone: (string: IANA time zone)
}],
startTime: (string: ISO 8601 date),
durationInMin: (int),
subject: (string),
location: (string),
id: (string: meetingId)
} |
freebusy.pickatime. onopen(callback)
Descripción | Se activa cuando se abre la ventana emergente del widget Pick-a-Time. |
Uso | freebusy.pickatime.onopen(function() {
console.log("opened");
}});
Los desarrolladores de terceros también pueden pasar una referencia a su propia función. |
Nota | - |
freebusy.pickatime. onclose(callback)
Descripción | Se activa cuando se cierra la ventana emergente del widget Pick-a-Time. |
Uso | freebusy.pickatime.onclose(function(response, proposal) {
if (response.statusCode === 199) {
console.log("Pick-a-Time closed by user");
}
else {
console.log("Pick-a-Time closed itself");
}
});
Los desarrolladores de terceros también pueden pasar una referencia a su propia función. |
Nota | Llamar de vuelta La función debe definir dos parámetros, respuesta y propuesta , cuyas propiedades son: var response = {
statusCode: (int; closed by user returns 199),
id: (string: meetingId)
}y var proposal = {
organizer: {
email: (string: email address),
name: (string: organizer name),
timeZone: (string: IANA time zone)
},
participants: [{
email: (string: email address),
name: (string: participant name),
timeZone: (string: IANA time zone)
}],
startTime: (string: ISO 8601 date),
durationInMin: (int),
subject: (string),
location: (string),
id: (string: meetingId)
}
Propuesta es nulo si el usuario cerró Pick-a-Time. |
freebusy.pickatime. onerror(callback)
Descripción | Se dispara si Pick-a-Time arroja un error. |
Uso | freebusy.pickatime.onerror(function(error) {
console.log("error " + error);
});
Los desarrolladores de terceros también pueden pasar una referencia a su propia función. |
Nota | - |