1

Buenas tardes, mi duda es la siguiente: Al hacer click en "Abrir calendario" necesito obtener una fecha de inicio y un fecha fin y almacenarlas en un input hidden por separado cada una, y que una vez seleccionadas el calendario se haga disabled. Lo que conllevaría a controlar los dos click en el calendario o algo similar. No logro controlar dos eventos distintos para cada fecha.

Codigo:

HTML

<label id="abrir">Abrir calendario</label><br>
<input type="text" id="fechaInicio" value=""><br>
<input type="text" id="fechaFin" value="">
<div id="calendar" style="display:none;"></div>

JS

// Calendar
    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();

    $("#abrir").click(function () {

            $("#calendar").css("display", "block");
            var calendar = $('#calendar').fullCalendar({

            monthNames: ['Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'],
            monthNamesShort: ['Ene','Feb','Mar','Abr','May','Jun','Jul','Ago','Sep','Oct','Nov','Dic'],
            dayNames: ['Domingo','Lunes','Martes','Miércoles','Jueves','Viernes','Sábado'],
            dayNamesShort: ['Dom','Lun','Mar','Mié','Jue','Vie','Sáb'],
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month'
            },
            selectable: true,
            selectHelper: true,
            select: function (start, end, allDay) {

                var date = new Date(start);
                var day = zerofy(date.getDate());
                var month = zerofy(date.getMonth()+1);
                var year = date.getFullYear();
                var result = day + "/" + month + "/" + year;
                var fechaInicio = "";
                var fechaFin = "";

                if (result) {
                    calendar.fullCalendar('renderEvent',{
                            title: result,
                            start: start,
                            end: end,
                            allDay: allDay,
                        });
                    fechaInicio = result;
                    contador = contador + 1;
                    alert(contador);
                }
                calendar.fullCalendar('unselect');
                $("#prueba").val(fechaInicio);
            }
        });
        // Calendar end

        });

function zerofy(number){
if(number < 10)
    number = "0" + number;

return number;

}

Enlace a con una demo: JSFiddle

Gracias de antemano,

Saludos.

1 respuesta 1

0

Si entiendo bien tu pregunta, es que quieres elegir fechas => Inicio y Fin y mostrarlo en un input y en el momento que se haya elegido no se pueda manipular el evento ni crear ninguno donde se haya ya creado uno, pues...

..aquí te muestro el código (explicación en los comentarios y código simplificado):

$( function() {
            
    $( '#abrir' ).click( function() {
        $( '#calendar' ).css( 'display', 'block' );
        var calendar = $( '#calendar' ).fullCalendar( {
            selectable: true,            
            select: function( start, end ) {

                // Quitamos 1 segundo para que no añade un día más
                var endDate = new Date( end );
                endDate     = new Date( endDate.getFullYear(), endDate.getMonth(), endDate.getDate(), 0, 0, -1 );

                var fechaInicio = dateFormat( start );
                var fechaFin    = dateFormat( endDate );

                // TODO: Validar los datos
                $( '#prueba1' ).val( fechaInicio );
                $( '#prueba2' ).val( fechaFin );

                var titulo = prompt( 'Titulo evento:' );
                var eventData;
                
                if ( titulo ) {
                    eventData = {
                        title: titulo,
                        start: start,
                        end: end
                    };
                    
                    // Destruimos el calendario
                    calendar.fullCalendar( 'destroy' );                

                    // Aqui creamos de nuevo el calendario
                    // sin poder editar y seleccionar
                    $('#calendar').fullCalendar( {
                      selectable: false,
                      editable: false,
                      events: [eventData]
                    } );
                }             
            }
        } );
    } );
} );

// Función para formatear las fechas para los inputs
function dateFormat( df ) {
    var date  = new Date( df );
    var day   = date.getDate();
    var month = date.getMonth() + 1;
    var year  = date.getFullYear();
    return day + '/' + month + '/' + year;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.7.0/fullcalendar.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.7.0/fullcalendar.min.css">
<label id="abrir">Abrir</label><br>
Value fecha Inicio = <input type="text" id="prueba1" value=""><br>
Value fecha Fin = <input type="text" id="prueba2" value="">
<div id="calendar" style="display:none;"></div>

4
  • Muchas gracias por responder compañero, la funcionalidad que necesitaria es que solo me deje elegir 2 fechas, una de inicio, por ejemplo del dia 02/11/2017 y una fecha fin, por ejemplo 04/11/2017. Y que una vez seleccionadas no pueda crear ningun evento mas. Y que al evento Inicio le ponga el title "Inicio", y al segundo evento le ponga el titulo "Fin", el title se lo deberia poner automatico sin utilizar el prompt. Un saludo! Commented el 1 dic. 2017 a las 20:26
  • @DanielMorenoAlcubilla - Es lo que hace... y como funciona fullcalendar.. pinchas el dia dónde quieras que empieze y arrastras con el raton hasta el día del fin (sin soltar el ratón) no se si me explico bien... y una vez elegido esas fechas no puedes elegir en esas fechas otro evento... o quieres que que no se pueda elegir ningún evento más? Para eso puedes destruir el calendar y pasar los eventos creados con el método destroy y decir que el calendario no sea selectable Commented el 1 dic. 2017 a las 20:33
  • Cierto, disculpame no sabia que funcionaba asi, fallo mio, si esta todo correcto solo me faltaria que dado el rango por el cliente no pueda volverlo a editar ni crear ningun evento mas como tu dices con el destroy, podrias ilustrarme? Muchas gracias de nuevo! Commented el 1 dic. 2017 a las 20:40
  • @DanielMorenoAlcubilla - Creo que ahora si esta todo como lo deseas... ;) un saludo Commented el 1 dic. 2017 a las 21:08

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.