Develop Reference

FullCalendar auto fill event on click

I created FullCalendar with Bootstrap Modal, but displayed data is transferred from one modal to another after click.
At first all events have the proper data. But if i click on event, close it and open another
,then context of first clicked event is displayed inside second one.
Any ideas where may be the problem?
JS basic elements:
<script>
function loadCalendar() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
// setup local parameters
selectable: true,
plugins: ['interaction', 'dayGrid'],
firstDay : 1,
header: {
left: 'today',
center: 'title',
right: 'prev, next',
},
// load all events
events: [
{% for event in events %}
{
id: '{{event.id}}',
user: '{{event.user}}',
},
{% endfor %}
],
eventClick: function(event) {
console.log('modal', event);
$('#modal_window').modal();
$('#modal_title').html(event.event.extendedProps.client_name);
}
},
});
calendar.render();
};
// load calendar function
if (document.readyState !== 'complete') {
document.addEventListener('DOMContentLoaded', loadCalendar);
} else {
loadCalendar();
}
</script>
Bootstrap:
<!-- Calendar-->
<div id='calendar'></div>
<!-- Modal -->
<div id="modal_window" class="modal fade bd-example-modal-sm">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-body">
<p id="modal_title"></p>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Thank you all for your time.

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>

Fullcalendar with date range picker

I want to have a datepicker range on my Fullcalendar. I've seen some posts where you could pick a date with a datepicker, but I would like the user to be able to pick the start and end date.
My fullcalendar looks like the following image, and I would like to add the datepickers on the red square.
This is the code I'm using. How/where can I add the datepickers?
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: '2016-09-12',
navLinks: true, // can click day/week names to navigate views
selectable: true,
selectHelper: true,
select: function(start, end) {
var title = prompt('Event Title:');
var eventData;
if (title) {
eventData = {
title: title,
start: start,
end: end
};
$('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
}
$('#calendar').fullCalendar('unselect');
},
eventClick: function(event, element) {
event.title = prompt('Event Title:',event.title );
$('#calendar').fullCalendar('updateEvent', event);
},
editable: true,
eventLimit: true, // allow "more" link when too many events
});
$('#datepicker').datepicker({
inline: true,
onSelect: function(dateText, inst) {
var d = new Date(dateText);
$('#fullcalendar').fullCalendar('gotoDate', d);
}
});
});
</script>
<style>
body {
margin: 40px 10px;
padding: 0;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
font-size: 14px;
}
#calendar {
max-width: 900px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id='calendar'></div>
<div id='datepicker'></div>
</body>

Ok, so here's the work for you. But first, a few notes on your question:
If you want to do that with prompt you'll need to have three prompts (one for the title, other for the start and other for the end). And you should now that's not easy to customize a prompt.
You should have picked a datepicker library to use
Now, an explanation of the code below:
I'm using Bootstrap Modal to request data from the user
I'm using Bootstrap Eonasdan Datetimepicker, with no options (you should customize this for your needs)
The idea is to open the modal when the user selects a date, fill the data in, click on the "save" button, add the event to fullcalendar, clear the modal's fields and close the dialog.
First, you need to write down the HTML for the modal, as such
<div class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Create new event</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-xs-12">
<label class="col-xs-4" for="title">Event title</label>
<input type="text" name="title" id="title" />
</div>
</div>
<div class="row">
<div class="col-xs-12">
<label class="col-xs-4" for="starts-at">Starts at</label>
<input type="text" name="starts_at" id="starts-at" />
</div>
</div>
<div class="row">
<div class="col-xs-12">
<label class="col-xs-4" for="ends-at">Ends at</label>
<input type="text" name="ends_at" id="ends-at" />
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="save-event">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
You javascript should be updated to:
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: '2016-09-12',
navLinks: true, // can click day/week names to navigate views
selectable: true,
selectHelper: true,
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');
});
});
And this is a start for you. There's a lot you should do to improve this. Note that when you edit an event, this will create a new one, but I leave you to figure that out.
For your convenience, I've created a jsfiddle where you can view this working and the dependencies used.

Use Bootstrap Modal on Fullcalendar js

I have a question, I am having a hard time to figure out a way to use bootstrap modal in fullcalendar. What I am trying to do is when you click on the event on the calendar, the modal will pop-up and provide the full name of the event and summary of the event.
The following is the code I am using to generate the calendar:
<cffunction name="FullCalendar">
<cfscript>
var calendarid = $.getbean('content').loadby(title='Regal Events').getcontentid();
</cfscript>
<cfsavecontent variable="local.str">
<cfoutput>
<div id="UpcomingCal" class="calendarResize">
</div>
<div id="fullCalModal" 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>
<button class="btn btn-primary"><a id="eventUrl" target="_blank">Event Page</a></button>
</div>
</div>
</div>
</div>
<script>
mura.loader()
.loadcss("#$.siteConfig('requirementspath')#/fullcalendar/fullcalendar.css",{media:'all'})
.loadcss("#$.siteConfig('requirementspath')#/fullcalendar/fullcalendar-custom.css",{media:'all'})
.loadcss("#$.siteConfig('requirementspath')#/fullcalendar/fullcalendar.print.css",{media:'print'})
.loadjs(
"#$.siteConfig('requirementspath')#/fullcalendar/lib/moment.min.js",
"#$.siteConfig('requirementspath')#/fullcalendar/fullcalendar.min.js",
"#$.siteConfig('requirementspath')#/fullcalendar/gcal.js",
function(){
$('##UpcomingCal').fullCalendar({
weekMode: 'variable',
eventSources: [
{
$('#eventUrl'): '#variables.$.siteConfig('requirementspath')#/fullcalendar/proxy.cfc?calendarid=#esapiEncode("javascript",CalendarID)#'
, type: 'POST'
, data: {
method: 'getFullCalendarItems'
, calendarid: '#esapiEncode("javascript",CalendarID)#'
, siteid: '#variables.$.content('siteid')#'
, categoryid: '#esapiEncode('javascript',variables.$.event('categoryid'))#'
, tag: '#esapiEncode('javascript',variables.$.event('tag'))#'
}
<!---, color: '#this.calendarcolors[colorIndex].background#'
, textColor: '#this.calendarcolors[colorIndex].text#'--->
, error: function() {
$('##mura-calendar-error').show();
}
},
]
});
}
)
</script>
</cfoutput>
</cfsavecontent>
<cfreturn local.str />
</cffunction>
As you can see above, I have included the bootstrap modal. However, I am not sure how to add the following code so that when you click on the event, the modal appears:
$(document).ready(function() {
$('#bootstrapModalFullCalendar').fullCalendar({
events: '/hackyjson/cal/',
header: {
left: '',
center: 'prev title next',
right: ''
},
eventClick: function(event, jsEvent, view) {
$('#modalTitle').html(event.title);
$('#modalBody').html(event.description);
$('#eventUrl').attr('href',event.url);
$('#fullCalModal').modal();
}
});
});
Any help would be appreciated
Thanks

Your problem is not is not related to javascript, bootstrap or fullcalendar.
I created a minimal test case to help you out and it works.
You should check coldfusion and mura.loader code.

fullcalendar bootstrap modal with external event data

I'm using full calendar with a asp.net MVC 5 application.
When I click a on a empty space I get a modal view for creating a event. This works perfect.
When I click on a event I want to get the event data but also some other data then just the start date end date and description.
I have the following:
eventRender: function (event, element) {
var id = event.id;
element.popover({
placement: 'top',
html: true,
content: '<button id="customers" class="btn btn-default" onclick="KlantenModal(' + id + ')">Klant overzicht</button>',
animation: true
});
}
The function that calls the modal.
function KlantenModal(event) {
$('#klanten #eventId').val(event);
$('#klanten').modal('show');
}
and the bootstrap modal:
<div class="modal fade" id="klanten" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Klanten</h4>
</div>
<div class="modal-body">
/* here I want some Data eg. names of customers */
<input type="hidden" id="eventId" name="eventId" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary"></button>
</div>
</div>
</div>

If i understood you well the only thing you have to do is to add fields to the event like this:
Somewhere in your code populate an array with diferent customers and add that array to the event properties
var customers = [];
customers.push("im customer x");
customers.push("im customer y");
...
events:[
{
'start': 2013-12-30,
'end': 2013-12-30,
'allDay': true,
'customers': customers
}
and when you click on the event and access the event fields you will get the customers field wich contains your customers for that day.