1

Amigos que tal, estoy realizando una página web en php/laravel de reservas, actualmente tengo un formato en <table> y en cada <td> hay un <button>, pero este tipo de codificación en tablas no agiliza el proceso cuando son varias personas que desean reservar.

Les consulto, existirá una librería o plugin en css o/y javascript que tenga un tipo de calendario para este tipo de negocio?, que permita arrastrar el mouse en los días que deseo reservar (por ejemplo del 27 al 30 del mes actual,suelto el mouse y sale un modal para llenar los datos) hasta ahora solo doy clic en el button del <td> según el día y la habitación para que salga el modal y lleno todos los datos.

He visto barios calendarios pero son solo por día (para crear eventos no más)

Actualmente así está mi tabla de reservas.

introducir la descripción de la imagen aquí

Pero quiero logra algo así (fuente: Youtube, y el creador solo expone y no comparte el código) introducir la descripción de la imagen aquí Su formato es muy dinámico arrastra según los días que quiere reservar y tiene mejor parecencia.

1

1 respuesta 1

1

Para arrastrarlos prueba a usar los eventos del atributo draggable

<!DOCTYPE HTML>
<html>
<head>
<script>
function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">

</body>
</html>

FUENTE

Tambien te recomiendo usar el Fullcalendar para estas cosas, dado que simplifica mucho ENLACE FULLCALENDAR

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.