Select Start Date - End Date FullCalendar

Question

Select Start Date - End Date FullCalendar

Navigation

#1 by (0 votes)

1

Good afternoon, my question is this: When I click on "Open calendar" I need to obtain a start date and an end date and store them in a separate hidden input each, and once the calendar is selected it is done disabled What would lead to control the two click on the calendar or something similar. I can not control two different events for each date.

Code:

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;

}

Link to a demo: JSFiddle

Thanks in advance,

Greetings.

javascript jquery html5 fullcalendar

asked by Daniel Moreno Alcubilla 01.12.2017 в 18:45

source

1 answer

How to avoid blocking the file that you upload in PictureBox using Image.FromFile? Problem when evaluating if a point belongs to a polygon using the GEOMETRY data type - SQL SERVER 2014

score 0 · Accepted Answer

If I understand your question well, it is that you want to choose dates = > Inicio and Fin and show it in an input and at the time you have chosen you can not manipulate the event or create any where you have already created one, because ...

.. here I show you the code (explanation in the comments and simplified code):

$( 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>