FullCalendar open bootstrap modal on dayClick

Question

I want to open a bootstrap modal when users click on a day in fullCalendar. I have look over dayClick event but can't figure out how to call the model.

dayClick: function(date, jsEvent, view) {
     // call the model 
},

Normal link to call a bootstrap model

<a href="#" data-toggle="modal" data-target="#myModal"..................../>

EDIT :

I use only 1 bootstrap model for all my needs and simply change the content. The way I do this is by calling a href .. so my link looks like :

<a href="<?php echo site_url('model/add') ?>" data-toggle="modal" data-target="#myModal" role="button" class="btn-u btn-block"> Add</a>

Solution 1

If someone else needs to open fullCalendar events in bootstrap model I found the way to do it :

Add :

        eventClick:  function(event, jsEvent, view) {
            $('#modalTitle').html(event.title);
            $('#modalBody').html(event.description);
            $('#eventUrl').attr('href',event.url);
            $('#calendarModal').modal();
        },

And the model :

<div id="calendarModal" class="modal fade">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span> <span class="sr-only">close</span></button>
            <h4 id="modalTitle" class="modal-title"></h4>
        </div>
        <div id="modalBody" class="modal-body"> </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
    </div>
</div>
</div>

Solution 2

The following should work:

dayClick: function(date, jsEvent, view) {
    $("#myModal").modal("show");
},

Assuming that the ID of your modal is in fact myModal. .modal() is the JavaScript method used by bootstrap to manipulate modals... Similarly, you can close the modal using $("#myModal").modal("hide")...

Solution 3

Another way is upon calendar redering:

eventRender: function(event, element) {
                        element.attr('data-toggle', "modal");
                        element.attr('data-target', "#sched-modal");
                        element.attr('href', "/details");
                    }

Comments

[George]

Works good, but i have a small problem with this method. I use 1 model for all my needs and simply change the content. I use the href to call a function and send the content I need .... so a normal link for me will be ... <a href="<?php echo site_url('model/add') ?>" data-toggle="modal" data-target="#myModal" role="button" class="btn-u btn-block"> Add</a>.....Is there a way to use a different call ?

[Amina]

As far as I can understand your situation, it seems to be a little tricky. One way I can think of is by using the $(this) variable inside the dayClick function. According to the documentation, $(this) points to the <td> of the clicked day. Maybe you can save your custom href within a link in the <td> and retrieve it using the $(this) like maybe $(this).children("a").attr("href") or something similar...

[George]

I see .. Thanks for all the help ... I have edited my question to explain my problem better.

[Aravindh Gopi]

eventClick is different from dayClick

[TombMedia]

Source: mikesmithdev.com/blog/…