Al crear un programador de JavaScript, a menudo es necesario proporcionar a los usuarios finales la forma en que prefieren programar eventos, esta es una razón importante por la que a los desarrolladores web les gusta respaldar DHTMLX Scheduler , ya que proporciona total libertad de operación en este sentido, viene con una caja de luz Una ventana emergente que permite el cambio dinámico de los detalles del evento a través de varios controles.
Pero, ¿qué sucede si desea complementar la caja de luz de Scheduler con widgets de la biblioteca DHTMLX Suite ? En este artículo, le guiaremos paso a paso sobre cómo incrustar widgets de DHTMLX Suite en la caja de luz del componente Programador.
Descarga de la versión oficial de DHTMLX Suite
Seis pasos para agregar el calendario DHTMLX al Lightbox del programador
Cualquier widget de la biblioteca DHTMLX Suite se puede integrar perfectamente en el formulario de edición del componente Programador; el algoritmo es casi el mismo para todos los widgets. Por eso tomamos DHTMLX Calendar como ejemplo para ilustrar cómo hacer esto en la práctica. Pondremos esta funcionalidad en la caja de luz del programador con el selector de tiempo habilitado; ayuda a especificar fácilmente la fecha y la duración del evento en formato de 12 o 24 horas.
Aquí está el resultado esperado:
Paso 1
Primero, es necesario crear un nuevo objeto editor en Scheduler.form_blocks. Para esto tienes que usar el método render que devuelve el elemento HTML, en este método simplemente creas el contenedor y dentro de él generas el selector de fecha.
scheduler.form_blocks["custom_date_editor"]={
render:function(config){ // config- section configuration object
return `<div class='custom_date_editor-wrapper'>
<div name="start_date"></div>
<div name="end_date"></div>
</div>
`;
},
set_value:function(node,value,ev,config){
},
get_value:function(node,ev,config){
},
focus:function(node){
}
};Paso 2
Luego se deben crear las variables públicas startDateCalendar y startDateCalendar:
let startDateCalendar;
let endDateCalendar;Estas variables se utilizan para acceder al objeto de calendario donde se colocará el selector de hora.
Paso 3
El siguiente paso es crear la función initcalendar() que se llama cuando necesita reinicializar el calendario, es decir, cada vez que se abre la caja de luz, esta función también elimina los calendarios antiguos (si existen) usando un método destructor antes de crear uno nuevo. . El valor del atributo timePicker debe establecerse en verdadero para complementar la funcionalidad del selector de fecha, permitiéndole seleccionar una hora para los eventos programados. En el ejemplo de código siguiente, también utilizamos la clase CSS con bordes dhx_widget para ayudar a especificar el borde del calendario.
function initCalendars(startDateElement, endDateElement){
if(startDateCalendar){
destroyCalendars();
}
startDateCalendar = new dhx.Calendar(startDateElement, {
timePicker: true,
css: "dhx_widget--bordered"
});
endDateCalendar = new dhx.Calendar(endDateElement, {
timePicker: true,
css: "dhx_widget--bordered"
});
}
function destroyCalendars(){
if(startDateCalendar){
startDateCalendar.destructor();
endDateCalendar.destructor();
startDateCalendar = null;
endDateCalendar = null;
}
}Etapa 4
Ahora es el momento de considerar la función set_value en el objeto de control lightbox, que se llama cada vez que el control recibe un nuevo valor. Esto sucede cuando el control recibe un nuevo valor a través de la API cuando la caja de luz está abierta.
Aquí es donde debes inicializar el calendario y completar sus valores:
set_value:function(node,value,ev,config){
initCalendars(node.querySelector("[name='start_date']"), node.querySelector("[name='end_date']"));
startDateCalendar.setValue(new Date(ev.start_date));
endDateCalendar.setValue(new Date(ev.end_date));
},Paso 5
Para que el control guarde estos valores entre eventos, deben devolverse desde la función get_value.
En nuestro ejemplo, la función se ve así:
get_value:function(node,ev,config){
const start_date = startDateCalendar.getValue(true);
const end_date = endDateCalendar.getValue(true);
ev.start_date = start_date;
ev.end_date = end_date;
return {
start_date,
end_date
};
},Es importante aclarar que aquí se están haciendo dos cosas:
- Puede modificar el evento pasado como parámetro y asignar directamente un nuevo valor de fecha al objeto. Este es un enfoque común para controles que se asignan a varias propiedades diferentes de un evento.
- Devuelve el valor del selector de fecha de la función como objeto {start_date, end_date} que permite al método planificador.formSection(name).getvalue() acceder al valor de control.
Al implementar un control simple que se asigna a una única propiedad del objeto de evento, no necesita modificar el objeto de evento, solo necesita devolver el valor del método y el valor de retorno se asignará automáticamente a la propiedad correspondiente. del objeto del evento.
Paso 6
Finalmente, debe destruir los calendarios cuando ya no sean necesarios, generalmente usando el evento onAfterLightbox del Programador DHTMLX:
scheduler.attachEvent("onAfterLightbox", destroyCalendars);En este ejemplo, puede ver un calendario de eventos con la función de selección de hora integrada y utilizarlo.