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.
Related
I am getting a
Too much recursion
error when I click on any event or date. Here is some of my code
$('#kt_calendar').fullCalendar({
isRTL: false,
header: {
left: 'prev title next today',
center: '',
right: 'month,listMonth'
},
buttonText: {
month: 'Calendar View',
list: 'List View'
},
editable: false,
eventLimit: true, // allow "more" link when too many events
navLinks: true,
events: events,
dayClick: function (date, jsEvent, view) {
load_day_events(date);
},
eventClick: function (info) {
if (info.id) {
load_event(info);
}
}
});
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/
I'm using fullcalendar in jquery dialog that is open when I click a button.
The calendar looks like this:
<script>
$(document).ready(function() {
calendar = $( "#calendar" ).fullCalendar({
height: 400,
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaWeek,month'
},
defaultView: 'agendaWeek',
slotDuration: '00:60:00',
slotLabelFormat:"HH:mm",
timeFormat: 'H(:mm)',
firstDay: 1,
allDaySlot: false,
selectOverlap: false,
selectable: true,
selectHelper: true,
editable: false,
eventStartEditable: false,
eventDurationEditable: false,
eventLimit: true,
select: function(start, end) {
var title = prompt('Purpose of this booking:');
var eventData;
if (title) {
eventData = {
title: title,
start: start,
end: end
};
$('#calendar').fullCalendar('renderEvent', eventData, true);
}
$('#calendar').fullCalendar('unselect');
},
events: [
{
title: 'Test1',
start: '2016-05-26T10:00:00',
end: '2016-05-26T16:00:00',
allDay: false
},
{
title: 'Test2',
start: '2016-05-27T14:00:00',
end: '2016-05-27T18:00:00',
allDay: false
}
]
});
} );
$(function() {
dialog = $( "#dialog-form" ).dialog({
autoOpen: false,
height: 610,
width: 900,
modal: true
});
$( ".btn-book" ).button().on( "click", function() {
dialog.dialog( "open" );
$('#calendar').fullCalendar( 'rerenderEvents');
$('#calendar').fullCalendar('render');
});
});
</script>
<button class='btn-book' type='button'>Book</button>
<div id="dialog-form" title="Book resource">
<form>
<div id='calendar'></div>
<input type="submit"/>
</form>
</div>
This is how it renders the events the first time:
As you can see, the events are not placed properly, the times don't match with the rows shown by the calendar...
Interestingly, if I enter a new event manually, then everything moves a bit and aligns automatically matching the times.
Is there any way to correct this?
I'm tryin' with FullCalendar. But when I add 'height' property into the initialize function, the dayClick function doesn't work, then I remove height, it works normally. Could you please explain to me why and how to set height for calendar.
Here is my code:
$(tag).fullCalendar({
defaultDate: date,
editable: true,
//height: 'auto',
header: {
left: 'today prev',
center: 'title',
right: 'next'
},
buttonText: {
today: 'Today'
},
dayClick: function(date, jsEvent, view) {
//code
},
});
Thank you very much!
That's invalid syntax, take out the comma after dayClick.
dayClick: function(date, jsEvent, view) {
//code
}
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