We Keep Coding

renderEvent after selecting dates not working in Fullcalendar

I would like to add and render event by selection of dates range. select() is correctly fired, but there is error calendar.fullCalendar is not a function on the last line. I googled a lot but did not find any working solution.
I use FullCalendar v4 in timeline-view.
var calendar = null;
document.addEventListener('DOMContentLoaded', function() {
calendar = new FullCalendar.Calendar(document.getElementById('preview'), {
editable: true,
eventResizableFromStart: true,
eventResourceEditable: true,
selectable: true,
...
select: function(selectionInfo) {
var event = new Object();
event.title = 'title';
event.start = selectionInfo.start;
event.end = selectionInfo.end;
event.resourceId = selectionInfo.resource.id;
calendar.fullCalendar('renderEvent', event); // console says 'calendar.fullCalendar is not a function'
//$('#preview').fullCalendar('renderEvent', event); // I also tried this, but the same error as above
}
});
});

calendar.fullCalendar('renderEvent', event);
...I guess you copied this from somewhere? Because this is fullCalendar version 3 syntax. for version 4 you would write
calendar.addEvent(event);
See https://fullcalendar.io/docs/Calendar-addEvent for documentation. Always check that the examples you find apply to the correct version of the software.

fullcalendar: display all events of a specific day when hovering his daycell

I'm developing a Calendar application via fullcalendar.
I'm currently working on a mini sized calendar. The mini calendar will not display the events.
I'm trying to use tooltip instead. so when the user will mouseover a specific daycell - all the events of the specific daycell will be displayed via tooltip. (this is my issue)
I been working on this issue for almost two days now.
unfortunately, full calendar only offers "eventMouseover". (no dayMouseover available).
Also, using $(".fc-day").hover is not really the best way to go because it is working only when hovering the bottom of the cell.
there is no documentation for this on the web so far.
Anybody knows which is the best way to Tackle an issue?
here is my code so far:
$("#miniCalendar").fullCalendar({
defaultDate: currentDate,
viewRender: function (view, element)
{
monthStart = view.intervalStart.format("YYYY-MM-DD");
monthEnd = view.intervalEnd.subtract(1, "days");
monthEnd = view.intervalEnd.format("YYYY-MM-DD");
mStart = view.intervalStart.format("M");
yStart = view.intervalStart.format("YYYY");
},
events: function (start, end, timezone, callback) { //custom events function to be called every time the view changes
$.ajax({
url: getMonthDataUrl,
type: "post",
data: {
startDate: monthStart,
endDate: monthEnd,
custom_config: Config
},
error: function () {
//alert("there was an error while fetching events!");
},
success: function (data) {
calendarData = data;
console.log(calendarData);
thingsToDoAfterWeLoadCalendarData(calendarData);
callback(eventsJsonArray); //pass the event data to fullCalendar via the supplied callback function
}
});
},
fixedWeekCount: false,
dayRender:
function (date, cell) {
//the events are loaded vie eventAfterAllRender function
//eventAfterAllRender takes time to load. so we need dayRender function in order to give the calendar default colors until the real colors are loaded
// the default colors spouse to look like the correct colors. this is needed for a better looking calendar while loading new events
if (!cell.hasClass("fc-other-month")) {
//that means this is a cell of this current month (becuase only cells that belong to other month have the "fc-other-month" class
var weekDay = date.format("dddd");
if (weekDay == "Saturday" || weekDay == "Friday") {
cell.css("background-color", "#edf5f9");
} else{
//regular days
cell.css("background-color", "#f7fafc");
}
} else{
//cells that belong to the other months
$(".fc-other-month").css("background-color", "#ffffff");
}
},
eventAfterAllRender:
(function(view, event, element) {
let viewDisplay = $("#miniCalendar").fullCalendar("getView");
if (viewDisplay.name == "month") { //checking if this the month view. this is needed for better display of the week\day view (if we ever want to use it)
$(".fc-day:not(.fc-other-month)").each(function(index, element) {
//loop through each current month day cell
$(this).empty(); //removing old icons in case they are displayed
let cellDate = moment($(this).data("date")).format("YYYY-M-D"); // "YYYY-M-D" date format is the key in the json_backgrundColorBigCalendar array
$(this).css("background-color", json_backgrundColorBigCalendar[cellDate]); //set the background colour of the cell from the json_backgrundColorBigCalendar array.
});
}
$(".fc-other-month").css("background-color", "#ffffff"); //days that belong to other month gets a color background that will show this days are irrelevant
}),
dayClick: function(date, jsEvent, view) {
window.location = fullCalendarUrl;
},
});

I dont really know if there is a "fullcalendar-way" doing this, but why can't you use your hover event listener and just also let it listen on fc-day-top hover?
$(".fc-day, .fc-day-top").hover(function(e) {
console.log($(e.currentTarget).data("date"));
});
This will also work if you hover the top of a day cell.
Update:
To get the events on hover use this:
var $calendar = $("#calendar");
$(".fc-day, .fc-day-top").hover(function(e) {
var date = moment.utc($(e.currentTarget).data("date"));
var events = $calendar.fullCalendar("clientEvents", function(event) { return event.start.startOf("day").isSame(date); });
console.log(events);
});
(Tested on the calendar on the fullcalendar main site).
Of course you have to change the jQuery selector of the calendar (#calendar) as it is in your code.

I've never seen full calendar before, but if I understand correctly you want to bind a hover function to custom days of the calendar. Is that correct?
If so you can simply select days of the calendar with their "data-date" attribute. So something like the code below would let you specify a hover function for a desired day:
$("[data-date='2017-10-10']").hover(function(e) {
console.log("You moused over 10/10/2017!");
});

FullCalendar does not unselect previous selection

I've been working with FullCalendar lately for a reservation system.
The problem is that whenever I select a time range it all adds to the eventData object. What I am trying to do is select one time range only.
When I click the $('#btn-reserve') button it should render the event on the calendar.
What's happening is that even my previous selections are getting rendered on the calendar. I only want to render the last selection I made.
here is my code
$('.calendar').fullCalendar({
selectable: true,
select: function(start, end) {
$('#end_time').val(end);
$('#start_time').val(start);
$('#newScheduleModal').modal({
show : true,
backdrop: 'static',
keyboard: false
});
$('#btn-reserve').click(function(){
eventData = {
title: 'Lesson Schedule',
start: start,
end: end
};
$('.calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
$('#newScheduleModal').modal('hide');
});
$('#btn-cancel-reserve').click(function(){
$('.calendar').fullCalendar('unselect');
eventData = {};
})
},
})

You are adding a new click event every time the calendar is selected. You need to unbind the click before adding it like so:
$('#btn-reserve').off('click').click(function
You might want to do the same for your "#btn-cancel-reserve" element.

how to update event start in fullCalendar

I am trying to update my db with the updated start date of an event I drag to a new day. I have a save button that runs the 'clientEvents' method to return all events to insert/update to the db. My problem is returning the correct event start date when an event that has been dragged to a new day.
I am doing this so far to update the event data:
$('#calendar').fullCalendar({
eventDrop: function(event, delta, element) {
event.title = "NEW TITLE!";
event.start = event.start.format();
event.color = "blue";
console.log(event.start.format());
console.log(event.start);
console.log(event.start._i);
console.log(event.title);
console.log(event.color);
$('#calendar').fullCalendar('updateEvent', event); //update the event data
}
})
and my function to return all the events:
function saveEvents() {
//get events array
var events = $('#calendar').fullCalendar('clientEvents');
console.log(events);
}
However, using this code, the title and color update fine but the start date will not update. Using console.log, the new title and color return correctly, but the start date is the original date, not the new date the event was dragged to. The same for the event data returned in my saveEvents function: the new title and color are correct, but not the start date.
The strange thing is, in the 3 ways I log the event.start, only the event.start.format() shows the correct new date. How do I get the new date saved so when a call 'clientEvents', the correct new data is returned?

Could you explain what you mean by "original date" compared to what should be the "new date" ? Because you don't seem to update your start date as you only modify its format.

Create a moment copy of start, format it and attach to new event. Put your ajax call in the eventDrop callback in initialization of fullCalendar. Example solution using php and mysql:
$('#calendar').fullCalendar({
eventDrop: function(event, delta, element) {
var event_format = event;
event_format.start = moment(event.start).format();
$.ajax({
url : "script.php",
data : event=JSON.stringify(event_format),
type : "POST"
});
}
})
php:
<?php
$event = json_decode($_POST['event']);
$query = "UPDATE x SET start = '$event->start'";
mysql_query($query) or die ($query);
?>
Doing the same for the enddate would be a good idea :)

2 Bootstrap Datepickers: How to change min and max dates?

I have 2 datepickers on my webpage: One for the arrival date and the other for departure.
Now I'd like to set the min and max dates, according to the user selection.
2 Examples of what I want to achieve:
User selects 29.03.2015 as arrival -> departure's min date is set
accordingly.
User selects 29.03.2015 as departure -> arrival's max
date is set accordingly.
At the moment I am initializing the datepickers like so:
var startDate = "<?php echo date('d.m.Y'); ?>"; // Today
$('#startDate.input-group.date').datepicker({
format: "dd.mm.yyyy",
language: "de",
multidate: false,
todayHighlight: true,
startDate: startDate,
weekStart: 1
}).on('changeDate', function(e){
changeDate(e);
});
$('#endDate.input-group.date').datepicker({
format: "dd.mm.yyyy",
language: "de",
multidate: false,
todayHighlight: true,
startDate: startDate,
weekStart: 1
});
You notice the .on() function on the first datepicker. This is my current attempt to set the date of the 2nd one:
function changeDate(e){
$('#endDate.input-group.date').datepicker('setStartDate', e);
}
However this leaves me with the following error:
Uncaught TypeError: undefined is not a function: bootstrap-datepicker.js:1493
The line in question is this:
parts = date.match(/([\-+]\d+)([dmwy])/g)
Can you please give me a hint on what I am doing wrong and on how I can achieve said effect?

if you console.log changing like this:
.on('changeDate', function(e){
console.log(e);
});
you'll see the event returns an event object;
you should try passing something like e.date (but be sure to format the string accordingly to your startDate format).
Here's more about the extra data attached to the event object : http://bootstrap-datepicker.readthedocs.org/en/latest/events.html