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?
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 am using full calendar js in my code. I am able to select multiple dates in the calendar but I am not able to unselect the selected dates. Where do I need to changes in my code?
IN HTML FILE
<div class ="main-container fullcalendar-booking-course unselectCancel">
<div id="calendar"></div>
</div>
IN MY JS FILE
<script type="text/javascript">
$(document).ready(function() {
getFullCalendar();
</script>
<script type="text/javascript">
function getFullCalendar(){
$('#calendar').fullCalendar({
header: {
left: 'prev,next',
center: 'title',
right: 'month,agendaWeek'
},
views: {
month: {
titleFormat: 'YYYY, MM, DD'
}
},
validRange: function(nowDate) {
return {
start: nowDate,
end: nowDate.clone().add(1, 'months')
};
},
navLinks: true,
selectable: true,
selectHelper: true,
select: function(start, end) {
startDate = moment(new Date(start)).format("MM-DD-YYYY");
endDate = moment(new Date(end)).format("MM-DD-YYYY");
$("#calendar").fullCalendar('addEventSource', [{
start: start,
end: end,
rendering: 'background',
block: true,
}]);
$("#calendar").fullCalendar("unselect");
},
selectOverlap: function(event) {
return ! event.block;
},
editable: true,
eventLimit: true,
events: function(start, end, timezone, callback){
},
eventClick: function(event, jsEvent, view) {
},
loading: function(bool) {
$('#loading').toggle(bool);
},
eventRender: function(event, element){
},
eventAfterAllRender: function (view) {
var quantity = $('.fc-bgevent').length;
$("#quantity").val(quantity);
},
});
}
</script>
NOTE:
I am using fullcalendar js file and CSS file. I have initialized the function in the document ready function. I need to unselect the selected dates. I can select multiple dates but unable to unselect the dates.
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 like the fullcalendar JQuery-Plugin. My calendar doesn't work. At the moment i am looking for a solution to add an event but i can't... Why ?
This is my code:
$(document).ready(function() {
$('#calendar').fullCalendar({
defaultDate: '2017-05-11',
editable: true,
selectable: true,
selectHelper: true,
eventLimit: true, // allow "more" link when too many events
select: function(start, end, allDay) {
var title = prompt("Event here: ", "New Event:");
if (title != null) {
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
allDay: allDay
},
true // make the event "stick"
);
}
$calendar.fullCalendar("unselect");
},
events: [
{
title: 'All Day Event',
start: '2017-05-01'
}
]
});
});
You need to define variable calendar like below
var calendar = $('#calendar').fullCalendar({
Then it will work.
My popover isn't working when I trigger an evenLimitClick event in my fullcalendar. It works fine in my dayClick event, but nothing happens in my eventLimitClick. Here is my fiddle
I even tried setting the popover to be called on the parent (ex. $(this).parent().popover, but that didn't work either.
$(document).ready(function () {
// page is now ready, initialize the calendar...
var eventsArray = [{
title: 'Test1',
start: new Date()
}, {
title: 'Test2',
start: new Date("2015-04-21")
}, {
title: 'Test3',
start: new Date("2015-04-21")
}];
$('#calendar').fullCalendar({
// put your options and callbacks here
header: {
left: 'prev,next', //today',
center: 'title',
right: ''
},
defaultView: 'month',
editable: true,
allDaySlot: false,
selectable: true,
events: eventsArray,
eventLimit: 1,
eventLimitClick: function (cellInfo, jsEvent) {
$(this).popover({
html: true,
placement: 'bottom',
container: 'body',
title: function () {
return $("#events-popover-head").html();
},
content: function () {
return $("#events-popover-content").html();
}
});
$(this).popover('show');
},
dayClick: function (cellInfo, jsEvent) {
$(this).popover({
html: true,
placement: 'bottom',
container: 'body',
title: function () {
return $("#events-popover-head").html();
},
content: function () {
return $("#events-popover-content").html();
}
});
$(this).popover('show');
},
})
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.1/fullcalendar.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.1/fullcalendar.js"></script>
<div style="border:solid 2px red;">
<div id='calendar'></div>
<div id="events-popover-head" class="hide">Events</div>
<div id="events-popover-content" class="hide">Test</div>
</div>
In the eventLimitClick event change following:
$(this).popover
To
$(cellInfo.dayEl)
cellInfo.dayEl is the clicked Day cell element for which you want to show popover.
I have updated the Fiddle also