I am using fullCalendar with bootstrap popovers. The goal is to append a form for adding new event inside the popovers. The code does make the popover appears above the cells, however, on clicking the popovers, the cells underneath it are selected rather than the popovers themselves.
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 ){
if (view.name=='month'){
$(this).children().popover({
placement: 'right',
content: function() {return $("#popover-content").html();},
html : true, container: 'body'
});
$('.popover.in').remove();
$(this).children().popover('show');
..........
and html
<div id="popover-content" class="hide">
<form>
<input id="easyeventtitle" />
</form>
</div>
This is how it looks like
I have tried z-index to popovers, instead, they do not appear at all!
Please help! Thank you for your time!
Edit: here is the link to test it
Try this code
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay',
},
events: '/events.json',
editable: true,
selectable: true,
dayClick: function(start, end, allDay, jsEvent, view) {
$(this).popover({
html: true,
placement: 'right',
title: function() {
return $("#popover-head").html();
},
content: function() {
return $("#popover-content").html();
},
html: true,
container: 'body'
});
$(this).popover('toggle');
}
});
});
Related
The calendar doesn't display hours beside .
i have uploaded a picture and put the code to understand the problem more
how can i correct it ?
Code javascript :
$(document).ready(function () {
var date = new Date();
// the code display the calendar
$('#calendar').fullCalendar({
// the header
header:{
left: 'prev,next today',
center: 'title',
right: 'agendaWeek,agendaDay'
},
defaultView: 'agendaWeek',
lang: 'fr',
buttonIcons: false, // show the prev/next text
editable: true, // resize event
eventLimit: true, // allow "more" link when too many events
minTime: '06:00:00',
maxTime: '20:00:00',
eventRender: function (event, element) {
element.find('.fc-title').append(" || " + event.type);
},
dayClick: function (date, jsEvent, view, resourceObj) {
//getting the clicked date from calendar
},
eventClick: function (calEvent) {
// event clicked
},
// events redered in twig template
// I an working with symfony
events:{{ events|raw }}
})
});
thank you very much i'm using fc-time{ display: none;} it's working now
Am re sizing the height of the full calendar to fit in my screen. And am also limiting the events displayed in month view. So, now when I click +'x'more button, event container popup is coming at the bottom of the screen.
If am not altering the height, event container popup is aligned properly.
Please let me know how to fix popup alignment issue when calendar height is re sized.
Below is my code and attached the screenshot of calendar view
$('#calendar').fullCalendar({
now: new Date(),
editable: false,
aspectRatio: 1.8,
height: 200,
selectable: true,
scrollTime: '00:00',
header: {
left: 'prevYear,prev,next,nextYear today',
center: 'title',
right: 'timelineDay,timelineThreeDays,agendaWeek,month'
},
dayClick: function(date, jsEvent, view) {
var view = $('#calendar').fullCalendar('getView');
if (view.name == 'month') {
$('#calendar').fullCalendar('gotoDate', date._d.toISOString().slice(0, 10));
$('#calendar').fullCalendar('changeView', "timelineDay");
}
},
defaultView: 'timelineDay',
views: {
timelineThreeDays: {
type: 'timeline',
duration: {
days: 3
}
}
},
eventOverlap: false,
resourceAreaWidth: '25%',
resourceLabelText: 'Reservations',
resourceGroupField: 'building',
resources: resourcesList,
events: eventList,
eventLimit: true,
eventRender: function(event, element) {
element.find('.fc-title').append(' ' + event.statusCode);
},
});
screenshot
I am using FullCalendar v2 and bootstrap v3.3.2. I am trying to show a popover inside of the slot where the user click. Here there an example that I try to do http://jsfiddle.net/5g396/ but the problem is that it uses FullCalendar v1 and I need FullCalendar V2.
This is my code, http://jsfiddle.net/beckymo/nmwyz269/, but the popover is only shown in the same position of the Calendar.
My questions is: How to show popover bootstrap v3.3.2. in FullCalendar v2 on the top of slot when the user click? Thanks!
$('#calendar-holder').fullCalendar({
header: {
left: 'prev, next',
center: 'title',
right: 'month, agendaWeek, agendaDay'
},
businessHours: {
start: '09:00',
end: '19:00',
dow: [1, 2, 3, 4, 5]
},
allDaySlot: false,
defaultView: 'agendaWeek',
lazyFetching: true,
firstDay: 1,
selectable: true,
timeFormat: {
agenda: 'h:mmt',
'': 'h:mmt'
},
dayClick: function (date, jsEvent, view) {
$(this).popover({
title: 'haha',
placement: 'right',
content: 'haha',
html: true,
container: 'body'
});
$(this).popover('show');
}
});
Thanks!!!
Firstly you need add the option "selectable: true" because it create a div inside of slot where you click.
Secondly you can use this div as selector (.fc-highlight") for call popover like this:
dayClick: function (date, jsEvent, view) {
$(".fc-highlight").popover({
title: 'haha',
placement: 'right',
content: 'haha',
html: true,
container: 'body'
});
$(".fc-highlight").popover('show');
}
Hi i'm trying to loop inside the jquery Fullcalendar events, but i don't know why this is not working :
var birthdaysList = #Html.Raw(Json.Encode(#ViewBag.birthdaysList));
$(document).ready(function () {
$('#calendar').fullCalendar({
lang: 'es',
header: {
left: 'title',
center: '',
right: 'prev,next today'
//right: 'month,agendaWeek,agendaDay'
},
eventLimit: true, // allow "more" link when too many events
events: //My loop here for title: birthdaysList.name , start birthdaysList.date
});
});
OK first of all, you can't do a loop inside envents: , you have to make an array and then call it from the envents: , like this:
var birthdaysList = #Html.Raw(Json.Encode(#ViewBag.birthdaysList));
var events = []; //The array
for(var i =0; i < birthdaysList.length; i++)
{events.push( {title: birthdaysList[i].name , start: birthdaysList[i].date})}
$(document).ready(function () {
$('#calendar').fullCalendar({
lang: 'es',
header: {
left: 'title',
center: '',
right: 'prev,next today'
//right: 'month,agendaWeek,agendaDay'
},
eventLimit: true, // allow "more" link when too many events
events: events
});
});
I need to limit the events to one in a particular date, and on click of date if any events are present, it has to be removed.
While adding an event to a date, the color of the cell should be turned orange, and while deleting the event, it has to be turned back to white.
$(function () {
// Full calendar
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
selectable: true,
selectHelper: true,
select: function(start, end, allDay) {
var title = prompt('Event Title:');
if (title) {
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
backgroundColor: 'orange',
allDay: allDay,
},
true
);
}
calendar.fullCalendar('unselect');
},
eventClick: function(event){
var r=confirm(\"Are you sure?\");
if (r==true)
{
$('#calendar').fullCalendar('removeEvents',event._id);
}
},
dayClick: function(date, allDay, jsEvent, view) {
if($( this ).hasClass('bg-orange')){
$(this).removeClass('bg-orange');
}
else
{
$(this).addClass('bg-orange');
}
},
editable: true,
events: [
]
});
});