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.
Related
I'm using MaterializeCss Modals (https://materializecss.com/modals.html), and I'm attempting to add a Modal when clicking on a date in a the calendar.
<script>
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.modal');
var instances = M.Modal.init(elems);
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'dayGrid', 'interaction' ],
height: 655,
selectable: true,
dateClick: function(info) {
// Not sure what to put here
},
}
);
calendar.render();
});
</script>
The modal opens with the standard HTML given on the Materialize website,
<!-- Modal Trigger -->
<a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>
<!-- Modal Structure -->
<div id="modal1" class="modal">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
Agree
</div>
</div>
But I need to trigger the Modal opening on the dateClick function.
instances[0].open();
These two lines selects all elements with a class of modal, and intialises them:
var elems = document.querySelectorAll('.modal');
var instances = M.Modal.init(elems);
instances is an array, so we need to select the modal we'd like to open, in our case it's the first (only) one.
https://materializecss.com/modals.html#methods
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
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>
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.
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.