Cómo desarrollar un calendario de eventos utilizando jQuery, Ajax y PHP

Los calendarios de eventos son elementos muy útiles de un proyecto web. En ellos puedes añadir eventos en una fecha concreta. Hoy vamos a ver cómo crear un calendario de eventos de forma sencilla, utilizando jQuery, Ajax y PHP.

En el siguiente script vamos a desarrollar un calendario PHP y extraer los eventos de una tabla MySQL, para luego mostrarlos en su respectiva fecha en el calendario. Para ello utilizaremos jQuery, Ajax y PHP. ¿Estás preparado para la acción? ¡Pues vamos a ello!

Tabla de la base de datos

Crea una base de datos de prueba en tu alojamiento, y copia y pega el código SQL de más abajo
en tu gestor de BD, que por regla general suele ser PHPMyAdmin. Así crearemos la tabla de prueba que utilizaremos en este ejemplo, llamada events.

CREATE TABLE `events` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `title` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
 `date` date NOT NULL,
 `created` datetime NOT NULL,
 `modified` datetime NOT NULL,
 `status` tinyint(1) NOT NULL DEFAULT '1' COMMENT '1=Active, 0=Block',
 PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

dbConfig.php

Fichero que establecerá la conexión con la base de datos. Cambia las credenciales por las tuyas propias.

//db details
$dbHost = 'localhost';
$dbUsername = 'root';
$dbPassword = '';
$dbName = 'codexworld';

//Connect and select the database
$db = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName);

if ($db->connect_error) {
    die("Connection failed: " . $db->connect_error);
}

functions.php

Este archivo se encarga de todo el funcionamiento interno del calendario. Lee las líneas de comentarios para saber más acerca de las funciones.

<?php
/*
 * Function requested by Ajax
 */
if(isset($_POST['func']) && !empty($_POST['func'])){
    switch($_POST['func']){
        case 'getCalender':
            getCalender($_POST['year'],$_POST['month']);
            break;
        case 'getEvents':
            getEvents($_POST['date']);
            break;
        default:
            break;
    }
}

/*
 * Get calendar full HTML
 */
function getCalender($year = '',$month = '')
{
    $dateYear = ($year != '')?$year:date("Y");
    $dateMonth = ($month != '')?$month:date("m");
    $date = $dateYear.'-'.$dateMonth.'-01';
    $currentMonthFirstDay = date("N",strtotime($date));
    $totalDaysOfMonth = cal_days_in_month(CAL_GREGORIAN,$dateMonth,$dateYear);
    $totalDaysOfMonthDisplay = ($currentMonthFirstDay == 7)?($totalDaysOfMonth):($totalDaysOfMonth + $currentMonthFirstDay);
    $boxDisplay = ($totalDaysOfMonthDisplay <= 35)?35:42;
?>
    <div id="calender_section">         <h2>             <a href="javascript:void(0);" onclick="getCalendar('calendar_div','<?php echo date("Y",strtotime($date.' - 1 Month')); ?>','<?php echo date("m",strtotime($date.' - 1 Month')); ?>');">&lt;&lt;</a>             <select name="month_dropdown" class="month_dropdown dropdown"><?php echo getAllMonths($dateMonth); ?></select>             <select name="year_dropdown" class="year_dropdown dropdown"><?php echo getYearList($dateYear); ?></select>             <a href="javascript:void(0);" onclick="getCalendar('calendar_div','<?php echo date("Y",strtotime($date.' + 1 Month')); ?>','<?php echo date("m",strtotime($date.' + 1 Month')); ?>');">&gt;&gt;</a>         </h2>         <div id="event_list" class="none"></div>         <div id="calender_section_top">             <ul>                 <li>Sun</li>                 <li>Mon</li>                 <li>Tue</li>                 <li>Wed</li>                 <li>Thu</li>                 <li>Fri</li>                 <li>Sat</li>             </ul>         </div>         <div id="calender_section_bot">             <ul>
            <?php 
                $dayCount = 1; 
                for($cb=1;$cb<=$boxDisplay;$cb++){
                    if(($cb >= $currentMonthFirstDay+1 || $currentMonthFirstDay == 7) && $cb <= ($totalDaysOfMonthDisplay)){
                        //Current date
                        $currentDate = $dateYear.'-'.$dateMonth.'-'.$dayCount;
                        $eventNum = 0;
                        //Include db configuration file
                        include 'dbConfig.php';
                        //Get number of events based on the current date
                        $result = $db->query("SELECT title FROM events WHERE date = '".$currentDate."' AND status = 1");
                        $eventNum = $result->num_rows;
                        //Define date cell color
                        if(strtotime($currentDate) == strtotime(date("Y-m-d"))){
                            echo '<li date="'.$currentDate.'" class="grey date_cell">';
                        }elseif($eventNum > 0){
                            echo '<li date="'.$currentDate.'" class="light_sky date_cell">';
                        }else{
                            echo '<li date="'.$currentDate.'" class="date_cell">';
                        }
                        //Date cell
                        echo '<span>';
                        echo $dayCount;
                        echo '</span>';
                        
                        //Hover event popup
                        echo '<div id="date_popup_'.$currentDate.'" class="date_popup_wrap none">';
                        echo '<div class="date_window">';
                        echo '<div class="popup_event">Events ('.$eventNum.')</div>';
                        echo ($eventNum > 0)?'<a href="javascript:;" onclick="getEvents(''.$currentDate.'');">view events</a>':'';
                        echo '</div></div>';
                        
                        echo '</li>';
                        $dayCount++;
            ?>
            <?php }else{ ?>
                <li><span>&nbsp;</span></li>
            <?php } } ?>
            </ul>         </div>     </div>

    <script type="text/javascript">         function getCalendar(target_div,year,month){             $.ajax({                 type:'POST',                 url:'functions.php',                 data:'func=getCalender&year='+year+'&month='+month,                 success:function(html){                     $('#'+target_div).html(html);                 }             });         }                  function getEvents(date){             $.ajax({                 type:'POST',                 url:'functions.php',                 data:'func=getEvents&date='+date,                 success:function(html){                     $('#event_list').html(html);                     $('#event_list').slideDown('slow');                 }             });         }                  function addEvent(date){             $.ajax({                 type:'POST',                 url:'functions.php',                 data:'func=addEvent&date='+date,                 success:function(html){                     $('#event_list').html(html);                     $('#event_list').slideDown('slow');                 }             });         }                  $(document).ready(function(){             $('.date_cell').mouseenter(function(){                 date = $(this).attr('date');                 $(".date_popup_wrap").fadeOut();                 $("#date_popup_"+date).fadeIn();                 });             $('.date_cell').mouseleave(function(){                 $(".date_popup_wrap").fadeOut();                     });             $('.month_dropdown').on('change',function(){                 getCalendar('calendar_div',$('.year_dropdown').val(),$('.month_dropdown').val());             });             $('.year_dropdown').on('change',function(){                 getCalendar('calendar_div',$('.year_dropdown').val(),$('.month_dropdown').val());             });             $(document).click(function(){                 $('#event_list').slideUp('slow');             });         });     </script>
<?php
}

/*
 * Get months options list.
 */
function getAllMonths($selected = ''){
    $options = '';
    for($i=1;$i<=12;$i++)
    {
        $value = ($i < 10)?'0'.$i:$i;
        $selectedOpt = ($value == $selected)?'selected':'';
        $options .= '<option value="'.$value.'" '.$selectedOpt.' >'.date("F", mktime(0, 0, 0, $i+1, 0, 0)).'</option>';
    }
    return $options;
}

/*
 * Get years options list.
 */
function getYearList($selected = ''){
    $options = '';
    for($i=2015;$i<=2025;$i++)
    {
        $selectedOpt = ($i == $selected)?'selected':'';
        $options .= '<option value="'.$i.'" '.$selectedOpt.' >'.$i.'</option>';
    }
    return $options;
}

/*
 * Get events by date
 */
function getEvents($date = ''){
    //Include db configuration file
    include 'dbConfig.php';
    $eventListHTML = '';
    $date = $date?$date:date("Y-m-d");
    //Get events based on the current date
    $result = $db->query("SELECT title FROM events WHERE date = '".$date."' AND status = 1");
    if($result->num_rows > 0){
        $eventListHTML = '<h2>Events on '.date("l, d M Y",strtotime($date)).'</h2>';
        $eventListHTML .= '<ul>';
        while($row = $result->fetch_assoc()){ 
            $eventListHTML .= '<li>'.$row['title'].'</li>';
        }
        $eventListHTML .= '</ul>';
    }
    echo $eventListHTML;
}
?>

index.php

En este archivo, se muestra el calendario de eventos con sus respectivos eventos. Para ello necesitas incluir el fichero functions.php y llamar a la función getCalender() para que aparezca, lógicamente, el calendario. También, incluye la librería de jQuery y el fichero style.css

<?php
//Include the event calendar functions file
include_once('functions.php');
?> <!DOCTYPE html> <html lang="en-US"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>PHP Event Calendar by CodexWorld</title> <!-- Include the stylesheet --> <link type="text/css" rel="stylesheet" href="style.css"/> <!-- Include the jQuery library --> <script src="jquery.min.js"></script> </head> <body> <!-- Display event calendar --> <div id="calendar_div">         <?php echo getCalender(); ?> </div> </body> </html>

Probándolo

Una vez abierto el fichero index.php en tu navegador, verás un calendario como el de la imagen de abajo. El día de hoy tiene un fondo gris, y las fechas que tienen eventos, cuentan con un color de fondo azul muy claro. Claro está, puedes escoger el año y el mes que desees en los controles que aparecen en la parte superior del calendario de eventos.

Cuando hagamos clic en una de las celdas azul claro (las que contienen eventos), aparecerá un popup con los eventos de ese día.

Fuente: codexworld.com

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP