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
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);
},
});
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.
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)
},
],
});
});
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 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 ... .