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

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 .= "<![CDATA[$sysname01_name]]>"; $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