So i have this calender. You can see below. When the page is first loaded i populate the 'events' propertie of the calender which works fine. What i am having problem with is updateing the 'events' propertie inside the 'viewrender' eventcallback. Is that possible.
Iam using fullcalender version 3.9.
I tried inside the viewrender to set .... this.setevents. But it dont seem to work
$("#request_calender").fullCalendar({
eventOverlap: true,
selectable: true,
views: {
listDay: {
buttonText: 'Custom View',
},
agendaWeek: {
columnFormat: 'ddd D/M'
}
},
slotLabelFormat: 'H:mm',
customButtons: {
toggleWeekends: {
text: 'show weekends',
click: function() {
toggleWeekends();
},
}
},
header: {
left: "prev,next today toggleWeekends unBooked",
center: "title",
right: "agendaDay,agendaWeek,month,listWeek"
},
weekends: false,
weekNumbers: true,
defaultView: 'agendaWeek',
select: function(startDate, endDate) {
start_date = startDate.format();
end_date = endDate.format();
new_request(start_date, end_date);
},
events: calender_array,
timeFormat: 'H(:mm)',
eventRender: function(e, t) {
//some code here
},
eventClick: function(event, jsEvent, view) {
console.log("event:", event);
request_id = event['request_id'];
request_details(request_id);
},
viewRender: function(view, element) {
//HERE I WANT TO GET DATA VIA A API AND PUSH TO EVENTS
if (view.name == 'listDay') {
showCustomView();
}
}
});
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 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.
I'm having 2 weird issues with my popovers shown here in fiddle
After I have selected a day (in fullcalendar) and the popover shows, I click the day again to hide the popover, then I click again in the same day to show again, but no popover!. It's after I click to show, hide, then click to show again that I'm having issues.
When I click on an eventLimitClick event inside a day (April 20th in fiddle), then click on the day (April 20th). The popover hides after I click the day, but then doesn't show any popover for the day like it should.
Here is some of the logic, but please refer to the fiddle link above for working code.
var $calPopOver;
$('#fullcalendar').fullCalendar({
header: {
left: 'prev,next', //today',
center: 'title',
right: ''
},
defaultView: 'month',
editable: true,
allDaySlot: false,
selectable: true,
eventLimit: 1,
events: function(start, end, timezone, callback) {
$.ajax({
url: '/ManageSpaces/GetDiaryEvents/',
dataType: 'json',
data: {
start: start.format(),
end: end.format(),
id: $("#HiddenYogaSpaceId").val()
},
success: function(doc) {
var events = [];
$(doc).each(function() {
events.push({
title: "1 Event", //$(this).attr('title'),
start: $(this).attr('start') // will be parsed
});
});
callback(events);
}
});
},
eventLimitText: function(numberOfEvents) {
return numberOfEvents + " Events";
},
eventLimitClick: function(cellInfo, jsEvent) {
$(cellInfo.dayEl).popover({
html: true,
placement: 'bottom',
container: 'body',
title: function() {
return $("#events-popover-head").html();
},
content: function() {
return $("#events-popover-content").html();
}
});
//$(cellInfo.dayEl).popover('toggle');
if ($calPopOver) {
$calPopOver.popover('destroy');
}
$calPopOver = $(cellInfo.dayEl).popover('show');
},
eventClick: function(calEvent, jsEvent, view) { //function (data, event, view) {
//var s = cellInfo.segs;
$("#eventDetails.collapse").collapse('toggle');
if ($calPopOver)
$calPopOver.popover('destroy');
},
dayClick: function(data, event, view) {
$dayClickedDate = data.format();
$(this).popover({
html: true,
placement: 'bottom',
container: 'body',
title: function() {
return $("#day-popover-head").html();
},
content: function() {
return $("#day-popover-content").html();
}
});
//$(this).popover('toggle');
if ($calPopOver) {
$calPopOver.popover('destroy');
}
$calPopOver = $(this).popover('show');
}
});
Maybe you can look into these bootstrap examples. If you can manage to get a copy of the examples, it's simple a copy and paste scenario IMO.
http://getbootstrap.com/javascript/
Search for "Popovers popover.js" on this page and scroll a bit down for the examples.
FullCalendar v2.2.5, I want to use my JSON generating script to pull data only for the visible area of the calendar as mentioned in a few other questions.
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay',
defaultAllDay: true,
},
lazyFetching: false,
defaultDate: '2015-01-06',
editable: false,
eventLimit: 10,
weekMode: 'liquid',
dayPopoverFormat: 'DD/MM/YYYY',
//events: {
// url: 'instant-tools.cgi',
// type: 'POST',
// data: {
// events: 1,
// pending: 1,
// from: '2014-01-01',
// to: '2016-12-31',
// }
// },
viewRender: function(view, element) {
var events_slice = new Object();
events_slice.eventSources = [
{
url: 'instant-tools.cgi',
type: 'POST',
data: { events: 1, pending: 1, from: '2014-01-01', to: '2016-12-31' }
}
];
$('#calendar').fullCalendar('addEventSource', events_slice);
//$('#calendar').fullCalendar('renderEvents');
},
eventClick: function(calEvent, jsEvent, view) {
alert(calEvent.title + "n" + calEvent.start.format('DD/MM/YYYY') + " to " + calEvent.end.format('DD/MM/YYYY'));
},
});
});
The commented out events definition works (when I use it) but the viewRender one does not. Before you ask viewRender does get triggered. I get no errors in the console and no events displayed. My script is not called at all. I know I have the dates hardcoded right now but I will use view.intervalStart and view.intervalEnd once I verify I get a similar result. Having $('#calendar').fullCalendar('renderEvents'); in there makes no difference, also toggling lazyFetching does not make a difference. Not a JS coder so I hope I'm just being silly somewhere.
in the event property you need to call the function
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay',
defaultAllDay: true,
},
lazyFetching: false,
defaultDate: '$today',
editable: false,
eventLimit: 10,
weekMode: 'liquid',
dayPopoverFormat: 'DD/MM/YYYY',
events: function(start, end, timezone, callback) {
$.ajax({
url: 'instant-tools.cgi',
data: {
events: 1,
pending: 1,
from: '2014-01-01',
to: '2016-12-31',
},
success: function(doc) {
var obj = jQuery.parseJSON(doc);
var events = [];
$.each(obj, function(index, value) {
events.push({
id: value['id'],
//all data
});
//console.log(value)
});
callback(events);
},
error: function(e, x, y) {
console.log(e);
console.log(x);
console.log(y);
}
});
},
eventClick: function(calEvent, jsEvent, view) {
alert(calEvent.title + "n" + calEvent.start.format('DD/MM/YYYY') + " to " + calEvent.end.format('DD/MM/YYYY'));
},
});
});