CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrapfullcalendar
Ajay Kulkarni
Ajay Kulkarni

Reputation: 3039

Bootstrap modal not appearing properly when clicked on a random date in fullcalendar

I wrote a custom full calendar as shown here.
It is working as expected. However there is a problem. When I click on any date in full calendar, the modal appears. But bootstrap's modal css doesn't apply for it. It pops up in a rather plain style. I want bootstrap's modal css to be applied to the modal when it pops up.
Code: 

$(document).ready(function () {
    var date = moment().format("YYYY/MM/DD", "ddd, YYYY MM DD HH:mm:ss ZZ");
    console.log(date);
    $('#calendar').fullCalendar({
        theme: true,
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        defaultDate: date,
        editable: true,
        eventLimit: true,
        selectable: true,
        select: function (date) {
            dateNew = moment(date).format('YYYY/MM/DD');
            $('#createEventModal #apptDate').val(dateNew);
            $('#createEventModal').modal('show');
        }
    });
    $('#submitButton').on('click', function (e) {
        // We don't want this to act as a link so cancel the link action
        e.preventDefault();
        doSubmit();
    });

    function doSubmit() {
        $("#createEventModal").modal('hide');
        console.log($('#apptDate').val());
        alert("form submitted");
        $("#calendar").fullCalendar('renderEvent', {
            title: $('#patientName').val(),
            Name: $('#patient').val(),
            dateNew: new Date($('#apptDate').val()),
        },
        true);
    }
});

Upvotes: 0

Views: 164

Answers (1)

Mukul Kant
Mukul Kant

Reputation: 7122

You need to add two div

<div class="modal-dialog" role="document">
    <div class="modal-content">

    </div>
</div>

See jsfiddle

Upvotes: 1

Related Questions