[Solved] FullCalendar & bootstrap3 modal not attaching behaviors


#1

Im a newbee on Meteorjs, this is my first post on this forum hello every one :grin:

And Im testing an implementation of FullCalendar and meteor, and I got a strange problem with this modal in particular. is a modal for edit, It is supposed to trigger when you click on a list of links of events wich I successfuly test on other apps in the pass, I already have another modal for create events on this view and works fine. but in this case, it seems to not attach the js behavior correcly. the modal is displayed, but no effects and not working the close nor the submit buttoms.

I wonder if in this particular case, Im losing something or some code tag or the FullCalendar is in conflict?, and for any help Thank you.

here is the demo deply on meteor.com gbelot.todo3.meteor.com

here is the code on gitHub: https://github.com/gbelot2003/meteor-todo-bt3/

and here the controller and Templates code:

Meteor.subscribe("events");

 Template.body.rendered = function () {
    var fc = this.$('.fc');
    this.autorun(function () {
    Events.find();
    fc.fullCalendar('refetchEvents');
 });
};

Template.calendarEdit.helpers({
  events: function(){
    var fc = $('.fc');
    return function (start, end, tz, callback) {
        //subscribe only to specified date range
        Meteor.subscribe('events', start, end, function () {
            //trigger event rendering when collection is downloaded
            fc.fullCalendar('refetchEvents');
        });

        var events = Events.find().map(function (it) {
            return {
                title: it.date,
                start: it.date,
                allDay: false
            };
        });
        callback(events);
    };
},

options: function() {
    return {
        id: 'myid2',
        class: 'myCalendars',
        lang: 'es',
        allDaySlot: false,
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        axisFormat: 'h:mm a',
        timeFormat: {
            agenda: 'h:mm a',
            month: 'h:mm a',
            agendaWeek: 'h:mm a'
        },
        firstHour: 7,
        editable: true,
        eventLimit: false,
        events: function (start, end, timezone, callback) {
            callback(Events.find({}).fetch());
        },
        defaultView: 'month'
    };
 }
});

Template.HomeTemplate.onRendered(function(){
 var fc = this.$('.fc');
 this.autorun(function () { 
    Events.find();
    fc.fullCalendar('refetchEvents');
 });
 this.$('.datetimepicker').datetimepicker({
    format: 'YYYY-MM-DD H:mm:ss'
 });
});

 Template.HomeTemplate.events({
 'submit #new-event': function(event){
    event.preventDefault();
    var title = event.target.title.value;
    var start = event.target.start.value;
    var end = event.target.end.value;
    var description = event.target.description.value;

    Meteor.call("addEvent", title, start, end, description);
    event.target.title.value = "";
    event.target.start.value = "";
    event.target.end.value = "";
    event.target.description.value = "";
    $("#createEvent").modal("hide");
 },

/** this modal works well **/
/***************************/
'click .create': function(e){
    e.preventDefault();
    $("#createEvent").modal("show");
 }
});

Template.HomeTemplate.helpers({
 event: function(){
    return Events.find();
 }
});

Template.eventList.events({

 'click .delete': function(event){
    event.preventDefault();
    id = this._id;
    Meteor.call('deleteEvent', id);
},

 /**** here is the call for the modal *****/
 /** with problems. Did I miss something? */
 /******************************************/
 'click .update': function(e){
    e.preventDefault();
    $(".updateModal").show();
 }
});

the homeTemplate here

<template name="HomeTemplate" id="home">
  <div class="container">
    <div class="row">
        <div class="col-sm-12">
            <h2>Todos & FullCalendar Test</h2>
            <hr/>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6 col-sm-12">
            <h3>Full Calendar</h3>
            <!--<button class="refresh">Refresh</button>-->
            {{> calendarEdit }}
        </div>
        <div class="col-md-6 col-sm-12">
            <h3>Events todo App <a href="#" id="add-Event" class="create btn btn-Google pull-right"><span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span></a></h3>

            <ul class="list-group">
                {{#transition in="zoomIn" out="bounceOut"}}
                    {{#each event}}
                        {{> eventList}}
                    {{/each}}
                {{/transition}}
            </ul>
        </div>
    </div>
</div>
  {{> createEvent}}
  {{> updateModal}}
</template>

This is the Template where you click on link

<template name="eventList">
  <li class="list-group-item">
    <h4 class="list-group-item-heading">
        <div class="row">
            <div class="col-sm-10">
                <a type="button" href="#" class="update">{{title}}</a>
            </div>
            <div class="col-sm-2">
                <a href="#" class="btn btn-default delete pull-right">  <span class=" glyphicon glyphicon-trash text-danger" aria-hidden="true"></span></a>
            </div>
        </div>
    </h4>
    <p>{{start}} | {{end}}</p>
    <p class="list-group-item-text">{{description}}</p>
 </li>
</template>

#2

October 15th, the blah blah blah event added. It appears to work fine here.

Perhaps itโ€™s a browser based issue? Windows 8.1, using Chrome.


#3

Oh, well, thanks watching and your comment, but the problem is not on the create, which works fine, but the edit event, I work under linux so I didโ€™n tested over Windows env. can you confirm that the edit title is working?

again, thanks!!!


#4

Clicking on the title brings up the modal.

The edit/close buttons on the modal do work for me and the modal closes. However the title for the edited event does not change for the entry in the list on the right hand side.

Changing the date within the modal and filling out the fields, does however get a entry to show up on the calendar. So I suspect the modal is partially working.

Clicking on the actual calendar itself also does not nothing for me. Not sure if that is supposed to be functional, but that is usual way to add/edit events on a calendar.


#5

I suggest to use peppelg:bootstrap-3-modal to correctly show and hide modals.
It will save you a lot of hairs.

I dont have time and mood to dig into your code deeper.


#6

thanks!! itโ€™s pretty wird!!!


#7

JAJAJA, yea, I almost got bald!!! :sweat: , Ill try with that solution, thanks!!
[Edited]

Yep, this package solve the problem, thanks again shock!!!.