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.

Bootstrap modal is not working on eventClick function in Full Calendar

I know this question is asked several times I have searched all the questions and following the answers but i don't understand why my code is not working or where am going wrong.
Calendar is displaying with events but when i clicked on an event am not getting a modal popup. Any help will be appreciated
css && js
bootstrap.min.css
jquery-3.3.1.min.js
bootstrap.min.js
fullcalendar-3.10.0/fullcalendar.css
fullcalendar-3.10.0/lib/jquery-ui.min.js
fullcalendar-3.10.0/lib/jquery.min.js
fullcalendar-3.10.0/lib/moment.min.js
fullcalendar-3.10.0/fullcalendar.js
fullcalendar-3.10.0/gcal.js
Javascript
$(document).ready(function(){
$('#id_btn_showEvents').click(function(){
$('#mcoCalendarForm').submit();
pleaseWait();
});
$('#calendar').fullCalendar({
header: {
left: 'prevYear,prev,next,nextYear today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listWeek'
},
defaultDate: new Date(),
navLinks: true,
editable:false,
eventLimit: true,
eventColor: '#1D5C90',
events: ${eventJson},
dayRender: function(date, cell) {
var today = $.fullCalendar.moment();
var end = $.fullCalendar.moment().add(7, 'days');
$("th.fc-"+date.format('ddd').toLowerCase()).css("background", "#1E5D91");
$("th.fc-"+date.format('ddd').toLowerCase()).css("color", "#f8f9fa");
},
eventClick: function(event, jsEvent, view) {
alert("in event click");
$('#modalTitle').html(calEvent.title);
$('#modalBody').html(calEvent.title);
$('#calendarModal').modal();
}
});
});
<div class='col-md-11'>
<div id='calendar' class='mcoCal' style="padding: 15px;"></div>
</div>
<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>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>

After a lot of research I have found that jquery.min.js is referred to twice in my page.
Modal window is displaying now after removing fullcalendar-3.10.0/lib/jquery.min.js

Getting new full calendar event in bootstrap modal

I am using bootstrap modal to display event details. When the event will be clicked the start, end and title will be displayed in the popup.
The events are created using a boostrap modal form.
Here is the code
$(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
views: {
month: {
titleFormat: 'YYYY, MM, DD'
}
},
validRange: function(nowDate) {
return {
start: nowDate,
end: nowDate.clone().add(1, 'months')
};
},
navLinks: true,
selectable: true,
selectHelper: true,
select: function(start, end) {
startDate = moment(new Date(start)).format("MM-DD-YYYY");
$('#createBookingModal .modal-header .modal-title span').text(startDate);
$('#createBookingModal').modal('show');
},
editable: true,
eventLimit: true, // allow "more" link when too many events
events: function(start, end, timezone, callback){
$.ajax({
url: '/api/bookings',
dataType: 'json',
data: {
start: start.unix(),
end: end.unix(),
},
success: function(response){
var events = [];
$(response).each(function(){
events.push({
title: $(this).attr('title'),
start: $(this).attr('start_time'),
end: $(this).attr('end_time'),
});
});
callback(events);
}
});
},
eventClick: function(event, jsEvent, view) {
//Todo
//Get event end date here
console.log(event);
startDate = moment(new Date(event.start)).format("MM-DD-YYYY");
endDate = moment(new Date(event.end)).format("MM-DD-YYYY");
$('#modalTitle').text(event.title);
$('#modalBody .start span').text(startDate);
$('#modalBody .end span').text(endDate);
$('#fullCalModal').modal('show');
},
loading: function(bool) {
$('#loading').toggle(bool);
}
});
$('#submitButton').on('click', function(e){
e.preventDefault();
doSubmit();
});
function doSubmit(){
//validate end date here
endDate = new Date($('#bookingEndDate').val());
if (! moment(endDate, 'MM/DD/YYYY', true).isValid() ){
alert('Invalid Date');
} else {
eventData = {
title: $('#bookingName').val(),
start: new Date($('#createBookingModal .modal-header .modal-title span').text()),
end: endDate
};
$.ajax({
url: '/api/bookings/create',
data: {
title: eventData.title,
start_time: eventData.start,
end_time: eventData.end
},
success: function(response){
console.log(response);
// if ( response == 0 ){
// alert('Invalid Date');
// return false;
// } else {
// return true;
// }
}
});
$('#createBookingModal form').get(0).reset();
$("#createBookingModal").modal('hide');
$("#calendar").fullCalendar('renderEvent', eventData, true);
$('#calendar').fullCalendar('unselect');
}
}
});
HTML code
<div class="card-body full-calendar">
<div id='calendar'></div>
<!-- Display Create Booking form in modal -->
<div id="createBookingModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Add an Booking on: <span class="startDate"></span>></h4>
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span> <span class="sr-only">close</span></button>
</div>
<div id="modalBody" class="modal-body">
<form>
<div class="form-group">
<label for="bookingName">Booking Title</label>
<input class="form-control" type="text" placeholder="Booking Name" id="bookingName">
</div>
<div class="form-group">
<label for="bookingEndDate">End Date</label>
<div class="input-group date" data-provide="datepicker">
<input type="text" id="bookingEndDate" class="form-control" placeholder="mm/dd/yyyy">
<div class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</div>
</div>
</div>
<!--<div class="form-group">
<textarea class="form-control" type="text" rows="4" placeholder="Booking Description" id= "eventDescription"></textarea>
</div>-->
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
<button type="submit" class="btn btn-primary" id="submitButton">Save</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Display Booking in modal -->
<div id="fullCalModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 id="modalTitle" class="modal-title"></h4>
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span> <span class="sr-only">close</span></button>
</div>
<div id="modalBody" class="modal-body">
<p class="start">Start At: <span></span></p>
<p class="end">End At: <span></span></p>
</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>
I am not getting the end date for the newly created event when trying to display it in modal, you can notice //todo, that is where I want to get end date.May be it need to delegated, but I have no idea how it should be done?
I have added a fiddle here, you can see, the end date is coming "01-01-1970", because eventClick() is not getting the end date.
Update
It happens only when you are giving same start and end date.

I fixed it with just a small workaround, if anyone has a better solution, feel free to post.
eventClick: function(event, jsEvent, view) {
if ( event.end == null ){
event.end = event.start;
}
startDate = moment(new Date(event.start)).format("MM-DD-YYYY");
endDate = moment(new Date(event.end)).format("MM-DD-YYYY");
$('#modalTitle').text(event.title);
$('#modalBody .start span').text(startDate);
$('#modalBody .end span').text(endDate);
$('#fullCalModal').modal('show');
},
*#ADyson has a huge contribution on this solution, I was expecting to post this as an answer after our discussion, he did not post, so I am posting it.

I had a similar issue (about 2 years ago!) Had to use submitHandler: function(){} like below
submitHandler: function (form) {
var dataRow = CreateDataSetup();
$.ajax({
type: 'POST',
url: "/BookingTwo/SaveEvent",
data: dataRow,
success: function () {
$("#myform")[0].reset();
ClearPopupFormValues();
$('#popupEventForm').modal('hide');
},
statusCode: {
201: function (response) {
$('#calendar').fullCalendar('refetchEvents');
ClearPopupFormValues();
showAlert("Success Event Created.", "success", 4000)
},
500: function (response) {
$('#calendar').fullCalendar('refetchEvents');
ClearPopupFormValues();
showAlert("Internal Server Error - Logged with System Admins", "danger", 4000)
$('#popupEventForm').modal('hide');
},
400: function (response) {
$('#calendar').fullCalendar('refetchEvents');
ClearPopupFormValues();
showAlert("Duration Service Returned 0 - Event NOT Created.", "danger", 4000)
$('#popupEventForm').modal('hide');
},
401: function (response) {
$('#calendar').fullCalendar('refetchEvents');
ClearPopupFormValues();
showAlert("Warning - You do not have permission to delete this.", "danger", 4000)
$('#popupEventForm').modal('hide');
},
403: function (response) {
$('#calendar').fullCalendar('refetchEvents');
ClearPopupFormValues();
showAlert("Warning - Can't delete approved events.", "danger", 4000)
},
409: function (response) {
$('#calendar').fullCalendar('refetchEvents');
ClearPopupFormValues();
showAlert("There is already an event for the user for this date.", "danger", 4000)
}
}
});
}
Also created a DataSetup funtion -
function CreateDataSetup() {
console.log("Attempting to Setup POST Values...")
var intEtad = parseInt($('#ETADType').val());
var intEtadSub = parseInt($('#ETADSubType').val());
var normStart = $('#LeaveStart').val();
var normEnd = $('#LeaveFinish').val();
var ahStart = $('#ADHOCLeaveStart').val();
var ahEnd = $('#ADHOCLeaveFinish').val();
var dataRow = {
'Id': $('#id').val(),
'Subject': $('#title').val(),
'Description': $('#customdescription').val(),
'StartTime': normStart,
'EndTime': normEnd,
'AHStartTime': ahStart,
'AHEndTime': ahEnd,
'SelectRole': $('#SelectRole').val(),
'ETADType': intEtad,
'ETADSubType': intEtadSub,
'StaffID': $('#StaffID').val(),
'EventStatus': $('#EventStatus').val(),
'AllRoles': $('#AllRoles').is(':checked'),
'AllDay': $('#AllDay').is(':checked'),
'AM': $('#AM').is(':checked'),
'PM': $('#PM').is(':checked'),
'ADHOC': $('#ADHOC').is(':checked'),
};
console.log("Setup Complete");
return dataRow;
}

fullcalnder not calls on button click and inside any function

I am using fullcalendar.
When my page loads fullcalendar loads properly.
Now, I want to retrieve new data from table and want to display it on calendar.
For that, I call an ajax on button click, The ajax will retrieve the new data from table and display on fullcalendar.
But i am getting an error in firebug console.
TypeError: $(...).fullCalendar is not a function
It works when page will load, but when i used it in a function or any click event it wont works.
Here is my code. Please check it and suggest me.
<script>
$(document).ready(function() {
var today = new Date();
// This works because it calls on page load
$('#calendars').fullCalendar({
header: {
right: 'month,agendaWeek,agendaDay,prev,next today'
},
defaultDate: today,
editable: true,
navLinks: true, // can click day/week names to navigate views
eventLimit: true, // allow "more" link when too many events
events: {
url: 'fullcalendar/demos/php/get-events.php',
error: function(eee) {
$('#script-warning').show();
}
},
loading: function(bool) {
$('#loading').toggle(bool);
}
});
// This doesn't works because it calls on button click. It gives me TypeError: $(...).fullCalendar is not a function
$("#clickme").click(function(){
var timezone = localStorage.getItem("timezone");
var start = "2016-10-16";
var end = "2016-10-21";
$('#calendars').fullCalendar({
events: function(start, end, timezone, callback) {
$.ajax({
url: "fullcalendar/demos/php/get-events.php?mode=customdate&start=" + start + "&end=" + end,
type: 'json',
success: function(doc) {
var events = [];
$(doc).find('event').each(function() {
events.push({
title: $(this).attr('title'),
start: $(this).attr('start') // will be parsed
});
});
callback(events);
}
});
}
});
});
});
</script>
<div id='script-warning'>
<code>php/get-events.php</code> must be running.
</div>
<div id='loading'>loading...</div>
<div>
<div class="row" style="border-top:2px solid">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4" style="border-right:1px solid">
<div id='overviewDatePicker' style='margin-bottom:10px;margin-top:90px'></div>
<div><b>Filter By Eventname</b></div>
<div>
<input type="text" placeholder="Search"/>
</div>
<div><b>Filter By Stage</b></div>
<ul style="list-style:none">
<li><span class="glyphicon glyphicon-flag" style="margin:3px"></span>Tentative Booking</li>
<li><span class="glyphicon glyphicon-ok" style="margin:3px"></span>Complete Booking</li>
</ul>
<br><br><br>
</div>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8" id="eventcalendar">
<button id="clickme"> Click</button>
<div id="calendars"></div>
</div>
</div>
</div>

I have update my code according your code. Please check on click function where I have made changes modified you code accordingly and let me know outcome
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.css" />
<script>
$(document).ready(function() {
var today = new Date();
// This works because it calls on page load
$('#calendars').fullCalendar({
header: {
right: 'month,agendaWeek,agendaDay,prev,next today'
},
defaultDate: today,
editable: true,
navLinks: true, // can click day/week names to navigate views
eventLimit: true, // allow "more" link when too many events
events: {
url: 'fullcalendar/demos/php/get-events.php',
error: function(eee) {
$('#script-warning').show();
}
},
loading: function(bool) {
$('#loading').toggle(bool);
}
});
// Please check this part only
$("#clickme").click(function(){
var timezone = localStorage.getItem("timezone");
var start = "2016-10-16";
var end = "2016-10-21";
$.ajax({
url: "fullcalendar/demos/php/get-events.php?mode=customdate&start=" + start + "&end=" + end,
type: 'json',
success: function(doc) {
var events = [];
$(doc).find('event').each(function() {
events.push({
title: $(this).attr('title'),
start: $(this).attr('start') // will be parsed
});
});
//$("#calendars").fullCalendar('removeEvents'); //If you want to remove existing events from calender
$("#calendars").fullCalendar('addEventSource', events);
}
});
});
});
</script>
</head>
<body>
<div id='script-warning'>
<code>php/get-events.php</code> must be running.
</div>
<div id='loading'>loading...</div>
<div>
<div class="row" style="border-top:2px solid">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4" style="border-right:1px solid">
<div id='overviewDatePicker' style='margin-bottom:10px;margin-top:90px'></div>
<div><b>Filter By Eventname</b></div>
<div>
<input type="text" placeholder="Search"/>
</div>
<div><b>Filter By Stage</b></div>
<ul style="list-style:none">
<li><span class="glyphicon glyphicon-flag" style="margin:3px"></span>Tentative Booking</li>
<li><span class="glyphicon glyphicon-ok" style="margin:3px"></span>Complete Booking</li>
</ul>
<br><br><br>
</div>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8" id="eventcalendar">
<button id="clickme"> Click</button>
<div id="calendars"></div>
</div>
</div>
</div>
</body>
</html>

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.