How to close previous popovers in fullCalendar? - javascript

I am using fullCalendar in my website together with Bootstrap so that everytime I click on a day in month view, there is a popover to add event, just like that in Google Calendar. Here is my code
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var calendar = $('#calendar').fullCalendar({
height: height,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
dayClick: function( date, allDay, jsEvent, view ){
$(this).children().popover({
title: 'haha',
placement: 'right',
content: 'haha',html : true, container: 'body'
});
$(this).children().popover('show');
}
})
The code should be right before $(this).children().popover({ so that it closes all previously fired popover.
However, exactly, what code should I use to achieve this?
Thank you!

You can remove the popover or more specifically destroy the one created before by saving the reference (which would be a more specific and better approach).
var calendar = $('#calendar').fullCalendar({
height: '300px',
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
dayClick: function (date, allDay, jsEvent, view) {
$(this).children().popover({
title: 'haha',
placement: 'right',
content: 'haha',
html: true,
container: 'body'
});
$('.popover.in').remove(); //<--- Remove the popover
$(this).children().popover('show');
}
});
Fiddle Method1
or
var $calPopOver; //create a variable to save refe
var calendar = $('#calendar').fullCalendar({
height: '300px',
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
dayClick: function (date, allDay, jsEvent, view) {
$(this).children().popover({
title: 'haha',
placement: 'right',
content: 'haha',
html: true,
container: 'body'
});
if($calPopOver) //if there is something
$calPopOver.popover('destroy'); //then call popover destroy
$calPopOver = $(this).children().popover('show');
}
});
Fiddle Method2

Related

Full calendar event limit text on click event

I am using https://fullcalendar.io/ calendar i have used eventLimitText : "more" i want the date on click of eventLimitText
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
eventLimit: true,
timeFormat: 'H:mm',
dayClick: function(date, jsEvent, view) {
alert('Clicked on: ' + date.format());
}
})
I have solved this problem by reading this documentation
Here is the code
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
eventLimit: true,
timeFormat: 'H:mm',
eventLimitClick: function(cellInfo, jsEvent, view) {
var from_date_val = JSON.stringify(cellInfo.date);
var from_to_val = JSON.stringify(cellInfo.date);
},
});

HTML Content doesnt render in popover content in fullcalendar

I am following a this codepen Here to implement popover in my fullcalendar. But the html does not render in popover.content. Instead it just displays it as string. Here is my implementation.
function GenerateCalender(events) {
$('#calender').fullCalendar('destroy');
$('#calender').fullCalendar({
contentHeight: 400,
defaultDate: new Date(),
timeFormat: 'h(:mm)a',
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay,agenda'
},
eventLimit: true,
eventColor: '#378006',
events: event_array,
eventRender: function (calEvent, $el) {
$el.popover({
title: calEvent.title,
content: "<div><b>Example popover</b> - content</div>",
start: calEvent.start,
end: calEvent.end,
trigger: "hover",
placement: "top",
container: "body"
});
}
})
Pretty sure this will have been asked before, but you can simply set the option
html: true
in your popover options to have your content rendered as HTML.
See the documentation for details.

How to make blocked dates not selectable in FullCalendar

I'm using FullCalendar to add events. Now I'm getting a problem trying to disable certain dates.
For example if I have the following dates: 2017-11-12 , 2017-11-15, 2017-11-18, how can I make these dates not selectable (blocked)?
Here is my code:
$(document).ready(function() {
var date = new Date();
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
events: [
{
id: 999,
title: 'event',
start: new Date(2017, 11, 12)
},
],
});
});

Change fullCalendar option (i.e. selectable) after click a button

I have a small problem with fullCalender.js. I am trying to change an option of the calendar after click a button, but it´s not working.
That is my js:
var calendar = $('#calendar');
calendar.fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
defaultView: 'month',
selectable: true
});
$('#but').on(click, function(e) {
calendar.fullCalendar('selectable', false);
});
And my html
<div id='calendar'></div>
<button id='but'>
Not selectable
</button>
Here the JSFiddle:
http://jsfiddle.net/CYnJY/874/
What am I doing wrong?
Thank you very much!
Change this $('#but').on(click, function(e) { to $('#but').on('click', function(e) {
Also use calendar.fullCalendar( 'destroy' ) to destroy calendar and create a new calendar.
$('#but').on('click', function(e) {
calendar.fullCalendar( 'destroy' )
calendar.fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
defaultView: 'month',
selectable: false
});
});
Check this http://jsfiddle.net/k4dhm3yL/

jQuery fullCalendar - calendar not showing on load in tabs

I'm working with jQuery fullCalendar to show a calendar. I'm also working with jQuery tabs to have multiple tabs.
I want to show the callendar in the first tab. This is what I have in my jQuery code:
$(document).ready(function(){
$("#reservatiestabs").tabs();
if($('#calendar').length) {
var dbEvents = <?php echo $events; ?>;
var calEvents = getEvents(dbEvents);
var calendar = $('#calendar').fullCalendar({
left: 'title',
center: '',
right: 'prev,next',
weekends: false,
defaultView: 'month',
defaultDate: moment(),
events: calEvents,
eventClick: function(calEvent, jsEvent, view) {
displayEvent(calEvent, calendar);
}
});
}
});
The problem is that my calendar isn't loaded when the page is loaded. The buttons are loaded but not the calendar.
How can I fix this?
UPDATE:
I've tried to do this like the following:
$(document).ready(function(){
$( "#reservatiestabs" ).tabs({ create: function( event, ui ) {
var dbEvents = <?php echo $events; ?>;
var calEvents = getEvents(dbEvents);
var calendar = $('#calendar').fullCalendar({
left: 'title',
center: '',
right: 'prev,next',
weekends: false,
weekNumbers: true,
weekNumberCalculation: "ISO",
defaultView: 'month',
defaultDate: moment(),
events: calEvents,
eventClick: function(calEvent, jsEvent, view) {
displayEvent(calEvent, calendar);
}
});
}});
});
But no difference ... .

Categories

Resources