Calendario rpido utilizando AJAX y PHP

Calendarios en lnea a menudo se utilizan en muchas aplicaciones web. Aunque popular, la lgica detrs de la creacin de un calendario puede ser aterrador, especialmente para aquellos que son nuevos a la programacin. Hay muchos calendarios de Internet en el mercado, pero algunos de ellos son bastante complicados. Si no somos capaces de entender el cdigo, se hace ms difcil para nosotros para personalizar el calendario para encajar en nuestra aplicacin existente. Por lo tanto, tenemos que crear un calendario que se puede conectar a s mismo cualquier sistema sin problemas y sin problemas. Ya sea que estemos usando Wordpress, Mambo / Joomla o Drupal, que slo tendr que insertar una lnea en nuestro cdigo para el calendario de trabajo. es decir, algo como esto:

<Php? require_once ( 'quick_calendar.php' ); ?>

Si ya ests aburrido en este momento o no interesado en saber cmo crear un calendario de la tela, no dude en ver una demostracin en vivo del calendario sencillo aqu . Los procedimientos de instalacin est en el cdigo fuente . Aparte de la configuracin de la base de datos de acceso para el calendario, no quiero cambiar otras cosas. Con AJAX, que incluso podra hacer que la pgina esttica como navegar entre los diferentes meses del calendario. En este tutorial, me gustara compartir con ustedes un calendario sencillo que he creado que fufills los objetivos mencionados anteriormente. El tutorial se supone que tiene conocimientos bsicos de PHP y SQL, pero no te preocupes, el cdigo real es mnimo y usted debera ser capaz de personalizar fcilmente mediante la lectura de los comentarios. He utilizado PHP 4 de modo que sea compatible con la mayora de los servidores. Tambin debe ser capaz de volver a crear el calendario fcilmente en otros lenguajes de programacin utilizando la misma lgica.

El primer paso: Identificacin del problema

Tal vez la parte ms difcil en la creacin de un calendario que est por venir para arriba con una buena solucin para mostrar los das del mes en la columna correcta, es decir, lunes, martes, etc .. 04 2006 Sol Lun Mar Casarse Jue Vie Sab 1 2 9 16 3 10 17 4 11 18 5 12 19 6 13 20 7 14 21 8 15 22

23 30

24

25

26

27

28

29

Tomemos, por ejemplo, abril 2006. Hay 30 das y 6 filas en el calendario. Si nos dan un da en el mes, digamos 15, tenemos que saber que cae en sbado y se encuentra en la tercera fila (tercera semana). No podemos dar por sentado que el primer da es siempre la primera celda de la tabla (celda superior izquierda).A veces, tenemos 4 o 5 semanas en un mes. Slo si sabemos cuntos das hay en un determinado mes y que el da primero del mes cae en slo podemos construir el calendario como se muestra arriba.

Obtencin de informacin crucial de la funcin de PHP date

PHP proporciona una funcin date () que nos da un montn de informacin til acerca de los das y meses del ao. Para construir el calendario para cualquier mes, necesitamos 2 piezas importantes de informacin de la funcin de la fecha, es decir, el "nmero de das del mes" y una "representacin numrica del primer da del mes". Puedo conseguir la fecha de hoy con facilidad desde el siguiente cdigo: / / Obtener el Fecha de $ ao / / obtiene el meses la fecha / / obtener el das $ fecha = ao, por ejemplo, 2006 = ('Y'); mes, por ejemplo, 04 $ = ('n'); da, por ejemplo, 3 ('j') ;

Para obtener el nmero de das de este mes, voy a utilizar el la fecha y la funcin mktime de esta manera: / / Obtener el nmero de das en el mes, por ejemplo, 28 $ DaysInMonth = date ("t", mktime (0,0,0, $ mes, 1, $ ao));

La representacin numrica del da de la semana va de 0 a 6. 0 es Domingo y 6 es Sbado. Una vez ms, para llegar el da numrica primero de este mes, la funcin mktime viene muy bien. / / Obtiene el primer da del mes, por ejemplo, 4 $ FirstDay = date ("w", mktime (0,0,0, $ mes, 1, $ ao));

El calendario mensual como una matriz 2-D

Si nos fijamos en el calendario de nuevo en abril de 2006, veremos que en realidad es una tabla (grilla) lleno de valores a partir de 1 de x (n de das del mes). El primer da del mes es una variable, aunque ... Puede ocurrir en cualquier da de la semana. En la tabla, cada celda imaginar como teniendo las coordenadas (x, y), a partir de la celda superior izquierda como (0,0) y la celda inferior derecha como (5,6). En el mes de abril, el primer da del mes se almacena en la coordenada (0,6). Por lo tanto, el plan ahora es almacenar los das del mes en una matriz de 2-D. En primer lugar, queremos conocer el nmero de clulas necesarias.

/ / Calcula el nmero total de espacios necesarios en orden de $ tempDays = $ FirstDay US $ DaysInMonth;

Entonces queremos saber el nmero de lneas necesarias. / / Calcula el total de filas necesitaba $ weeksInMonth techo = ($ tempDays / 7);

Rellenar la matriz 2-D

Conocer el nmero de filas y columnas de la matriz 2-D, ahora podemos llenar las matrices con los valores por medio de 2 bucles for. La primera celda se iniciar con un valor de 1 y las clulas posteriores tendrn sus valores aumentados en 1 hasta que se alcanza el final de la matriz.

? <Php for ( $ j = 0 ; $ j + l ; $ weeksInMonth ; $ j + +) { for ( $ i = 0 ; $ i + l , 7 ; $ i + +) { $ contador + +; $ semana [ $ j ] [ $ i ] = } } ?>

Para el mes de abril, la matriz temporal debe ser algo como esto: 1 8 15 22 29 36 2 9 16 23 30 37 3 10 17 24 31 38 4 11 18 25 32 39 5 12 19 26 33 40 6 13 20 27 34 41 7 14 21 28 35 42

$ contador ;

La magia de desplazamiento
Como puede ver, por encima de la matriz no es correcto. El primer da de abril, es decir, un valor debe estar en (0,6) en lugar de (0,0). Recuerde que la variable $ FirstDay? Es la representacin numrica del primer da del mes que pasa a ser 6 en abril de 2006. Si restamos $ FirstDay de todos los valores de la matriz, vamos a obtener la matriz de la siguiente manera: -5 -4 -3 -2 -1 0 1

2 9 16 23 30

3 10 17 24 31

4 11 18 25 32

5 12 19 26 33

6 13 20 27 34

7 14 21 28 35

8 15 22 29 36

Ahora debera ser capaz de adivinar lo que vamos a hacer a continuacin. En cuanto a la matriz anterior, se ve que ya tiene los valores que queremos, pero tambin tenemos algunos valores no deseados. Cualquier nmero menor que 1 o ms de $ DaysInMonth (nmero de das en un mes) debe ser ignorado.

? <Php funcin de funcin fillarray () { / / crear una matriz 2-d de ( $ j = 0 ; $ j < $ this -> weeksInMonth ; $ j + +) { for ( $ i = 0 ; $ i < 7 ; $ i + +) { $ contador + +; $ this -> semana [ $ j ] [ $ i ] = / / compensar los das $ this -> semana [ $ j ] [ $ i ] - = > semana [ $ j ] [ $ i ]> } } } } ?>
Esta es la funcin bsica en el algoritmo de calendario de toda una generacin.

$ contador ; $ this -> FirstDay ; 1 ) | | ( $ this "" ;

if (( $ this -> semana [ $ j ] [ $ i ] < $ this -> DaysInMonth )) { $ this -> semana [ $ j ] [ $ i ] =

Visualizacin del calendario

Obtencin de los valores de la derecha de la matriz 2-D, ahora estamos listos para mostrarlos. Ahora, vamos a crear una mesa y empezar de nuevo utilizando el bucle

foreach funcin.

<table border="1" width="400" cellpadding="2" cellspacing="2"> <tr> <th colspan='7'> <? = date ('M', mktime (0,0,0 , $ mes, 1, $ ao)). '$ Al ao.; ($ Semana as $ key => $ val) { echo "<tr>"; for ($ i = 0; $ i <7; $ i + +) { echo "<td align='center'> $ fecha </ td > "; } echo "</ tr>"; } ?> </ table>

La presentacin final ser como este: 04 2006 Sol Lun Mar Casarse Jue Vie Sab 1 2 9 16 23 30 Ahora tenemos un calendario claro. 3 10 17 24 4 11 18 25 5 12 19 26 6 13 20 27 7 14 21 28 8 15 22 29

Adicin de fechas especiales en el Calendario

Este calendario slo se dice que "los das de la semana" en el momento y no es muy til. La mayor parte del calendario en lnea tendr recuerdos tambin.Digamos, por ejemplo, si mi cumpleaos cae en el 04 de abril, quiero que el nmero 4 en el calendario se muestra de forma diferente, es posible con un hipervnculo en el que al hacer clic en l, llevar a cabo alguna tarea como la reorientacin de m a una determinada pgina o mostrar ms informacin acerca de m mismo en una ventana emergente ventanas etc .. Para ello, necesitamos una tabla en la base de datos con al menos 6 columnas: id, da, mes, ao, de enlace, la descripcin.

CREATE TABLE calendario ( id INT NOT NULL, da VARCHAR (2) NOT NULL, mes VARCHAR (2) NOT NULL, ao VARCHAR (4) NOT NULL, enlace VARCHAR (255) NOT NULL, TEXT desc NOT NULL, PRIMARY KEY (id) );

A continuacin, deber insertar algunos datos en la tabla para la prueba: INSERT INTO calendario (id, da, mes, ao, enlace, desc) VALORES ( '', '24 ',' * ', '2006', 'Http://www.sitecritic.net', 'Asegrate de que cccount web el da 24 de cada mes. 2006 slo! " ), ( '', '5 ', '11', '2006 ',' Some_javascript_funtion ',' los Juegos Olmpicos, no olvide comprar un billete de Alice. " ), ( '', '2 ', '1', '2007 ',' Some_javascript_funtion ',' a principios de 2007. Todos los nuevos planes para el ao? ), ( '', '9 ',' * ',' * ',' Http://www.evolt.org ',' Recuerde comprobar las actualizaciones de evolt.org cada mes. " );

El * en el mes o la columna del ao significa que cada mes o ao. A continuacin, hacemos una consulta y extraer las fechas importantes para un mes determinado y almacenarlo en una matriz.

? <Php $ sql '"*)" ; $ rs = $ db -> consulta ( $ sql ); = $ rs -> FetchRow ( )) { while ( $ rw = "SELECT * FROM agenda WHERE (mes = '$ mes y ao = $ ao) | | (mes =' * 'y ao = $ ao) | | (mes = $ mes y ao = '*') | | (mes = '*' y ao =

extracto ( $ rw ); $ enlaces [] = array ( 'da' => $ dia ',' meses '=> $ mes,' aos '=> $ al ao,' enlace '=> link $' desc => $ desc ); } ?>

Si creamos una clase para generar el calendario, tenemos que pasar la matriz $ vnculos en la clase de esta manera:

<Php? $ cal ?>

El

= & new

calendario ( $ CArray ,

$ hoy ,

$ enlaces ,

$ css ;)

$ cal -> hacer ();

CArray $ es una clase que contiene la matriz para el calendario normal, como se muestra en el paso da de hoy $ variable es la fecha de hoy. El $ vnculos variable contiene las fechas importantes CSS $ variable, podemos decorar la mesa el calendario y hacer que se vea ms bonito.

6. El

de este mes. Con la

Agregar capacidad de AJAX

Para hacer el calendario ms fcil de usar, queremos ser capaces de navegar fcilmente entre los meses o aos sin actualizar la pgina. Gracias a AJAX, ahora podemos hacerlo fcilmente. Si el usuario hace clic en "el mes que viene", por ejemplo, tenemos que llamar a la funcin AJAX para actualizar el calendario sin actualizar la pgina. Lo que s que el uso de XMLHttpRequest. Este es el cdigo principal que hace el truco. http.open ('get', + m + y = y '+ y +' y RAN = '+ ran_no' quick_calendar.php m =? ');

Despus de obtener una respuesta de la funcin de AJAX, es necesario que actualice el calendario. El calendario se envuelve alrededor de la etiqueta div llamado "quickCalender '. Slo necesito volver a escribir el contenido de la etiqueta sobre la marcha. . document.getElementById ("quickCalender") innerHTML = http.responseText;

Conclusiones y futuras mejoras

En este tutorial, nos fuimos a travs del concepto de cmo crear un calendario web utilizando AJAX y PHP. Me dej los detalles en el cdigo para evitar que el tutorial sea demasiado largo y indigestable. Si nos fijamos en el cdigo lo suficiente, te dars cuenta de que me lleno de un montn de cdigos en un solo archivo. Como buena prctica de programacin, me los han dividido en partes ms pequeas o archivos. Debido a que el objetivo de este proyecto es crear una rpida "plug and forget" sistema de calendario, lo hice a propsito. Adems, el enfoque orientado a objetos que utiliza en el cdigo no puede ser lo suficientemente flexible, si quiero tener diferentes diseos para el calendario. El problema puede ser fcilmente resuelto mediante la herencia, es decir, la creacin de una superclase de la clase QuickCalendar. A continuacin, puede tener BrownCalendar, SpecialCalendar ... etc Espero que disfruten de la lectura de este tutorial tanto como yo lo escrib. La demo completo puede verse aqu y el cdigo fuente est aqu .