1

Estoy creando un calendario para agendar eventos, hago uso de fullcalendar. Como extra agregue popovers de bootstratp para que al dar click en un día del calendario se muestre el popover y se puedan agregar datos. Logré agregar divs, textarea y botones al popover, sin embargo tengo varios problemas: 1. No es posible escribir en el textarea ni seleccionar nada del selectpicker. 2. Al abrir un popover, este se muestra detrás de los "eventos" del calendario. 3. Al mover un evento en el calendario, ya no es posible abrir nuevamente el popover. Agradecería mucho su ayuda :D Adjunto imágenes~~ introducir la descripción de la imagen aquí

Fragmento del js donde agrego el popover:

$(document).ready(function() {
    App.init();
    Calendar.init();
    $('[data-toggle="popover"]').popover({
        html: true,
        content: '<div id="popover-content" >'+
                    '<form  id="frmGasto" novalidate="" class="form-horizontal form-bordered" data-parsley-validate="true" name="frmGasto">'+
                    '<input type="hidden" name="_token" value="{{csrf_token()}}" />'+
                    '<div class="form-group no-border">'+
                    '<label class="control-label col-md-4 col-sm-4">Descripción</label>'+
                    '<div class="col-md-6 col-sm-6 no-border">'+
                    '<textarea class="form-control" id="txtDescripcion" name="txtDescripcion" style="max-width: 100%" rows="6" placeholder="Descripción" data-type="alphanum" data-parsley-required="true"></textarea>'+
                    '<ul class="parsley-errors-list"></ul>'+
                    '</div>'+
                    '</div>'+
                    '<div class="form-group">'+
                    '<label class="control-label col-md-4 col-sm-4">Tipo</label>'+
                    '<div class="col-md-6 col-sm-6">'+
                    '<select id="txtTipo" name="txtTipo" class="form-control selectpicker" data-size="10" data-parsley-required="true" data-live-search="true" data-style="btn-default">'+
                    '<option value="" selected>Seleccione...</option>'+
                    '<option value="1" selected>1</option>'+
                    '<option value="2" selected>2</option>'+
                    '<option value="3" selected>3</option>'+
                    '</select>'+
                    '<ul class="parsley-errors-list"></ul>'+
                    '</div>'+
                    '</div>'+
                    '<div>'+
                    '<button id="btnTG" type="submit" class="btn btn-inverse " onclick="javascript:;"><i class="fa fa-plus"></i> Guardar</button>'+
                    '</div>'+
                    '</form>'+
                '</div>'
    });
});

1 respuesta 1

0

Bien, mientras seguía viendo ejemplos de popover, note que tenían agregado "container", así que se lo agregué, quedaría así:

$('[data-toggle="popover"]').popover({
        container:'body',
        html: true,
        content: $("#frmContent").html()
    });

introducir la descripción de la imagen aquí Esa nueva línea, hizo posible que por fin pudiera escribir en los inputs dentro del popover, además de que ya no lo muestra por detrás de los "eventos" del fullcalendar.

Tu Respuesta

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

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