Como hacer que cuando al dar click en una fecha del calen. me inse. datos en DB

Drakaris · 1 Julio 2018, 23:39 PM

Hola tengo un calendario php y me gustaría que al clicar en una fecha (es decir en una de sus celdas) me inserte un evento en la DB, por ahora lo estoy intentando hacer, y la llamada a la inserción de datos a la DB lo haré con AJAX.

Tengo estos ficheros:

HTML (parte):

Código [Seleccionar]


<script>
  $(document).ready(function(){
    $(".dates li").click(function(){
      alert("<?php echo $j; ?>");
    });
  })
</script>
</head>
<body id="fondo">
<div style="position:absolute;opacity:1;width:auto;left:0%;right:0%;">
<div class="gridcontainer">
<div class="gridwrapper" style="height:10vw;" id="header1">
  <a href="http://g-t-e.260mb.net/profesorado/" style="text-decoration: none;">
    <img src="http://g-t-e.260mb.net/profesorado/imagenes/logo_GTE_profesorado.png" class="logo_inicio" id="logo_inicio1">
  </a>
</div>
</div>
  <nav class="menu">
    <ul class="submenus">
      <li class="dropdown">
        <a href="http://g-t-e.260mb.net/profesorado/GTE/1_eso" class="dropbtn">1 ESO</a>
        <div class="dropdown-content">
          <a href="http://g-t-e.260mb.net/profesorado/GTE/1_eso/1A">1&ordm; A</a>
          <a href="http://g-t-e.260mb.net/profesorado/GTE/1_eso/1B">1&ordm; B</a>
          <a href="http://g-t-e.260mb.net/profesorado/GTE/1_eso/1C">1&ordm; C</a>
          <a href="http://g-t-e.260mb.net/profesorado/GTE/1_eso/1D">1&ordm; D</a>
          <a href="http://g-t-e.260mb.net/profesorado/GTE/1_eso/1E">1&ordm; E</a>
          <a href="http://g-t-e.260mb.net/profesorado/GTE/1_eso/1F">1&ordm; F</a>
          <a href="http://g-t-e.260mb.net/profesorado/GTE/1_eso/1G">1&ordm; G</a>
        </div>
      </li>
      <li class="dropdown">
        <a href="http://g-t-e.260mb.net/profesorado/GTE/2_eso" class="dropbtn">2 ESO</a>
        <div class="dropdown-content">
          <a href="http://g-t-e.260mb.net/profesorado/GTE/2_eso/2A">2&ordm; A</a>
          <a href="http://g-t-e.260mb.net/profesorado/GTE/2_eso/2B">2&ordm; B</a>
          <a href="http://g-t-e.260mb.net/profesorado/GTE/2_eso/2C">2&ordm; C</a>
          <a href="http://g-t-e.260mb.net/profesorado/GTE/2_eso/2D">2&ordm; D</a>
          <a href="http://g-t-e.260mb.net/profesorado/GTE/2_eso/2E">2&ordm; E</a>
          <a href="http://g-t-e.260mb.net/profesorado/GTE/2_eso/2F">2&ordm; F</a>
        </div>
      </li>
      <li class="dropdown">
        <a href="http://g-t-e.260mb.net/profesorado/GTE/3_eso" class="dropbtn">3 ESO</a>
        <div class="dropdown-content">
          <a href="http://g-t-e.260mb.net/profesorado/GTE/3_eso/3A">3&ordm; A</a>
          <a href="http://g-t-e.260mb.net/profesorado/GTE/3_eso/3B">3&ordm; B</a>
          <a href="http://g-t-e.260mb.net/profesorado/GTE/3_eso/3C">3&ordm; C</a>
          <a href="http://g-t-e.260mb.net/profesorado/GTE/3_eso/3D">3&ordm; D</a>
          <a href="http://g-t-e.260mb.net/profesorado/GTE/3_eso/3E">3&ordm; E</a>
          <a href="http://g-t-e.260mb.net/profesorado/GTE/3_eso/3F">3&ordm; F</a>
        </div>
      </li>
      <li class="dropdown">
        <a href="http://g-t-e.260mb.net/profesorado/GTE/4_eso" class="dropbtn">4 ESO</a>
        <div class="dropdown-content">
          <a href="http://g-t-e.260mb.net/profesorado/GTE/4_eso/4A">4&ordm; A</a>
          <a href="http://g-t-e.260mb.net/profesorado/GTE/4_eso/4B">4&ordm; B</a>
          <a href="http://g-t-e.260mb.net/profesorado/GTE/4_eso/4C">4&ordm; C</a>
          <a href="http://g-t-e.260mb.net/profesorado/GTE/4_eso/4D">4&ordm; D</a>
          <a href="http://g-t-e.260mb.net/profesorado/GTE/4_eso/4E">4&ordm; E</a>
          <a href="http://g-t-e.260mb.net/profesorado/GTE/4_eso/4F">4&ordm; F</a>
        </div>
    </li>
    <li style="float:right;" class="icons">
      <a href="http://www.g-t-e.260mb.net/profesorado">
        <i class="fa fa-home"></i>
      </a>
    </li>
    <li style="float:right;" class="icons">
      <a href="https://sites.google.com/site/iescalvia/organitzacio/equip" target="_blank">
        <i class="fa fa-users"></i>
      </a>
    </li>
    </ul>
  </nav>
  <li class="fa fa-pencil-square" title="A&ntilde;adir eventos" id="eventos1"></li>
  <font id="title_1A">1 ESO A</font>
  <div id="calendar_div" style="position: relative; top:5vmax; left: 0vmax;">
     <?php echo getCalender(); ?>
  </div>
  <br>
  <table align="center" class="legenda_calendario">
      <tbody>
        <tr>
            <th colspan="2" class="subtitulo">Inicio de curso y vacaciones</th>
            <th class="titulo">otros</th>
        </tr>
        <tr>
            <td class="td">Inicio de curso:&nbsp;<canvas height="20" width="20" style="background-color:#F78181; border-radius:5px;"></canvas></td>
            <td class="td">Vacaciones de navidad:&nbsp;<canvas height="20" width="20" style="background-color:#81F781; border-radius:5px;"></canvas></td>
            <td class="td">Hoy:&nbsp;<canvas height="20" width="20" style="background-color:#DDDDDD; border-radius: 5px;"></canvas></td>
        </tr>
        <tr>
            <td class="td">Vacaciones de Pascua:&nbsp;<canvas height="20" width="20" style="background-color:#F2F5A9; border-radius:5px;"></canvas></td>
            <td class="td">Dias festivos:&nbsp;<canvas height="20" width="20" style="background-color:#E2A9F3; border-radius:5px;"></canvas></td>
            <td class="td">eventos:&nbsp;<canvas height="20" width="20" style="background-color:#B9FFFF; border-radius:5px;"></canvas></td>
        </tr>
    </tbody></table>
  <div class="gridwrapper" style="height:15vw; position:relative; bottom:-10vw;" id="footer1">
  <!-- footer -->
    <a href="https://web2.alexiaedu.com/ACWeb/LogOn.aspx?key=WRcKBnV4m3M%3d" target="_blank" style="text-decoration: none;">
      <img src="imagenes/Alexia1.png" class="alexia" title="Alexia">
    </a>
    <a href="http://moodle2.iescalvia.com/" target="_blank" style="text-decoration: none;">
      <img src="imagenes/moodle.png" class="moodle" title="Moodle">
    </a>
    <a href="https://www.bachilleratoartistico-iescalvia.com/" target="_blank" style="text-decoration: none; opacity: 1;">
      <img src="imagenes/batart.png" class="batart" title="Bachillerato art&iacute;stico">
    </a>
    <a href="http://iescalviablog.blogspot.com.es/" target="_blank" style="text-decoration: none;">
      <img src="imagenes/pillospress.png" class="pillospress" title="pillo's press">
    </a>
    <a href="http://www.cucalvia.com/" target="_blank" style="text-decoration: none;">
      <img src="imagenes/CUC.png" class="CUC" title="CUC">
    </a>
    <a href="http://weib.caib.es/" target="_blank" style="text-decoration: none;">
      <img src="imagenes/weib.png" class="weib" title="weib">
    </a>
    <br>
    <a href="http://iescalvia.blogspot.com.es/" target="_blank" style="text-decoration: none;">
      <img src="imagenes/bloggeries.png" class="bloggeries" title="Informaci&oacute;n del IES Calvi&aacute;">
    </a>
    <a href="http://www.erasmusplus.gob.es/" target="_blank" style="text-decoration: none;">
      <img src="imagenes/erasmus.png" class="erasmus" title="Erasmus">
    </a>
    <a href="https://www3.caib.es/xestib/xestib/menu/iniciGestio" target="_blank" style="text-decoration: none;">
      <img src="imagenes/GESTIB2.0.jpg" class="GESTIB2" title="GESTIB2.0">
    </a>
    <a href="mailto:iescalvia@gmail.com" style="text-decoration: none;">
      <i class="fa fa-envelope mail" title="iescalvia@gmail.com"></i>
    </a>
    <a href="tel:+34 971690229" style="text-decoration: none;">
      <i class="fa fa-tty telefono" title="+34 971690229"></i>
    </a>
    <a href="fax:+34 971694931" style="text-decoration: none;">
      <i class="fa fa-fax fax1" title="+34 971694931"></i>
    </a>
    <a href="https://sites.google.com/site/iescalvia/organitzacio/equip" target="_blank" style="text-decoration: none;" title="&iquest;Quienes somos?">
      <i class="fa fa-users equipo"></i>
    </a>
    <a href="guia.pdf" download="guia.pdf">
      <i class="fa fa-file-pdf-o descarga"></i>
    </a>
    <div class="red">
              <div class="social">
                  <div><a href="https://www.facebook.com/ies.calvia" target="_blank" class="fa fa-facebook-square facebook"></a></div>
                  <div><a href="https://www.youtube.com/user/iescalviablog" target="_blank" class="fa fa-youtube-play youtube"></a></div>
                  <div><a href="https://plus.google.com/114947718295379948989" target="_blank" class="fa fa-google-plus googleplus"></a></div>
                  <div><a href="mailto:iescalvia@gmail.com" class="fa fa-envelope correo" title="iescalvia@gmail.com"></a></div>
                  <div><a href="tel:+34971690229" class="fa fa-volume-control-phone telf" title="+34 971690229"></a></div>
                  <div><a href="fax:+34971694931" class="fa fa-fax mensaje" title="+34 971694931"></a></div>
              </div> 
              <div class="volver12">
                <div class="volver_1">
                  <div>
                    <a href="http://www.g-t-e.260mb.net/profesorado/GTE/" class="volver_eso fa fa-square-o" title="Volver a los cursos">
                    </a>
                  </div>
                  <div>
                    <a href="http://www.g-t-e.260mb.net/profesorado/GTE/1_eso/" class="fa fa-arrow-left  volver" title="Volver">
                    </a>
                  </div>
                </div>
              </div>
    </div>
  </div>
<div id="contactos_div"></div>
</div>
</div>
<div class="fondo_popup">
  <div class="popup-edicion">
    <center class="fondo_centrado"><font class="texto_edicion">Editar vacaciones</font><i class="fa fa-close"></i></center>
    <div>
      <left class="coordinar_left">
        <select id="tipoEventos">
          <option selected disabled>-Editar...-</option>
          <option value="Vacaciones_de_Pascua">Vacaciones de Pascua</option>
          <option value="Vacaciones_de_Navidad">Vacaciones de Navidad</option>
          <option value="Dias_festivos">Dias festivos</option>
          <option value="inicio_de_curso">Inicio de curso</option>
        </select>
      </left>
      <center>
          <div class="caja">
            <?php
            include 'calendario.php';
             
            $calendar = new Calendar();
             
            echo $calendar->show();
            ?>             
          </div>
      </center>      
    </div>
  </div>
</div>
</body>

calendario.php:

Código [Seleccionar]


<?php
/**
*@author  Xu Ding
*@email   thedilab@gmail.com
*@website http://www.StarTutorial.com
**/
class Calendar {  
     
    /**
     * Constructor
     */
    public function __construct(){     
        $this->naviHref = htmlentities($_SERVER['PHP_SELF']);
    }
     
    /********************* PROPERTY ********************/  
    private $dayLabels = array("L","M","X","J","V","S","D");
     
    private $currentYear=0;
     
    private $currentMonth=0;
     
    private $currentDay=0;
     
    private $currentDate=null;
     
    private $daysInMonth=0;
     
    private $naviHref= null;
     
    /********************* PUBLIC **********************/  
        
    /**
    * print out the calendar
    */
    public function show() {
        $year  == null;
         
        $month == null;
         
        if(null==$year&&isset($_GET['year'])){
 
            $year = $_GET['year'];
         
        }else if(null==$year){
 
            $year = date("Y",time());  
         
        }          
         
        if(null==$month&&isset($_GET['month'])){
 
            $month = $_GET['month'];
         
        }else if(null==$month){
 
            $month = date("m",time());
         
        }                  
         
        $this->currentYear=$year;
         
        $this->currentMonth=$month;
         
        $this->daysInMonth=$this->_daysInMonth($month,$year);  
         
        $content='<div id="calendar">'.
                        '<div class="box">'.
                        $this->_createNavi().
                        '</div>'.
                        '<div class="box-content">'.
                                '<ul class="label">'.$this->_createLabels().'</ul>';   
                                $content.='<div class="clear"></div>';     
                                $content.='<ul class="dates">';    
                                 
                                $weeksInMonth = $this->_weeksInMonth($month,$year);
                                // Create weeks in a month
                                for( $i=0; $i<$weeksInMonth; $i++ ){
                                     
                                    //Create days in a week
                                    for($j=1;$j<=7;$j++){
                                        $content.=$this->_showDay($i*7+$j);
                                    }
                                }
                                 
                                $content.='</ul>';
                                 
                                $content.='<div class="clear"></div>';     
             
                        $content.='</div>';
                 
        $content.='</div>';
        return $content;   
    }
     
    /********************* PRIVATE **********************/ 
    /**
    * create the li element for ul
    */
    private function _showDay($cellNumber){
         
        if($this->currentDay==0){
             
            $firstDayOfTheWeek = date('N',strtotime($this->currentYear.'-'.$this->currentMonth.'-01'));
                     
            if(intval($cellNumber) == intval($firstDayOfTheWeek)){
                 
                $this->currentDay=1;
                 
            }
        }
         
        if( ($this->currentDay!=0)&&($this->currentDay<=$this->daysInMonth) ){
             
            $this->currentDate = date('Y-m-d',strtotime($this->currentYear.'-'.$this->currentMonth.'-'.($this->currentDay)));
             
            $cellContent = $this->currentDay;
             
            $this->currentDay++;   
             
        }else{
             
            $this->currentDate =null;
 
            $cellContent=null;
        }
             
         
        return '<li id="li-'.$this->currentDate.'" class="'.($cellNumber%7==1?' start ':($cellNumber%7==0?' end ':' ')).
                ($cellContent==null?'mask':'').'">'.$cellContent.'</li>';
    }
     
    /**
    * create navigation
    */
    private function _createNavi(){
    	setlocale(LC_TIME, "spanish");
  		$date_new = date('Y M',strtotime($this->currentYear.'-'.$this->currentMonth.'-1'));
  		$day = strftime("%G del %B",strtotime($date_new));
        $fecha = $this->currentYear.'-'.$this->currentMonth.'-1';
        $nextMonth = $this->currentMonth==12?1:intval($this->currentMonth)+1;
         
        $nextYear = $this->currentMonth==12?intval($this->currentYear)+1:$this->currentYear;
         
        $preMonth = $this->currentMonth==1?12:intval($this->currentMonth)-1;
         
        $preYear = $this->currentMonth==1?intval($this->currentYear)-1:$this->currentYear;
         
        return
            '<div class="header">'.
                '<a class="prev" href="'.$this->naviHref.'?month='.sprintf('%02d',$preMonth).'&year='.$preYear.'"><i class="fa fa-angle-double-left"></i></a>'.
                    '<span class="title">'.$day.'</span>'.
                '<a class="next" href="'.$this->naviHref.'?month='.sprintf("%02d", $nextMonth).'&year='.$nextYear.'"><i class="fa fa-angle-double-right"></i></a>'.
            '</div>';
    }
         
    /**
    * create calendar week labels
    */
    private function _createLabels(){  
                 
        $content='';
         
        foreach($this->dayLabels as $index=>$label){
             
            $content.='<li class="'.($label==6?'end title':'start title').' title">'.$label.'</li>';
 
        }
         
        return $content;
    }
     
     
     
    /**
    * calculate number of weeks in a particular month
    */
    private function _weeksInMonth($month=null,$year=null){
         
        if( null==($year) ) {
            $year =  date("Y",time()); 
        }
         
        if(null==($month)) {
            $month = date("m",time());
        }
         
        // find number of days in this month
        $daysInMonths = $this->_daysInMonth($month,$year);
         
        $numOfweeks = ($daysInMonths%7==0?0:1) + intval($daysInMonths/7);
         
        $monthEndingDay= date('N',strtotime($year.'-'.$month.'-'.$daysInMonths));
         
        $monthStartDay = date('N',strtotime($year.'-'.$month.'-01'));
         
        if($monthEndingDay<$monthStartDay){
             
            $numOfweeks++;
         
        }
         
        return $numOfweeks;
    }
 
    /**
    * calculate number of days in a particular month
    */
    private function _daysInMonth($month=null,$year=null){
         
        if(null==($year))
            $year =  date("Y",time()); 
 
        if(null==($month))
            $month = date("m",time());
             
        return date('t',strtotime($year.'-'.$month.'-01'));
    }    
}
?>

Por ahora se que el $j son los dias que hay en el calendario, pero no sé como hacer para que al clicar las celdas me haga una consulta.

¿No me oriento bien, alguien sabría como hacerlo?, y si se puede hacer en PHP?

Gracias.

mchojrin · 5 Septiembre 2018, 03:32 AM

Puedes hacerlo mediante una llamada AJAX disparada desde el click sobre un link de la fecha.

Ahí donde pones:

Código [Seleccionar]

 $(document).ready(function(){
    $(".dates li").click(function(){
      alert("<?php echo $j; ?>");
    });
  })

Deberías usar algo como:

Código [Seleccionar]


 $(document).ready(function(){
    $(".dates li").click(function(){
      $.post('agregar_evento.php', { clave1: valor1, clave2: valor2 } );
    });
  })

Y del lado de php crear el archivo agregar_evento.php que tome el json del php://input, lo convierta y con eso haga el insert en la base... algo como:

Código [Seleccionar]


<?php

$json = file_get_contents("php://input");
$values = json_decode( $json );
$sql = "INSERT into TABLA_EVENTOS (campo1, campo2) VALUES ( '{$values->clave1}', '{$values->clave2}' );";

// ... conexion a la db

$pdo->exec( $sql );

Test Foro de elhacker.net SMF 2.1

Como hacer que cuando al dar click en una fecha del calen. me inse. datos en DB

Drakaris

mchojrin