1

I'm using dateTimePicker.js, MySQL and PHP to generate an online event calendar, it allows users to set a date in a calendar and register it with their names, all data is stored in a MySQL database.

Data is stored in the table like this:

    if (isset($_POST['from'])) 
{


    if ($_POST['from']!="") 
    {

        // Recibimos el fecha de inicio y la fecha final desde el form

        $inicio = _formatear($_POST['from']);
        // y la formateamos con la funcion _formatear

        $final  = _formatear($_POST['from']);

        // Recibimos el fecha de inicio y la fecha final desde el form

        $inicio_normal = $_POST['from'];

        // y la formateamos con la funcion _formatear
        $final_normal  = $_POST['from'];

        // Recibimos los demas datos desde el form
        $titulo = evaluar($_POST['title']);

        // y con la funcion evaluar
        $body   = evaluar($_POST['title']);

        // reemplazamos los caracteres no permitidos
        $clase  = evaluar($_POST['class']);

//checar si fecha existe

              // insertamos el evento
        $query="INSERT INTO eventos VALUES(null,'$titulo','$body','','$clase','$inicio','$final','$inicio_normal','$final_normal')";
        $query2="INSERT INTO dbbackup VALUES(null,'$titulo','$body','','$clase','$inicio','$final','$inicio_normal','$final_normal')";
        // Ejecutamos nuestra sentencia sql
        $conexion->query($query); 
        $conexion->query($query2); 

        // Obtenemos el ultimo id insertado
        $im=$conexion->query("SELECT MAX(id) AS id FROM eventos");
        $row = $im->fetch_row();  
        $id = trim($row[0]);

        // para generar el link del evento
        $link = "$base_url"."descripcion_evento.php?id=$id";

        // y actualizamos su link
        $query="UPDATE eventos SET url = '$link' WHERE id = $id";

        // Ejecutamos nuestra sentencia sql
        $conexion->query($query); 

        // redireccionamos a nuestro calendario

    }

Then it is showed in a calendar:

 var calendar = $('#calendar').calendar(options); 

            $('.btn-group button[data-calendar-nav]').each(function()
            {
                    var $this = $(this);
                    $this.click(function()
                    {
                            calendar.navigate($this.data('calendar-nav'));
                    });
            });

            $('.btn-group button[data-calendar-view]').each(function()
            {
                    var $this = $(this);
                    $this.click(function()
                    {
                            calendar.view($this.data('calendar-view'));
                    });
            });

            $('#first_day').change(function()
            {
                    var value = $(this).val();
                    value = value.length ? parseInt(value) : null;
                    calendar.setOptions({first_day: value});
                    calendar.view();
            });
    }(jQuery));

So it looks like this: enter image description here

Then the user save a date like this:

enter image description here

The blue and red dots are days that are already taken, the color just means a different category, I've locked Sundays and Saturdays and dates before the current date, but I can't figure out how to disable a day that is already taken.

I tried using a query to get "inicio_normal" that is the date value stored in my table and then I compared it with "$inicio" that is the value the user pick from the calendar (before it is formatted to a date MySQL can store), so if the values are the same I know the date is already taken and with an IF I can show a message or something like this, but it did not work.

My database is like this:

 `id` int(10) unsigned NOT NULL AUTO_INCREMENT,
  `title` varchar(150) COLLATE utf8_spanish_ci DEFAULT NULL,
  `body` text COLLATE utf8_spanish_ci NOT NULL,
  `url` varchar(150) COLLATE utf8_spanish_ci NOT NULL,
  `class` varchar(45) COLLATE utf8_spanish_ci NOT NULL DEFAULT 'event-important',
  `start` varchar(15) COLLATE utf8_spanish_ci NOT NULL,
  `end` varchar(15) COLLATE utf8_spanish_ci NOT NULL,
  `inicio_normal` varchar(50) COLLATE utf8_spanish_ci NOT NULL,
  `final_normal` varchar(50) COLLATE utf8_spanish_ci NOT NULL,
  PRIMARY KEY (`id`)

Any help?, Thanks.

Sergio Ernesto González Bravo
  • 13
  • 5
  • `dateTimePicker.js` could be anything. That's what you happen to have a file named as on your system. If it is a commonly-available jquery library, then you should include a link to it. If it is custom code, you should include it directly in your question. – Patrick Q Sep 12 '17 at 20:37

2 Answers2

0

If you already have the date chosen in your database.. just search if there is a coincidence. Like.. 

SELECT * FROM TABLE WHERE DATE = '$datetime'

That will bring any coincidence, if there is a coincidence with the date you are trying to enter then just place an if / else inside your code. 

if( $query != 0 ) { // insert new calendar event }
else { // display message informing an event is already set on that time }
Maximiliano Paoletti
  • 50
  • 2
0

I found a really easy way to achive this, datetimepricker by itself does not have a function to en/disable an already taken date or time, so using a query to compare the new register to the registers in my database was the best.

  if (isset($_POST['MY_INPUT_FIELD'])) 
{

$chek= $_POST['MY_INPUT_FIELD'];

        $queryt ="SELECT * FROM my_table WHERE my_tIme_in_my_table='$chek'";
        $RESULT_OF_QUERY = $conexion->query($queryt);

if (mysqli_num_rows($RESULT_OF_QUERY)>0)
    {
//It pops up a message to the user
        $message = "La fecha ya ha sido tomada, ingresa una nueva";
        echo "<script type='text/javascript'>alert('$message');</script>";

    }
    elseif($_POST['MY_INPUT_FIELD']!="") 
    {
//DO ALL THE STUFF 
     }

A problem was that DateTimePicker allows users to add a time, obviuosly DATE will never be the same for two users beacuse of the seconds difference, so I disabled the time in my datetimepciker.js, in a case that you need to use mins and seconds.

Sergio Ernesto González Bravo
  • 13
  • 5