Escrito por: Martín el 21-01-2011 05:00:01 y leído 18477 veces

A causa de un proyecto en el que estoy trabajando, me vi en la necesidad de hacer un sistema de calendario de eventos donde se pudiera agregar un evento en el momento además de mostrar otros agregados por un administrador.
ACTUALIZACIÓN: He publicado una variante de este tutorial añadiendo la posibilidad de seleccionar el mes anterior y el siguiente. Entra en la demo y selecciona la variante.
ACTUALIZACIÓN 2: Gracias a Roberto Rivera, que me ha enviado la versión con varios eventos en el mismo día. Entra a la demo y accede al nuevo ejemplo.
ACTUALIZACIÓN 3: Al guardar el evento se ejecuta un strip_tags sobre el texto para eliminar tags html.
ACTUALIZACIÓN 4: Revisando este script me doy cuenta que el código que me envió Roberto contiene errores (hererados del mío tal vez), así que he eliminado todas las demos y he publicado la más nueva con varios eventos por día y funcionando.
El ejemplo es muy simple y no tiene soporte para meses futuros, pero sería muy fácil modificar el código para agregarlo. Simplemente, lista el mes actual buscando eventos en una tabla mysql y si los encuentra, cambia el color de la celda y mediante vTip muestra el texto del evento.
Cada celda tiene su botón para agregar un evento o eliminarlo (si lo tuviere), y cada celda muestra su propio formulario para agregar eventos.
Demostración del calendario de eventos en PHP.
He puesto una demo online para crear eventos totalmente funcional y la descarga del código completo utilizado para que lo adaptes a tus necesidades.
Códigos.
Los códigos son simples, constan de 3 partes, el agregado de librerías, el CSS y el php que hace toda la función. Vamos por partes...
ACTUALIZACIÓN 5: He actualizado el código de la demo con muchas correcciones y mejoras. Ya no salen los UNDEFINED si tienes los notice activados!
Código SQL
CREATE TABLE IF NOT EXISTS `tcalendario` ( `id` int(255) NOT NULL AUTO_INCREMENT, `fecha` date NOT NULL, `evento` text NOT NULL, PRIMARY KEY (`id`) )
Código PHP
$dbhost="localhost"; $dbname="calendario"; $dbuser="usuario"; $dbpass="clave"; $uploaddir="/tmp/"; $con=mysql_connect($dbhost,$dbuser,$dbpass);
Código PHP
<?php
ini_set('display_errors', 1);
ini_set('log_errors', 1);
ini_set('error_log', dirname(__FILE__) . '/error_log.txt');
error_reporting(E_ALL);
?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<title>Calendario en PHP con eventos</title>
<meta http-equiv="PRAGMA" content="NO-CACHE" />
<meta http-equiv="EXPIRES" content="-1" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="vtip.js"></script>
<script type="text/javascript">
$(document).ready(function(){
setTimeout(function() {$('#mensaje').fadeOut('fast');}, 3000);
});
</script>
<style>
* {margin: 0;padding: 0;font-family:Helvetica, Arial, Tahoma, sans-serif;}
html,body{height:100%;width:100%;outline:0;overflow:hidden}
body {text-align:center;margin:0;width:100%;height:100%;overflow:hidden;background:#fff;padding:30px 0}
p#vtip { display: none; position: absolute; padding: 5px; left: 5px; font-size: 0.75em; background-color: #666666; border: 1px solid #666666; -moz-border-radius: 5px; -webkit-border-radius: 5px; z-index: 9999;color:white }
p#vtip #vtipArrow { position: absolute; top: -10px; left: 5px }
.ok{border:1px dotted green;color:green;padding:10px}
#agenda{margin:10px;width:980px;margin:0 auto}
#agenda h1{text-align:left;margin:0;font-size:1.5em;color:#312c2b}
#agenda h2{text-align:left;margin:0;font-size:1em;color:#969696}
#agenda table.calendario {margin:10px auto;width:100%;border:1px dotted #ccc;font-size:12px;}
.calendario th {border:1px dotted #ccc;font-weight:bold;background:#666;color:white;padding:10px 5px;}
.calendario td{padding:10px 5px;text-align:center;border:1px dotted #ccc;width:100px;white-space:pre-line;}
.calendario td p{margin:5px;font-size:12px;border:1px solid #ccc;text-align:left;padding:5px}
.calendario td.desactivada {background:#dcdcdc;}
.calendario td.activa {background:#ffffff;}
.calendario td.evento {background:#312c2b;color:white}
.calendario td.hoy{font-weight:bold}
.calendario form{margin:5px 0 !important}
.calendario input.text{border:1px dotted #ccc;background:white;width:200px !important}
.calendario input.enviar{border:1px dotted #ccc;background:white;width:70px !important;background:#ccc;margin:0 0 0 10px;}
.calendario td img{vertical-align:middle;float:right;border:0;width:16px;height:16px}
.vtip{cursor:pointer;}
.verde{font-size:125% !important;font-weight:bold;color:green;}
.rojo{font-size:125% !important;font-weight:bold;color:red;}
</style>
</head>
<body>
<div id="agenda">
<?php
include("config.inc.php");
$mostrar="";
function fecha ($valor)
{
$timer = explode(" ",$valor);
$fecha = explode("-",$timer[0]);
$fechex = $fecha[2]."/".$fecha[1]."/".$fecha[0];
return $fechex;
}
if (isset($_POST["guardarevento"])=="Si")
{
$q1="insert into tcalendario (fecha,evento) values ('".$_POST["fecha"]."','".strip_tags($_POST["titulo"])."')";
mysql_select_db($dbname);
if ($r1=mysql_query($q1)) $mostrar="<p class='ok' id='mensaje'>Evento guardado correctamente.</p>";
else $mostrar= "<p class='error' id='mensaje'>Se ha producido un error guardando el evento.</p>";
}
if (isset($_GET["borrarevento"]))
{
$q1="delete from tcalendario where id='".$_GET["borrarevento"]."' limit 1";
mysql_select_db($dbname);
if ($r1=mysql_query($q1)) $mostrar="<p class='ok' id='mensaje'>Evento eliminado correctamente.</p>";
else $mostrar="<p class='error' id='mensaje'>Se ha producido un error eliminando el evento.</p>";
}
if (isset($_POST["addevent"])=="Si")
{
$q1="insert into tcalendario (fecha,evento) values ('".$_POST["fechas"]."','".$_POST["titulos"]."')";
mysql_select_db($dbname);
if ($r1=mysql_query($q1)) $mostrar="<p class='ok' id='mensaje'>Evento guardado correctamente.</p>";
else $mostrar="<p class='error' id='mensaje'>Se ha producido un error guardando el evento.</p>";
}
if (!isset($_GET["fecha"]))
{
$mesactual=intval(date("m"));
if ($mesactual<10) $elmes="0".$mesactual;
else $elmes=$mesactual;
$elanio=date("Y");
}
else
{
$cortefecha=explode("-",$_GET["fecha"]);
$mesactual=intval($cortefecha[1]);
if ($mesactual<10) $elmes="0".$mesactual;
else $elmes=$mesactual;
$elanio=$cortefecha[0];
}
$primeromes=date("N",mktime(0,0,0,$mesactual,1,$elanio));
if (!isset($_GET["mes"])) $hoy=date("Y-m-d");
else $hoy=$_GET["ano"]."-".$_GET["mes"]."-01";
if (($elanio % 4 == 0) && (($elanio % 100 != 0) || ($elanio % 400 == 0))) $dias=array("","31","29","31","30","31","30","31","31","30","31","30","31");
else $dias=array("","31","28","31","30","31","30","31","31","30","31","30","31");
$ides=array();
$eventos=array();
$titulos=array();
$q1="select * from tcalendario where month(fecha)='".$elmes."' and year(fecha)='".$elanio."'";
mysql_select_db($dbname);
$r1=mysql_query($q1);
if ($f1=mysql_fetch_array($r1))
{
$h=0;
do
{
$ides[$h]=$f1["id"];
$eventos[$h]=$f1["fecha"];
$titulos[$h]=$f1["evento"];
$h+=1;
}
while($f1=mysql_fetch_array($r1));
}
$meses=array("","Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre");
$diasantes=$primeromes-1;
$diasdespues=42;
$tope=$dias[$mesactual]+$diasantes;
if ($tope%7!=0) $totalfilas=intval(($tope/7)+1);
else $totalfilas=intval(($tope/7));
echo "<h2>Calendario de Eventos para: ".$meses[$mesactual]." de ".$elanio."</h2>";
echo $mostrar;
echo "<script>function mostrar(cual) {if (document.getElementById(cual).style.display=='block') {document.getElementById(cual).style.display='none';} else {document.getElementById(cual).style.display='block'} }</script>";
echo "<table class='calendario' cellspacing='0' cellpadding='0'>";
echo "<tr><th>L</th><th>M</th><th>M</th><th>J</th><th>V</th><th>S</th><th>D</th></tr><tr>";
$j=1;
$filita=0;
function buscarevento($fecha,$eventos,$titulos)
{
$clave=array_search($fecha,$eventos,true);
return $titulos[$clave];
}
for ($i=1;$i<=$diasdespues;$i++)
{
if ($filita<$totalfilas)
{
if ($i>=$primeromes && $i<=$tope)
{
echo "<td";
if ($j<10) $dd="0".$j;else $dd=$j;
$compuesta=$elanio."-$elmes-$dd";
if (count($eventos)>0 && in_array($compuesta,$eventos,true)) {echo " class=' evento";$noagregar=true;}
else {echo " class='activa";$noagregar=false;}
if ($hoy==$compuesta) echo " hoy";
if ($noagregar==false) echo "'>$j<a href='javascript:mostrar(\"evento$j\")' title='Crear un Evento el ".fecha($compuesta)."' class='vtip'><img src='add.png' /></a><form id='evento$j' method='post' action='".$_SERVER["PHP_SELF"]."' style='display:none'><input type='text' name='titulo' class='text' /><input type='Submit' name='Enviar' value='Guardar' class='enviar' /><input type='hidden' name='guardarevento' value='Si' /><input type='hidden' name='fecha' value='$compuesta' /></form>";
else echo "'>$j<a href='javascript:mostrar(\"evento$j\")' title='Agregar un Evento el ".fecha($compuesta)."' class='vtip'><img src='add.png' /></a><form id='evento$j' method='post' action='".$_SERVER["PHP_SELF"]."' style='display:none'><input type='text' name='titulos' class='text' /><input type='Submit' name='Enviar' value='Guardar' class='enviar' /><input type='hidden' name='addevent' value='Si' /><input type='hidden' name='fechas' value='$compuesta' /></form>";
$sqlevent="select * from tcalendario where fecha='".$compuesta."' order by id";
mysql_select_db($dbname);
$revent=mysql_query($sqlevent);
while($rowevent=mysql_fetch_array($revent))
{
echo "<p>$rowevent[evento]<a href='".$_SERVER["PHP_SELF"]."?borrarevento=".$rowevent["id"]."' onClick=\"return confirm('¿Confirmas la eliminación del Evento?')\" title='Eliminar este Evento del ".fecha($compuesta)."' class='vtip'><img src='delete.png' /></a></p>";
}
echo "</td>";
$j+=1;
}
else echo "<td class='desactivada'> </td>";
if ($i==7 || $i==14 || $i==21 || $i==28 || $i==35 || $i==42) {echo "<tr>";$filita+=1;}
}
}
echo "</table>";
$mesanterior=date("Y-m-d",mktime(0,0,0,$mesactual-1,01,$elanio));
$messiguiente=date("Y-m-d",mktime(0,0,0,$mesactual+1,01,$elanio));
echo "<p>« <a href='".$_SERVER["PHP_SELF"]."?fecha=$mesanterior'>Mes Anterior</a> - <a href='".$_SERVER["PHP_SELF"]."?fecha=$messiguiente'>Mes Siguiente</a> »</p>";
?>
</td></tr></table>
</body>
</html>Categorías: Calendario • Php • Jquery • Vtip •
calendario en php • calendario jquery • calendario eventos php • CALENDARIO DE EVENTOS PHP • calendario jquery php • calendario de eventos jquery • calendario de eventos en php • calendario en php con eventos • calendario php • agenda jquery • calendario eventos jquery • calendario php con eventos • php calendario eventos • calendario en jquery • calendario php jquery • calendario con eventos php • calendario php eventos • jquery agenda • calendario jquery con eventos • agenda jquery php • php agenda • jquery calendario de eventos • calendario con jquery • agenda php jquery • calendario de eventos con jquery • calendario con eventos en php • calendario de eventos con PHP y jQuery • php calendario de eventos • calendario agenda php • calendario con eventos jquery • calendario en php y jquery • agenda en jquery • JQUERY CALENDARIO • calendario de eventos php mysql • calendario eventos php jquey • calendario para php • calendario eventos php jquery • calendario de eventos con php • calendario en jquery para web • jquery ejemplos • sistema de eventos php • calendarios jquery • calendario eventos php y ajax • calendario jquery php mysql • calendario jquery martin • jquery calendario eventos • php calendario • calendario con php • sistema de calendario en php • cronograma jquery • calendarios de eventos en php • calendario de eventos jquery php • calendario de eventos php jquery • calendario eventos php mysql • php agenda calendario • agenda calendario jquery • calendarios php jquery • jquery calendar agenda • calendar php jQuery • agenda de eventos en php • calendarios en jquery • calendario eventos jquery php • agenda con jquery • jquery agenda calendar • agenda eventos jquery • tutorial calendario php eventos • calendario en php para formulario • eventos jquery • calendario en jquery php • calendario de eventos en jquery • vtip jquery • cronograma en php • calendario evento php • agenda calendario en php • http://www martiniglesias eu/blog/calendario-en-php-con-eventos-jquery-y-vtip/101 • agenda en php • calendario jquery 2011 • martin iglesias calendario • agenda php • calendario eventos javascript • varios eventos jquery • calendario eventos • insertar calendario en php • calendario eventos en php • calendario jquery mysql • ejemplo calendario jquery • jquery calendario agenda • crear calendario eventos php • agenda eventos php • jquery php • calendarios de eventos php • calendario de eventos en php y jquery • ejemplos de jquery • agenda php mysql • calendario php mysql • cronograma en jquery • calendario actividades php • agenda con php jquery • jquery dentro de php • calendario eventos ajax •
acordeón actionscript ajax alert ampliar imágenes android antes y después as audio aumentar letra barra desplazamiento blur bordes redondeados botón derecho calcular distancia calendario chart chrome collapse columnas combobox contar caracteres contar followers contextual css cu3er códigos date-picker descargas desenfoque desplazamiento dhtml disminuir letra dominios editor enlaces enlaces externos error 404 estrellitas expander fade fecha file upload filtrar contenido flash font size formulario formularios fotografías fpdf frames framework galería gmail google google docs gratis headers htaccess html html5 iconos ie6 igualar columnas inyección cabeceras ipad iphone javascript jquery jquery ui jquery,jquery ui,datepicker,calendario,eventos jquery,jquery ui,select múltiple,option json lavalamp librería librerías lightbox limitar caracteres link links lista listas listbox mail injection maquetación marcos mensajes menu menú menú lateral miniaturas mootools mouseover mp3 multinivel mysql máscaras móvil navegadores no conflict notas adhesivas notificaciones oauth ofuscador ordenar organigrama pdf php phpmailer picker player playlist plugin png portfolio preview reproductor reproductor de música safari scroll scrollto select selector de color sistema de votación slider snippets spam star rating subir ficheros switch mode tablas tamaño texto target blank textarea thumbnail tooltip twitter usuarios activos validacion validación validate videos vtip wap webkit www wysiwyg youtube zoom
Hay 7 usuario/s en esta página