fCalendar

Principales características


fCalendar Test

Ejemplo1 - Probando controlles y estilos

En este calendario se esta probando con controles externos, usted puede instanciar el fCalendar, usar sus métodos y hacer sus propios controles personalizados.

1. Código base - insertando las librerias necesarias

<!-- código en el <head> Librerias a utilizar --> <script type="text/javascript" src="src/fcalendar.js" language='Javascript'></script> <script type="text/javascript" src="src/fcal-lang-es.js"></script> <!-- Agregamos la hoja de estilo para la plantilla white --> <link rel="stylesheet" type="text/css" href="src/templates/white.css" />

2. En tu sitio asigna un div(s) vacio(s) con identificador(es)

<div id="miFCalendarJS"></div>

3. Creando el objeto, puedes crear tantos calendarios como divs hayas destinados

window.onload = function (){ //FCalendar por defecto arranca con el id(miFCalendarJS) del div contenedor para nuestro calendario //ademas en este caso queremos agregarle el estilo blanco(white) miCalendario = new FCalendar('miFCalendarJS', {style:white}) }

4. Agregando controles - Jugando con el fCalendar

<!-- Podemos enlasar nuestros inputs y agregarle en sus eventos acciones sobre nuestro fCalendar --> <select id='anio' onchange='miCalendario.setDate(this.value,document.getElementById("mountId").selectedIndex)'> </select> <select id='mountId' onchange='miCalendario.setDate(document.getElementById("anio").value,this.selectedIndex)'> </select>
p>fCalendar cuenta con algunas funciones de control, podemos agregar, eventos para días específicos ó para todos, el calendario también cuenta para sobre el control del mes,año a mostrar, lista de funciones útiles

Ejemplo 2 - Usando las funciones, agregando eventos, días

Usted puede crear tantos calendarios como necesite, también puede definir los eventos de determinados días, veamos esta prueba.

1. En nuestra pagina asignamos un div para el nuestro calendario.

<div id="miCalendarioConEventos"></div> <!-- este input solo para hacer pruebas con las funciones de usuario (revisar el punto 4) --> <input id='inputDate' >

2. En la cabecera Creamos un calendario con una fecha especifica(previamente se incorporan las librerias).

window.onload = function (){ miCalendarioConEventos = new FCalendar('miCalendarioConEventos',2000,9) }

3.- Agregar días y eventos predeterminados y especifcos

miCalendarioConEventos.appendEventsDays({ 'class': 'dayTypeA', 'event' : 'miFunciondiasA', 'year' : 2000, 'msg' : 'Click sobre el día %day% mes %month% año %year%', 'days' : [ '10/01', '11/06', '9/15', '9/16', '9/17' ,'8/15' , '11/02' ] }) //agregamos días de otros tipo miCalendarioConEventos.appendEventsDays({ 'class': 'dayTypeB', 'event' : 'miFunciondiasB', 'year' : 2000, 'msg' : 'Este del día %day% mes %month% año %year% evento sera admistrado por miFunciondiasB', 'days' : [ '9/1', '9/25', '9/05' ] }) //agregamos días del tipoC, Notar que no es neceario que la funcion la administre un evento miCalendarioConEventos.appendEventsDays({ 'class': 'dayTypeC', 'year' : 2000, 'msg' : 'día del tipoC día %day% mes %month% año %year% no sera administrado por ninguna función', 'days' : [ '9/3', '9/29', '9/04' ] }) //asi sucesivamente se pueden seguir agregando mientras se defina funciones y/o estilos en el css //.. //se puede agregar una función por defecto a todos los días, con una notación ligeramente mas simple miCalendarioConEventos.defaultEventForDay(miFuncionPorDefecto, 'Hoy %year%/%month%/%day% es un día normal')

Nota: los patrones %day%, %month% y %year% son sustituidos por sus valores correspondientes antes el renderizado del jCalendar.

Nota2: La mayor diferencia entre fCalendar.defaultEventForDay(...) y fCalendar.appendEventsDays(...) esta en el manejador de eventos, la primera recibe la función administradora del evento y la ejecuta en el evento click, mientras que appendEventsDays recibe el nombre de la función administradora del evento la cual es evaluada en el evento click.

4.- Se Agrega también el el area del código javascript en el head, las siguientes funciones.

//Prototipo funcion def. por el usauario para manejar determinados días del año function miFunciondiasA(year, month, day, div_id){ alert('año'+year+' mes'+month+' día'+day) //cambiamos el valor del input de abajo document.getElementById('inputDate').value = year+'/'+month+'/'+day } //Prototipo funcion def. por el usauario para manejar determinados días del año function miFunciondiasB(year, month, day, div_id){ window.location += year+'/'+month+'/'+day } //Prototipo funcion def. por el usauario por defecto sobre los días function miFuncionPorDefecto(year, month, day, div_id){ alert('Funcion por defecto: '+year+' mes '+month + ' día'+ day+' Identificador del Div '+div_id ) //cambiamos el valor del input de abajo document.getElementById('inputDate').value = year+'-'+month+'-'+day }
descargar esta pagina en formato markdown Acceder al repositorio