Serhioromano / bootstrap-calendar

Full view calendar with year, month, week and day views based on templates with Twitter Bootstrap.
http://bootstrap-calendar.eivissapp.com/
MIT License
3.02k stars 1.29k forks source link

Activate the Modal on events loaded dynamically and out side the Calendar (this.content) #768

Closed EzequielGv83 closed 2 years ago

EzequielGv83 commented 4 years ago

On the options we can use a function onAfterEventsLoad and use it to parse through the events.

The example on the demo loads all the events, but i wanted only the ones between position.start and position.end. mes

` onAfterEventsLoad: function(events) { if(!events) { return; } var list = $('#eventlist ul'); list.html(''); let evt_start = moment(this.options.position.start, 'YYYY.MM.DD').unix(); let evt_end = moment(this.options.position.end, 'YYYY.MM.DD').unix();
evt_start = evt_start 1000; evt_end = evt_end 1000; $.each(events, function(key, val) {
//If it is inside the period appends if(val.start >= evt_start && val.end <= evt_end){
$(document.createElement('li')) .html(''+val.title+'') .appendTo(list); } }); },
' Ok. These event are now added to the non-ordered list and the modal works on then, but i have a list of events that is not loaded using the calendar source (because they are long events and i don't want then to appear on the calendar. only be listed), how i do copy the function that activates the modal by the data-event-id.

cablegunmaster commented 2 years ago

Is this resolved?

EzequielGv83 commented 2 years ago

Sort of. I did some workaround and it was a rewrite of the modal code;

if(!modal.data('handled.bootstrap-calendar') || (modal.data('handled.bootstrap-calendar') && modal.data('handled.event-id') != event.id)) { modal.off('show.bs.modal') .off('shown.bs.modal') .off('hidden.bs.modal') .on('show.bs.modal', function() { var modal_body = $(modal).find('.modal-body'); switch(calendar.options.modal_type) { case "iframe" : var height = modal_body.height() - parseInt(modal_body.css('padding-top'), 10) - parseInt(modal_body.css('padding-bottom'), 10); $(this).find('iframe').height(Math.max(height, 50)); break; case "ajax": $.ajax({ url: url, dataType: "html", async: false, success: function(data) { modal_body.html(data); } }); break; case "template": calendar._loadTemplate("modal"); modal_body.html(calendar.options.templates["modal"]({"event": event, "calendar": calendar})) break; } if(_.isFunction(calendar.options.modal_title)) { modal.find(".modal-title").html(calendar.options.modal_title(event)); } }) .on('shown.bs.modal', function() { calendar.options.onAfterModalShown.call(calendar, calendar.options.events); }) .on('hidden.bs.modal', function() { calendar.options.onAfterModalHidden.call(calendar, calendar.options.events); }) .data('handled.bootstrap-calendar', true).data('handled.event-id', event.id); } modal.modal('show'); });

EzequielGv83 commented 2 years ago

image It worked a bit, some bugs, but i guess it was better to use another method.