Is it possible to make a mouseover event only on days that come after the actual day in FullCalendar?
If yes, how could I do that?
I just want to show the cursor "pointer" over the cells of the days after today...
The table cell (td element) for today has the class 'fc-today'. You need to run some jQuery to set the css on all the tds after this in the table. This can be done by putting this code in a function and assigning it to the option 'viewDisplay' on initialising the fullCalendar. I think this jQuery code should do it:
$('#calendar').fullCalendar({
...,
viewDisplay: function (view) {
if (view.start > new Date())
$('.fc-view').find('td').css('cursor', 'pointer');
else if (view.end < new Date())
$('.fc-view').find('td').css('cursor', 'auto');
else {
$('.fc-view').find('td').css('cursor', 'auto');
$('.fc-today').nextAll('td').css('cursor', 'pointer');
$('.fc-today').closest('tr').nextAll('tr').find('td').css('cursor', 'pointer');
}
},
...
});
Related
I've tried and just can't seem to get it to work.
Fwiw, everything else in fullCalendar I've succeeded with.
I'm trying to get valid Range to give me a range of the current month and the next month. Their docs mention:
validRange: function(nowDate) {
return {
start: nowDate,
end: nowDate.clone().add(2, 'months')
};
},
I've also tried adding javascript code before the document.addEventListener('DOMContentLoaded', function() { line, to no avail.
Can you help?
Edit: I am not using jQuery
While using the Scheduler's Resource view the user found it hard to understand the hovering time.
Adding this below $('#calendar').fullCalendar( ... );
$(".fc-slats tr").each(function () {
$(this).addClass("timerow");
});
and CSS
.timerow:hover {background: lightblue;}
PROBLEM: When user pressed next or prev buttons the calendar rendered again the table and the .hover did not work.
adding the code also in the viewRender in Calendar's properties solved it.
viewRender: function (view, element) {
$(".fc-slats tr").each(function () {
$(this).addClass("timerow"); });
},
The final result is shown in the image below:
resource1
resource2
Is it possible to specify callback functions for Ok and Close button?
In case of JQuery Modal one could specify the callback functions at the time of initialization using the buttons dictionary. Does Semantic-ui modeal provide for something similar? How do i go for additional logic and close the model after Ok is pressed?
add a .approve class (or alternative. see http://semantic-ui.com/modules/modal.html#/settings to your 'OK' button to trigger the onApprove callback.
.close class for your Close button.
I have only be using semantic-ui for 2 weeks (and modals for a few hours) so caution required. Thanks mike123 for your answer.
$('.ui.modal.myModal').modal({
onHide: function(){
console.log('hidden');
},
onShow: function(){
console.log('shown');
},
onApprove: function() {
console.log('Approve');
return validateModal()
}
}).modal('show');
Is this what you are after:
$('.selector').modal({
onHide: function(){
console.log('hidden');
},
onShow: function(){
console.log('shown');
}
}).modal('show');
I have FullCalendar installed and working great, pulling in courses from my database.
You can view different courses based on clicking a button that submits the page again but passes different criteria.
The Issue is that on reloading of the page and the new content it skips back to the current date which is rather annoying when when you are looking at courses 3 months into the future!!
Does anybody know how to make the calendar go back to the page you where on after you have refreshed the page???
I have a feeling it might be something to do with getdate as I got the following code to work but can't seem to pass the result back through the URL and into the calendar setup.
$('#my-button').click(function() {
var d = $('#calendar').fullCalendar('getDate');
alert("The current date of the calendar is " + d);
});
If you use jquery.cookie you can store the currently viewed date in a cookie for the page being viewed and use that value to set the defaultDate when the page reloads. Pass these in as options when you initialise your calendar:
defaultView: Cookies.get('fullCalendarCurrentView') || 'month',
defaultDate: Cookies.get('fullCalendarCurrentDate') || null,
viewRender: function(view) {
Cookies.set('fullCalendarCurrentView', view.name, {path: ''});
Cookies.set('fullCalendarCurrentDate', view.intervalStart.format(), {path: ''});
}
This code also saves the current view (e.g. month, day etc...)
I used a combination of the two above. I set the localStorage value for the start date when creating, moving, or resizing an event as well as viewRender and then assigned that value to the defaultDate.
defaultDate: localStorage.getItem('Default_FullCalendar_Date'),
viewRender: function(view) {
localStorage.setItem('Default_FullCalendar_View', view.name);
...
},
select: function(start, due){
localStorage.setItem('Default_FullCalendar_View', start);
...
},
eventDrop: function(event, delta, revertFunc, jsEvent, ui, view){
localStorage.setItem('Default_FullCalendar_View', event._start._d);
...
},
eventResize: function(event, delta, revertFunc, jsEvent, ui, view){
localStorage.setItem('Default_FullCalendar_View', event._start._d);
...
}
Works like a charm.
You can use gotoDate method:
var d = $('#calendar').fullCalendar('getDate');
$('#calencar').fullCalendar( 'gotoDate', d.getFullYear(), d.getMonth(), d.getDate() )
Here is an updated answer for version 4 and 5 of fullcalendar.
since viewRender is no longer an option in these versions. I came up with a different approach using the loading option.
The loading option will give you a boolean argument stating whether the calendar is done loading or not. Inside that function I check if the calendar is done loading and if so, I set the calendar date to localStorage. Next I created an if else statement before the fullcalendar object to check if the localstorage item exists, and if so I set the defaultDate option in the calendar object to to localStorage date; if not, I just set it to today's date.
Example:
let viewDate;
const savedDate = localStorage.getItem("calDate");
if (savedDate !== null) {
viewDate = new Date(savedDate);
} else {
viewDate = today();
}
const calendarElement = document.getElementById('your_calendar');
const calendar = new FullCalendar.Calendar(calendarElement, {
defaultDate: viewDate,
loading: function(stillLoading) {
if (stillLoading === false) {
// When Calendar is done loading....
localStorage.setItem("calDate", calendar.getDate());
}
},
});
I use jQuery fullCalendar (http://arshaw.com/fullcalendar/docs/selection/unselectAuto/)
I use Selectable version of this calendar (http://arshaw.com/js/fullcalendar/demos/selectable.html)
It's working fine however I want to cancel/delete my old selections if I continue selecting new dates.
Lets say I chose 1 Jan and gave a title to it.
When I try to select 2 Jan, I want to see only 2 Jan selection.
I thought unselectAuto is for this but I couldnt manage to make it work :(
Any ideas?
I used unselectAuto right under
selectable: true,
unselectAuto: true,
First it's still necessary to use the $('#yourCalendar').fullCalendar('unselect'); function.
The second thing that I needed to do, was to specify how the unselect callback was going to behave (when setting up the fullcalendar options). For me I had to unbind the submit button from my form
unselect: function(){
$('#submitButton').unbind();
},
It worked great!
I was able to reach this conclusion after reading this post "multiple events created"
u can try this way, this works for me :)
var liveDate = new Date(); // current Date
var calendar = $('#calendar').fullCalendar({
select: function (startDate, endDate) {
if (liveDate > startDate) {
alert('Selected date has been passed');
return false;
} else {
//do your wish
}
calendar.fullCalendar('unselect');
}
});
Had the same problem but my user was interfacing directly with the calendar and multiple events were being generated. ie. not through a form with a button and therefore nothing to "unbind" as many of the previous solutions.
To only allow one selection and to clear previous submissions I changed the select function as follows:
select: function(start, end) {
var title = "Desired Booking";
var eventData;
eventData = {
title: title,
start: start,
end: end
};
$('#calendar').fullCalendar('renderEvent', eventData, true); },
select: function(start, end) {
$('#calendar').fullCalendar('removeEvents');
$('#calendar').fullCalendar('rerenderEvents')
var title = "Desired Booking";
var eventData;
eventData = {
title: title,
start: start,
end: end
};
$('#calendar').fullCalendar('renderEvent', eventData, true); },
This did the trick for me.
I had problems with unselectAuto also. Sometimes it would unselect when I didn't want it to, and sometimes it would NOT unselect when I DID want it to. My solution was to manually trigger the unselect method.
Here's how to unselect all currently selected:
$('#yourCalendar').fullCalendar('unselect');
You can put this line of code inside custom jQuery events that you bind outside of the plugin. You can also include it in fullCalendar callbacks, etc...
Hope this helps.
Scott
Here is an exemple of Version 5 doing the unselect
You could do it by :
const calendarApi = selectInfo.view.calendar;
calendarApi.unselect(); // clear date selection
Use this code
$('#trainings_modal').on('hidden', function () {
$('#trainings_modal *').unbind(); // Unbind all events
});
Unbind on hide form with any method (i.e esc press, or out key)