Develop Reference

fullCalendar + Bootstrap tabs glitch: not rendering events until resizing browser

I'm having a strange problem when using fullCalendar along with Bootstrap, having the calendar rendered within a non active tab pane. I'm using the AgendaView, and it's initially displayed with the column for hours with just 1 pixel of width assigned to it.
It's placed within the "Operarios" tab.
But the biggest problem is when rendering the events. They all are displayed compressed at the top of the timetable.
Then if I resize the browser, or the frame, if I'm using Chrome Dev Tools or similar, then it's automatically re-rendered and it's correctly displayed.
You may check it out here:
https://codepen.io/luisapuyen/pen/RYXZPr
The HTML:
+ function($) {
$(function() {
var opcionesCalendario = {
selectable: true,
unselectAuto: false,
locale: 'es',
defaultView: 'agendaWeek',
header: false,
footer: false,
height: 400,
columnHeaderFormat: 'ddd',
eventColor: '#ffdc11',
views: {
agenda: { // name of view
titleFormat: '',
allDaySlot: false,
slotEventOverlap: false,
minTime: '07:00:00',
maxTime: '23:00:00',
slotDuration: '01:00:00',
footer: false
}
},
select: function(startDate, endDate, event, view) {
var evento = [{
start: startDate,
end: endDate
}];
$calendario.fullCalendar('addEventSource', evento);
console.log('selected ' + startDate.format() + ' to ' + endDate.format(), view);
}
},
$body = $('body'),
$tabs = $body.find('#tabs-panel-autovisita'),
$forms = $body.find('form'),
$operariosSel = $forms.filter('[name="operarios"]').find('select[name="operarios"]')
$calendario = $body.find('.calendario').fullCalendar(opcionesCalendario);
// INICIO
init();
function init() {
mostrarRangos();
$operariosSel.on('change', function() {
mostrarRangos();
});
}
function obtenerDiaInicial() {
return moment().isoWeekday(1);
}
function mostrarRangosOperarioCalendario(rangos) {
var diaInicialMoment = obtenerDiaInicial(),
diaMoment,
diaSemana,
eventos = [];
$.each(rangos, function(i, rango) {
diaSemana = +rango.dia_semana - 1;
diaMoment = diaInicialMoment.clone().add(diaSemana, 'days');
eventos.push({
start: moment(diaMoment.format('YYYY-MM-DD') + 'T' + rango.hora_inicio),
end: moment(diaMoment.format('YYYY-MM-DD') + 'T' + rango.hora_fin)
});
});
$calendario.fullCalendar('removeEvents')
$calendario.fullCalendar('renderEvents', eventos);
}
function obtenerRangosOperario(idOp) {
// ajax request that returns:
var res = JSON.parse('{"rangos":[{"dia_semana":"2","hora_inicio":"11:00:00","hora_fin":"13:00:00"},{"dia_semana":"1","hora_inicio":"09:00:00","hora_fin":"14:00:00"},{"dia_semana":"4","hora_inicio":"10:00:00","hora_fin":"17:00:00"},{"dia_semana":"3","hora_inicio":"14:00:00","hora_fin":"18:00:00"}],"ok":"1"}');
mostrarRangosOperarioCalendario(res.rangos);
}
function mostrarRangos() {
var idOp = +$operariosSel.val();
obtenerRangosOperario(idOp);
}
});
}(jQuery);
<div class="container">
<div class="row">
<div class="col-sm">
<h3>Configuración Auto-visitas</h3>
<nav>
<div class="nav nav-tabs" id="tabs-autovisita" role="tablist">
<a class="nav-item nav-link active" data-toggle="tab" role="tab" href="#general">General</a>
<a class="nav-item nav-link" data-toggle="tab" role="tab" href="#operarios">Operarios</a>
<a class="nav-item nav-link" data-toggle="tab" role="tab" href="#companyias">Compañías</a>
</div>
</nav>
<div class="tab-content">
<div class="tab-pane show active" id="general" role="tabpanel">
</div>
<div class="tab-pane" id="operarios" role="tabpanel">
<form method="post" name="operarios">
<div class="form-group">
<label>Operarios</label>
<select name="operarios" class="form-control dato">
<option value="0">Todos</option>
</select>
</div>
<div class="calendario dato"></div>
<button type="submit" class="btn btn-primary guardar">Guardar</button>
</form>
</div>
<div class="tab-pane" id="companyias" role="tabpanel">
</div>
</div>
</div>
</div>
</div>
I'm not sure whether it's a bug produced when using fullCalendar and Bootstrap together.
The only way I've found it works is having the calendar in the active pane at first. But since semantically it corresponds to the first tab to be the one which must be active, I'd like to find a better solution.
Any ideas?

Fullcalendar is failing to retrieve sizes and dimensions of elements because they are set to display: none. You can see that from computed styles on page refresh. Your events are supposed to have a top and bottom set but instead they receive a value of 0 for both.
This is why your events are all "displayed compressed at the top of the timetable".
A simple fix is to listen for a tab change event and re-render fullcalendar.
$(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
$calendario.fullCalendar( 'rerenderEvents' );
});
Here's a functioning example.

In React fullcalendar (version 5), I could not call the render or rerender method.
FullCalendar automatically updates size if it listens to window resize events. I just the trigger resize event when the calendar tab is visible with some delay.
Refer following code
setTimeout(() => window.dispatchEvent(new Event('resize')), 500)

Events not saving through my modal on FullCalendar (bs4)

I've been working on my own first independent project on fullcalendar, but I'm having issues adding and saving events through my modal. I've followed tutorials and code from similar issues but it's not working. Any ideas?
I want to be able to add events with the modal, pick the time and save the event.
Thanks in advance
$(document).ready(function() {
$('#calendar')
.fullCalendar({
allDaySlot: false,
customButtons: {
reload: {
text: '+1 Year',
click: function() {
$('#calendar').fullCalendar('gotoDate', new Date(new Date().setFullYear(new Date().getFullYear() + 1)));
}
}
},
themeSystem: 'bootstrap4',
defaultView: 'agendaWeek',
nowIndicator: true,
navLinks: true,
allDaySlot: true,
popupBreakPoint:786,
selectable: true,
selectHelper: true,
droppable: true,
slotDuration: '00:15:00',
selectOverlap: false,
editable: true,
disableResizing: false,
header: {
left: 'prev,next,today, reload, mnth',
center: 'title',
right: 'month,agendaWeek,agendaDay',
},
select: function(start, end) {
// Display the modal.
// You could fill in the start and end fields based on the parameters
$('.modal').modal('show');
},
eventClick: function(event, element) {
// Display the modal and set the values to the event values.
$('.modal').modal('show');
$('.modal').find('#title').val(event.title);
$('.modal').find('#starts-at').val(event.start);
$('.modal').find('#ends-at').val(event.end);
},
editable: true,
eventLimit: true // allow "more" link when too many events
});
// Bind the dates to datetimepicker.
// You should pass the options you need
$("#starts-at, #ends-at").datetimepicker();
// Whenever the user clicks on the "save" button om the dialog
$('#save-event').on('click', function() {
var title = $('#title').val();
if (title) {
var eventData = {
title: title,
start: $('#starts-at').val(),
end: $('#ends-at').val()
};
$('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
}
$('#calendar').fullCalendar('unselect');
// Clear modal inputs
$('.modal').find('input').val('');
// hide modal
$('.modal').modal('hide');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.21.0/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css" />
<div id="calendar"></div>
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<form>
<div class="modal-body">
<div class="form-group">
<label for="company">Client Name</label>
<input type="text" class="form-control" id="title" placeholder="Clients name">
</div>
<div class="form-group">
<label for="vat">Starting time</label>
<input type="text" class="form-control" id="starts-at" placeholder="starts-at">
</div>
<div class="form-group">
<label for="street">Ending time</label>
<input type="text" class="form-control" id="ends-at" placeholder="ends-at">
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="save-event">Book</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>

Set a fullcalendar with meteor.js

i am new to meteor, and i am trying to set a full calendar. i am using windows, and i did the meteor add fullcalendar:fullcalendar but I can't render the fullcalendar... i have read so many tutorials so far but still nothing. here is a sample of the code that im using.
I dont know if there is a way to check if the fullcalendar package did install in my app... or if I have to import it...
main.js
import { Template } from 'meteor/templating';
import { Notes } from '../lib/collections.js';
//import { fullCalendar} from 'fullcalendar';
//import { moment } from 'moment';
import './main.html';
Template.body.helpers({
/*
notes:[
{text: 'My note 1'},
{text: 'My note 2'},
{text: 'My note 3'}
]
*/
notes(){
return Notes.find({});
}
});
Template.add.events({
'submit .add-form': function(){
event.preventDefault();
//get input value
const target = event.target;
const text = target.text.value;
//insert note into collection
Notes.insert({
text,
createdAt: new Date()
});
//clear the form
target.text.value = '';
//close the modal
$('#modal1').modal('close');
return false;
}
});
Template.note.events({
'click .delete-note': function(){
Notes.remove(this._id);
return false;
}
});
Template.calendar.onRendered()({
$('#calendario').fullCalendar();
})
main.html
<head>
<title>note manager</title>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
</head>
<body>
<nav class="red">
<div class="container">
<div class="nav-wrapper">
Danillo
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li class="nav-item">
<a class="waves-effect waves-light btn modal-trigger" href="#modal1"> ADD Modal</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<h1>Nomes</h1>
<ul class="collection">
{{#each notes}}
{{> note}}
{{/each}}
</ul>
</div>
{{>add}}
{{>calendar}}
<script>
$(document).ready(function(){
// the "href" attribute of the modal trigger must specify the modal ID that wants to be triggered
$('.modal').modal();
});
</script>
</body>
<template name="note">
<li class="collection-item">
{{text}}
<i class="material-icons">close</i>
</li>
</template>
<template name="add">
<div id="modal1" class="modal">
<div class="modal-content">
<h3>Add Nome</h3>
<form class="add-form">
<input type="text" name="text" placeholder="Add Nome...">
</form>
</div>
</div>
</template>
<template name ="calendar">
<div class="container">
<div id="calendario">
</div>
</div>
</template>
thanks guys!

Inside
Template.TemplateName.rendered = function()
function you have to define all the things likes.eg-: eventRender,dayClick,eventAfterRender,viewRender,eventClick etc
sample code that I used inside Template.TemplateName.rendered = function()
$('#calendar').fullCalendar({
//height: "auto",
minTime: OpenTime,
maxTime: closeTime,
slotDuration: '00:15:00',
timezone: "Asia/Colombo",
allDaySlot:false,
dayOfMonthFormat: 'ddd - DD MMM',
defaultView: 'multiColAgendaDay',
views: {
multiColAgendaDay: {
// disabledColumns: [1],
type: 'multiColAgenda',
duration: { days: 1 },
numColumns: 7,
columnHeaders: stylistDetails,
/* disabledColumns: [1] */
}
},
scrollTime: '09:00:00',
allDaySlot: false,
/* header: {
left: 'multiColAgendaDay',
center: 'title',
right: 'today prev,next'
}, */
header:false,
dayOfMonthFormat: 'ddd - DD MMM',
events( start, end, timezone, callback ) {
let filterBranchId = Session.get("filterBranchId");
let data = AppointmentsServices.find({branchId:filterBranchId,stylistDisabled: {$ne: true}}).fetch().map( ( event ) => {
return event;
});

Add events in fullcalendar with meteor

so I was able to create a fullcalendar in my application, but now I cant make the events show... this is my code
main.js
import { Template } from 'meteor/templating';
import { Notes } from '../lib/collections.js';
import './main.html';
Template.body.helpers({
/*
notes:[
{text: 'My note 1'},
{text: 'My note 2'},
{text: 'My note 3'}
]
*/
notes(){
return Notes.find({});
}
});
Template.add.events({
'submit .add-form': function(){
event.preventDefault();
//get input value
const target = event.target;
const text = target.text.value;
//insert note into collection
Notes.insert({
text,
createdAt: new Date()
});
//clear the form
target.text.value = '';
//close the modal
$('#modal1').modal('close');
return false;
}
});
Template.note.events({
'click .delete-note': function(){
Notes.remove(this._id);
return false;
}
});
Template.note.helpers({
data:function(){
return moment(this.date).format("dddd, h:mm");
}
});
Template.example.helpers({
options: function() {
return {
defaultView: 'agendaDay',
};
},
events: function(){
return{
title : 'event2',
start : '2018-28-01',
allDay : false
}
}
});
main.html
<head>
<title>note manager</title>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
</head>
<body>
<nav class="red">
<div class="container">
<div class="nav-wrapper">
Danillo
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li class="nav-item">
<a class="waves-effect waves-light btn modal-trigger" href="#modal1"> ADD Modal</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<h1>Nomes</h1>
<ul class="collection">
{{#each notes}}
{{> note}}
{{/each}}
</ul>
</div>
<div class="container" id="container2">
{{> example}}
</div>
{{>add}}
<script>
$(document).ready(function(){
// the "href" attribute of the modal trigger must specify the modal ID that wants to be triggered
$('.modal').modal();
});
</script>
</body>
<template name="note">
<li class="collection-item">
{{text}} - {{data}}
<i class="material-icons">close</i>
</li>
</template>
<template name="add">
<div id="modal1" class="modal">
<div class="modal-content">
<h3>Add Nome</h3>
<form class="add-form">
<input type="text" name="text" placeholder="Add Nome...">
</form>
</div>
</div>
</template>
<template name="example">
{{>fullcalendar options}}
</template>
I have found some tutorials, even here, but they dont work, my goal is to pass the information from the form in my modal to the events of the fullcalendar. Thanks for your help guys.

Inside
Template.TemplateName.rendered = function()
function you have to define all the things likes.eg-: eventRender,dayClick,eventAfterRender,viewRender,eventClick etc
sample code that I used inside Template.TemplateName.rendered = function()
$('#calendar').fullCalendar({
//height: "auto",
minTime: OpenTime,
maxTime: closeTime,
slotDuration: '00:15:00',
timezone: "Asia/Colombo",
allDaySlot:false,
dayOfMonthFormat: 'ddd - DD MMM',
defaultView: 'multiColAgendaDay',
views: {
multiColAgendaDay: {
// disabledColumns: [1],
type: 'multiColAgenda',
duration: { days: 1 },
numColumns: 7,
columnHeaders: stylistDetails,
/* disabledColumns: [1] */
}
},
scrollTime: '09:00:00',
allDaySlot: false,
/* header: {
left: 'multiColAgendaDay',
center: 'title',
right: 'today prev,next'
}, */
header:false,
dayOfMonthFormat: 'ddd - DD MMM',
events( start, end, timezone, callback ) {
let filterBranchId = Session.get("filterBranchId");
let data = AppointmentsServices.find({branchId:filterBranchId,stylistDisabled: {$ne: true}}).fetch().map( ( event ) => {
return event;
});

Code mirror not working with angular js binding variable

Html:
<body ng-app ng-controller="OrderFormController">
<!--<h1 class="errorHeader">List of Classes</h1>-->
<header>
<div class="container">
<div id="branding">
<h1>Apex <span class="highlight"> Editor </span> </h1>
</div>
</div>
</header>
<div class="col-md-12 col-lg-12">
<div class="panel with-nav-tabs panel-default">
<div class="panel-heading">
<ul class="nav nav-tabs">
<li class="active">Apex Editor</li>
</ul>
</div>
<div class="panel-body">
<div>
<input type="text" name="apexClass" id="autocomplete" placeholder="Type the name of the Apex class you want to edit"/>
</div>
<div class="btn-group-vertical" style="padding: 1%">
<button type="button" class="btn btn-primary" id="editBtn">Edit</button>
</button>
</div>
<div class="tab-content" align="left">
<div id='error' style='display:none'>{{apexClassWrapperError.message}}</div>
<div>{{apexClassWrapper.name}}</div>
<img src="../img/ajax-loader.gif" id="loaderImage" style='display:none'>
<form>
<textarea ng-model="apexClassWrapper.body" id="code" name="code" readonly="true" >{{apexClassWrapper.body}}</textarea>
</form>
</div>
<button type="button" class="btn btn-primary" id="saveBtn" ng-click="postdata(apexClassWrapper)">Save</button>
</div>
</div>
</div>
<script src="../js/makeEditable.js"></script>
<script>
$(function() {
var editor = CodeMirror.fromTextArea(document.getElementById("code"),{
linenumber : true,
matchBrackes: true,
mode: "text/x-apex"
})
});
</script>
<footer>
<p>Web based Apex Editor</p>
<p>Developed By - Nagendra Kumar Singh</p>
</footer>
</body>
CSS and JS files included at top:
<script src="../js/codemirror.js"></script>
<script src="../js/apex.js"></script>
<script src="../js/matchbrackets.js"></script>
<link href="../css/codemirror.css" rel="stylesheet"/>
The controller is a simple one fetching the class through a RESTApi.
function OrderFormController($scope, $http) {
$('#autocomplete').autocomplete({
type: 'POST',
serviceUrl: 'http://localhost:8989/getSuggestion',
onSelect: function (suggestion) {
console.log('suggestion.value -> '+suggestion.value);
var data = {
apexClassName:suggestion.value
};
var config = {
params: data
};
$('#loaderImage').show();
$http.get("http://localhost:8989/getApexBody",config).then(function (response) {
$scope.apexClassWrapper = response.data;
$('#loaderImage').hide();
});
}
});
};
But I can only see {{apexClassWrapper.body}} in my text area, I dont see the real code when using CodeMirror, If I remove code mirror , I can see the class, but I cannot figure out a way to show the body with CodeMirror included.
There are no errors in console log and all the JS and CSS files are loaded perfectly. Please help.

Ok, So I think I may have figured it out. What I did is I set a timeout for the codemirror code to run as follows in the js file and removed it from the index.html.
$('#loaderImage').show();
$http.get("http://localhost:8989/getApexBody", config).then(function (response) {
$scope.apexClassWrapper = response.data;
$('#loaderImage').hide();
if(globalEditor) {
globalEditor.toTextArea();
}
setTimeout(function (test) {
var editor = CodeMirror.fromTextArea(document.getElementById('apexBody'), {
lineNumbers: true,
matchBrackets: true,
mode: "text/x-apex"
});
globalEditor = $('.CodeMirror')[0].CodeMirror;
}), 2000
});
The only issue in this answer is that, it creates multiple code editor window when I try to load different classes. How can I resolve that?
So finally got it working, defined a global variable and using the method toTextArea