flexCalendar Tipo: Object
componente para armar un calendario mensual |
Permite crear un calendario, donde se visualizan "eventos". Solo es necesario programar un archivo (php) que devuelve un conjunto de "eventos" (en formato json o xml). El calendario permite incluir automáticamente los feriados.
Posibles vistas:
- Mensual
- Semanual
- Diaria
- Programación de Eventos
Parámetros
view
Vista predefinida del calendario
Tipo: String
Valor por defecto: month
Valores aceptados: month | week | day | scheduler
idFlex
Campo id de la tabla maestra. El framework deduce el nombre de la tabla principal que se desea mostrar a través de este parámetro
Tipo: Id Database
Valor por defecto: null
idMod
ID del módulo donde se encuentra el componente. Este valor será enviado como parámetro al php. Por defecto envía el id del TAB (modulo) activo. Puede establecer cualquier ID de módulo.
Tipo: Integer
Valor por defecto: idModActive()
extraButtons
Agregar botones al encezado del calendrio
Tipo: Array Object
Valor por defecto: []
Subparámetros de extraButtons
name
Texto a mostrar en el boton
Tipo: String
Valor por defecto:
null
url
Si se setea, abre una ventana con la url seteada
Tipo: Path file
Valor por defecto:
'path/to/file'
onpress
Función a ejecutar en el ONCLICK
Tipo: String function
Valor por defecto:
null
navLinks
Botones para navegar el calendario
Tipo: Array Object
Valor por defecto: []
Subparámetros de navLinks
enableToday
Mostrar botón "Hoy"
Tipo: Boolean
Valor por defecto:
true
enablePrevYear
Mostrar botón "Año anterior"
Tipo: Boolean
Valor por defecto:
true
enableNextYear
Mostrar botón "Próximo año"
Tipo: Boolean
Valor por defecto:
true
enableRefresh
Mostrar botón "Recargar"
Tipo: Boolean
Valor por defecto:
true
p
Texto a mostrar en el botón "Més anterior"
Tipo: String
Valor por defecto:
Ant.
n
Texto a mostrar en el botón "Més siguiente"
Tipo: String
Valor por defecto:
Sig.
t
Texto a mostrar en el botón "Hoy"
Tipo: String
Valor por defecto:
Hoy
enableChangeView
permite modificar la vista del calendario entre: mese, semana, y año
Tipo: Boolean
Valor por defecto:
false
holidays
Feriados (o similares) a mostrar en el calendario. Estos registros se cargan al mismo tiempo que el componente. Se muestran a lado de la fecha.
Tipo: Array Object
Valor por defecto: false
Subparámetros de holidays
date
Fecha del feriado
Tipo: String
Valor por defecto:
null
title
Texto a mostrar en el calendario
Tipo: String
Valor por defecto:
null
events
Eventos a mostrar en el calendario. Estos eventos se cargan al mismo tiempo que el componente. Si se setea el parámetro"urlData", los eventos obtenidos de ese archivo se REMUEVEN los eventos seteados en este parámetro
Tipo: Array Object
Valor por defecto: false
Subparámetros de events
id
ID del registro
Tipo: String
Valor por defecto:
''
startDateTime
Fecha inicio del evento
Tipo: String
Valor por defecto:
null
endDateTime
Fecha fin del evento
Tipo: String
Valor por defecto:
null
title
Texto a mostrar en el calendario
Tipo: String
Valor por defecto:
null
class
Clase CSS a agregar a la etiqueta html del evento. Las clases por defecto son: red yellow gree y done (para mortrarlo tachado) Para evitar que un determinado evento no sea draggable, se debe agregar la clase "nodrag" al evento (en el xml o json)
Tipo: String
Valor por defecto:
null
schedulerOps
Parámetros para el planificador
Tipo: Object
Valor por defecto: []
Subparámetros de schedulerOps
urlRows
Path del archivo que deberá devolver las filas del planificador
Tipo: Path file
Valor por defecto:
false
CODIGO EJEMPLO
<rows> <row> <id></id> <title></title> <class></class> </row> </rows>
title
Titulo a mostrar en la celda del encabezado (primer columna)
Tipo: String
Valor por defecto:
Planificador
leyends
Permite mostrar leyendas abajo del planificador: {class:'default',title:'Titulo por defecto'}, Donde class será una clase CSS
Tipo: Array Object
Valor por defecto:
[]
Subparámetros de leyends
class
Clase CSS para darle color de fondo al evento
Tipo: String
Valor por defecto:
null
title
Nombre o descripción de la leyenda
Tipo: String
Valor por defecto:
null
actions
Acciones sobre los eventos (clic derecho)
Tipo: Array Object
Valor por defecto: []
Subparámetros de actions
name
Nombre a mostrar
Tipo: String
Valor por defecto:
null
icon
Nombre el icono a mostrar (VER ICONOS)
Tipo: String
Valor por defecto:
null
action
Acción a realizar
Tipo: String
Valor por defecto:
null
Valores aceptados: show | openwindow | delete | change | execute
url
Path del archivo (post).
Tipo: Path file
Valor por defecto:
'path/to/file'
disabled
deshabilita el botón
Tipo: Boolean
Valor por defecto:
false
field
Nombre del campo. Utilizado para la accion delete y change
Tipo: Field Database
Valor por defecto:
null
ask
Texto para realizar un pront. Utilizado para la acción delete y change.
Tipo: String
Valor por defecto:
false
urlValidator
Utilizado para las acciones change y delete Path del archivo donde se realizan validaciones especiales
Tipo: Path file
Valor por defecto:
'path/to/file'
onSubmitExecute
Utilizado para las acciones change y delete. Path de un archivo php para ejecutar (mediante include) una acción al finalizar el submit. El ID del registro insertado puede recuperarse de la variable key_value. En el caso de error hay que devolver el error en formato XML, hacer un ROLLBACK, agregar LOG al control y hacer un EXIT. En el caso de éxito no hay que devolver nada.
Tipo: Path file
Valor por defecto:
'path/to/file'
callback
Permite ejecutar una fucion javascript al finalizar la accion. Solo se aplica cuando la funcion del action es execute, change, delete
Tipo: String function
Valor por defecto:
false
idMod
ID del módulo donde se encuentra el componente. Este valor será enviado como parámetro al php. Por defecto envía el id del TAB (modulo) activo. Puede establecer cualquier ID de módulo.
Tipo: Integer
Valor por defecto:
idModActive()
requestPin
Permite generar una ventana donde se solicita al usuario su PIN (codigo de 4 digitos, que debe registrarlo en su cuenta de usuario) para continuar con la acción
Tipo: Boolean
Valor por defecto:
false
searchAdvanceItems
campos a colocar en la búsqueda avanzada
Tipo: flexBridge
Valor por defecto: []
searchadvancelabel
Label del boton "buscar" para el searchAdvanceItems
Tipo: String
Valor por defecto: Buscar
searchadvancetitle
Título del buscador avanzado
Tipo: String
Valor por defecto: Búsqueda Avanzada
searchAdvanceFloat
Para que el botón de la búsqueda avanzada se coloque a la derecha de los campos y no abajo
Tipo: Boolean
Valor por defecto: false
async
Permite realizar el POST a la url de manera asincrónica (al setear en false)
Tipo: Boolean
Valor por defecto: true
urlData
url a la cual se realizará el post para obtener los eventos a colocar en el calendario. El result de ese php debe respetar el formato Json (VER PARÁMETRO EVENTS). Al php se le envía como parametros:
idMod, month (actual) y year (actual).
Tipo: Path file
Valor por defecto: false
CODIGO EJEMPLO
".substr($sysname01_time,0,5)." - ";
$sysname01_date=$row["sysname01_date"];
$sysname01_deteail=str_replace("\n", "
", addslashes($row["sysname01_deteail"]));
$events .= "";
$events .= "$id_sysname01 ";
$events .= "";
$events .= "$sysname01_date ";
$events .= "$sysname01_date ";
$events .= " ";
$events .= " ";
$events .= "$extra-color $class ";
$events .= " ";
}
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT" );
header("Last-Modified: " . gmdate( "D, d M Y H:i:s" ) . "GMT" );
header("Cache-Control: no-cache, must-revalidate" );
header("Pragma: no-cache" );
header("Content-type: text/xml");
$xml = "";
$xml .= "";
$xml .= "$events";
$xml .= " ";
echo $xml;
?>
height
Alto del calendario
Tipo: Integer
Valor por defecto: 650
width
Alto del calendario
Tipo: Integer
Valor por defecto: 100%
title
Título del grid
Tipo: String
Valor por defecto: false
errormsg
Texto a mostrar cuando se produce un error
Tipo: String
Valor por defecto: Se ha producido un error de conexión. Consulte al Administrador.
method
Método del envio de datos a URL
Tipo: String
Valor por defecto: POST
dayCellHeight
Alto de la celda donde se muestra el número de día.
Tipo: Integer
Valor por defecto: 25
firstDayOfWeek
Primer día de la semana.
Tipo: Integer
Valor por defecto: 7
calendarStartDate
Fecha para inicializar el calendario
Tipo: function js
Valor por defecto: new Date()
eventsHeight
Alto de la etiqueta html de los eventos. Si no se ingresa ninguna valor, se mostrará todo es texto seteado en el "title" del evento
Tipo: Integer
Valor por defecto: false
currentMonthActiveOnly
Solo los días del mes actual son clickeables
Tipo: Boolean
Valor por defecto: false
classWeekend
Clase CSS de las celdas de días que caen en fin de semana
Tipo: String
Valor por defecto: weekend
urlLinkEvent
Path del archivo a abrir cuando se hace clic sobre un evento
Tipo: Path file
Valor por defecto: false
urlLinkDate
Path del archivo a abrir cuando se hace clic sobre el número de día
Tipo: Path file
Valor por defecto: false
dragableEvents
Permite arrastrar y soltar eventos dentro del calendario. Si se setea el parámetro dateFieldUpdate se actualizará automaticamente la fecha del resgistro.
Para evitar que un determinado evento no sea draggable, se debe agregar la clase "nodrag" al evento (en el xml o json)
Tipo: Boolean
Valor por defecto: false
dateFieldUpdate
Campo del registro que contiene la fecha, para actualizar al arrastrar un evento
Tipo: Field Database
Valor por defecto: false
urlDateUpdate
Path del archivo para actualizar el registro al mover de fecha
Tipo: Path file
Valor por defecto: lib/flex/flexUpdateField.php
title
Titulo del calendario (cuando esta en el modo fullscreen)
Tipo: String
Valor por defecto: null
dayTimeStep
Subdivisión de horas (para la vista semanal y diaria)
Tipo: Float
Valor por defecto: 0.5
Valores aceptados: 1 | 0.5 | 0.25 | 0.1 | 0.05
dayTimeBegin
Hora de inicio (para la vista semanal y diaria)
Tipo: Integer
Valor por defecto: 8
dayTimeEnd
Hora de finalización (para la vista semanal y diaria)
Tipo: Integer
Valor por defecto: 23
selectMultipleDays
Tipo: Boolean
Valor por defecto: false
CODIGO EJEMPLO
Permite, presionando la tecla SHIFT y haciendo clic en una celda del calendario, seleccionar VARIAS fechas a la vez.
Estas fechas son enviadas cuando se ejecutan los extraButtons
Eventos
onMonthChanging
Función a ejecutar mienstras se cambia de mes
Tipo: function js
Valor por defecto: function(dateIn) {return false;},
CODIGO EJEMPLO
function(dateIn) {
return false;
},
onDayLinkClick
Función a ejecutar al hacer clic sobre el número de día. Si esta seteado el parámetro urlLinkDate, onDayLinkClick es descartado
Tipo: function js
Valor por defecto: function(date) {return false;},
CODIGO EJEMPLO
function(date) {
return false;
},
onDayCellClick
Función a ejecutar al hacer clic sobre la celda de una fecha.
Tipo: function js
Valor por defecto: function(date) {return false;},
CODIGO EJEMPLO
function(date) {
return false;
},
onDayCellDblClick
Función a ejecutar al hacer dobleclic sobre el número de día.
Tipo: function js
Valor por defecto: function(date) {return false;},
CODIGO EJEMPLO
function(date) {
return false;
},
onEventBlockOut
Función al salir el mouse por encima de un evento
Tipo: function js
Valor por defecto: function(event) {return false;},
CODIGO EJEMPLO
function(event) {
return false;
},
onEventBlockOver
Función a ejecutar pasar el mouse por encima de un evento
Tipo: function js
Valor por defecto: function(event) {return false;},
CODIGO EJEMPLO
function(event) {
return false;
},
onEventBlockClick
Función a ejecutar al hacer clic sobre la etiqueta html contenedora de un evento. Si esta seteado el parámetro urlLinkEvent, onEventBlockClick es descartado
Tipo: function js
Valor por defecto: function(event) {return false;},
CODIGO EJEMPLO
function(event) {
return false;
},
onEventLinkClick
Función a ejecutar al hacer clic sobre el texto de un evento
Tipo: function js
Valor por defecto: function(event) {return false;},
CODIGO EJEMPLO
function(event) {
return false;
},
onMonthChanged
Función a ejecutar al cambiar de mes
Tipo: function js
Valor por defecto: function(dateIn) {return false;},
CODIGO EJEMPLO
function(dateIn) {
return false;
},
onEventDropped
Función a ejecutar al soltar un evento arrastrado.
Tipo: function js
Valor por defecto: function(id, newDate) {return false;},
CODIGO EJEMPLO
function(id, newDate) {
return false;
},
API - Funciones Accesibles
flexCalendarReload
Recarga el componente Calendario
$('#id_calendar').flexCalendarReload()
Ejemplos
ver_calendar.html
<script type="text/javascript">
$(document).ready(function($) {
$("#calendar_{idFlex}_{modulo}").flexcalendar({
idFlex:'{idFlex}',
urlData: '{urlData}',
urlLinkEvent: '{urlLinkEvent}',
urlLinkDate: '{urlLinkDate}',
dragableEvents:{dragableEvents},
dateFieldUpdate:'{dateFieldUpdate}',
timeFieldUpdate:'{timeFieldUpdate}',
dataType:'xml',
height: 500,
width: '100%',
holidays: [
{holidays}
],
navLinks: {
enableToday: true,
enableNextYear: true,
enablePrevYear: true,
enableRefresh: true,
enableChangeView:true,
p:'Ant.',
n:'Sig.',
t:'Hoy'
},
extraButtons:
[
{extraButtons}
],
searchAdvanceItems : [
{searchAdvanceItems}
]
});
});
</script>
<div id="calendar_{idFlex}_{modulo}"></div>
ver_calendar.php
set_file(array(
"main" => "ver_calendar.html",
));
/* -- VARIABLES GENERALES -- */
$idFlex="id_sysname01";
$modulo="folder_module";
$dragableEvents="true";
$dateFieldUpdate="sysname01_date";
$timeFieldUpdate="sysname01_time";
$urlData="modulos/".$modulo."/php/getEvents.php";
$urlLinkEvent="modulos/".$modulo."/php/ver_".$modulo."_abm.php";
$urlLinkDate="modulos/".$modulo."/php/ver_".$modulo."_abm.php";
/* ------------------------ */
$searchAdvanceItems="";
$extraButtons="
// {name:'Titulo', url:'modulos/ejemplo/php/ver_ejemploabm.php', class:'green'},
";
// version con feriados
$sql="SELECT * FROM flx_core_14_cab_feriados ";
$result = flex_query($sql,$link_msq);
while ($row = flex_fetch_assoc($result))
{
$id_flxcore14=$row["id_flxcore14"];
$flxcore14_fecha=$row["flxcore14_fecha"];
$flxcore14_detalle=$row["flxcore14_detalle"];
$v_fecha = split('-',$flxcore14_fecha);
$dia=$v_fecha[2];
$mes=$v_fecha[1]-1;
$ano=$v_fecha[0];
$holidays.='{"date": "'.$flxcore14_fecha.'", "title": "'.$flxcore14_detalle.'"},';
}
$t->set_var("searchAdvanceItems",$searchAdvanceItems);
$t->set_var("searchAdvanceItems",$searchAdvanceItems);
$t->set_var("extraButtons",$extraButtons);
$t->set_var("idFlex",$idFlex);
$t->set_var("modulo",$modulo);
$t->set_var("searchAdvanceItems",$searchAdvanceItems);
$t->set_var("dragableEvents",$dragableEvents);
$t->set_var("timeFieldUpdate",$timeFieldUpdate);
$t->set_var("dateFieldUpdate",$dateFieldUpdate);
$t->set_var("urlData",$urlData);
$t->set_var("urlLinkEvent",$urlLinkEvent);
$t->set_var("urlLinkDate",$urlLinkDate);
$t->set_var("holidays",$holidays);
$t->pparse("OUT", "main");
?>
Actualizaciones
- 5.0.7 Funcionalidad:
Se agrega la opción de poner cada 5 10 y 15 minutos el dayTimeStep del calendario en vista semana y dia
15-04-2024 - 4.1 Funcionalidad: Se agrega la opción de vista scheduler (planificador).
Esta opción permite configurar las filas del planificador a travez de un php específico para cada módulo.
La url de eventos deberá devolver la etiqueta idRow para determinar en que fila se ubica el evento.
06-07-2018 - 4.1 Funcionalidad: Se agregó la opcion ACTIONS (igual al del flexGrid). Por ahora solo aplicable para los eventos del calendario en vista scheduler
06-07-2018 - 3.6 Funcionalidad: Se agregó la opción para evitar que un determinado evento no sea draggable, se debe agregar la clase "nodrag" al evento (en el xml o json) en el atributo CLASS
14-10-2015