Is it possible to make only events which are allday selectable in fullcalendar?
I added
eventDrop: function (event, dayDelta, minuteDelta, allDay, revertFunc) {
if (event.allDay==false)
revertFunc();
},
which causes the event to snap back in place if it is not an allDay event. But is it possible to not make non-allday events not selectable at all?
You can use eventRender to disable the event if it not an allDay event. http://arshaw.com/fullcalendar/docs/event_rendering/eventRender/
eventRender: function(event, element) {
if(event.allDay == false) {
event.editable = false;
}
},
Related
How do I attach a handler to the navigation buttons in FullCalendar v4? There is nothing specified in the official documentation.
One way to get what you need is to hide the default prev and next buttons and replace with your own custom buttons, for which there are click callbacks.
Please see https://codepen.io/ormasoftchile/pen/NVJeez for a working example.
customButtons: {
customprev: {
text: '<',
click: function() {
alert('clicked custom button 1!');
calendar.prev();
}
},
customnext: {
text: '>',
click: function() {
alert('clicked custom button 2!');
calendar.next();
}
}
}
Regards, Cristian
The only build-in method is the events: fn () callback. From the docs
FullCalendar will call this function whenever it needs new event data.
This is triggered when the user clicks prev/next or switches views.
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'dayGrid' ],
defaultView: 'dayGridMonth',
events: function (info) {
console.log(info);
}
});
calendar.render();
});
Receiving a warning for "Attempting to call a FullCalendar method on an element with no calendar."
It happens when calling $('#calendar_' + calendarId).fullCalendar('clientEvents');
I do have multiple "FullCalendar" implementations on the same page. Would this effect anything?
EDIT
Here is how I am creating the FullCalendar. The above line is just referencing the events from the calendar with nothing special going on.
$('#calendar_' + id).fullCalendar({
dayClick: function(date, jsEvent, view) {
$('#calendar_' + id).fullCalendar('gotoDate', date);
$('#calendar_' + id).fullCalendar('changeView', 'agendaDay');
},
eventClick: function(calEvent, jsEvent, view) {
var newUrl = calEvent.url.replace("%26", "&");
window.location = newUrl;
return false;
},
header: {
left: 'month,agendaWeek,agendaDay',
center: 'title',
right: 'today prev,next'
},
select: function(start, end, allDay) {
var view = $('#calendar_' + id).fullCalendar('getView');
if (view.name == 'agendaDay') {
window.location.replace('/Create?start=' + start._d.toJSON() + '&end=' + end._d.toJSON() + '&isUTC=true&redirectToCalendar=true');
}
},
selectable: true,
selectHelper: true,
timezone: 'local',
viewRender: getEvents
});
EDIT 2
See the screen capture to show it working on this line that I have already discussed. I have 3 calendars on the page. The first works as expected with no warning. The second and third show a warning, but the events are retrieved.
Might be really simple, but when i drop the droppable event, i want to automatically click on it
$('#calendar').fullCalendar({ droppable: true, drop: function(date) { //the command go here! this.click or something like that } });
Try this:
eventDrop: function(event, delta, revertFunc) {
$(this).trigger('click');
},
eventClick: function(calEvent, jsEvent, view) {
console.log('event clicked');
}
https://jsfiddle.net/ewojadd3/
I'm trying to make the selected day in FullCalender.io highlighted (similarly to how the current day is).
Following FullCalendar - Highlight a particular day in week view I've tried the following, which basically re-renders the calendar on a click, and highlights the cell who's date matches the clicked date .
dayRender: function(date, cell)
{
var moment = $('#calendar').fullCalendar('getDate');
if (moment.get('date') == date.get('date'))
{
$(cell).addClass('fc-state-highlight');
}
else
{
$(cell).removeClass('fc-state-highlight');
}
},
dayClick: function (date, allDay, jsEvent, view) {
$('#calendar').fullCalendar('render');
},
But it's not doing anything. :-(
you can use this piece of code in v1.x
$('#calendar').fullCalendar({
dayClick: function (date, allDay, jsEvent, view) {
$(".fc-state-highlight").removeClass("fc-state-highlight");
$(jsEvent.target).addClass("fc-state-highlight");
}
});
v2.X
$('#calendar').fullCalendar({
dayClick: function (date, jsEvent, view) {
$(".fc-state-highlight").removeClass("fc-state-highlight");
$(jsEvent.target).addClass("fc-state-highlight");
}
});
CSS .fc-state-highlight {background:red;}
Note: this can be achived by other ways also by making use of data-date attribute of cell and date parameter of function dayClick
$('#calendar').fullCalendar({
dayClick: function (date, jsEvent, view) {
$(".fc-state-highlight").removeClass("fc-state-highlight");
$("td[data-date="+date.format('YYYY-MM-DD')+"]").addClass("fc-state-highlight");
}
});
Building on from the other answer, this will do what you need:
dayClick: function (date, jsEvent, view) {
$('.fc-day').each(function () {
$(this).removeClass("fc-state-highlight");
});
$("td[data-date=" + date.format() + "]").addClass("fc-state-highlight");
},
v2.X
$('#calendar').fullCalendar({
dayClick: function (date, jsEvent, view) {
$(".fc-state-highlight").removeClass("fc-state-highlight");
$(this).addClass("fc-state-highlight");
}
});
CSS .fc-state-highlight {background:red;}
One quick workaround is to use selectable:
var calendar = $('#calendar');
calendar.fullCalendar({
selectable: true
})
Even tough this option Allows a user to highlight multiple days or timeslots by clicking and dragging (source: https://fullcalendar.io/docs/selection/selectable/), it has the side effect of highlighting the selected day if you only click on one day.
I am trying to use this great UI "FullCalender" But what I want to do is send an ajax request to update the event data in the database when the user move the event around.
So If a user want to move an event to a different date in the calender then I need to be able to send the request to the database use ajax request.
How can I collect the new information so if the appointment was moved to a new date or a new time how can I obtain the new information so I can pass it along to the server?
More, what method do I use to send the same request if the user changes the time by expanding not by drag/drop event?
$(document).ready(function() {
$('#calendar').fullCalendar({
editable: true,
events: "json-events.php",
timeFormat: 'h:mm{ - h:mm}',
defaultView: 'agendaDay',
eventDrop: function(event, delta, minuteDelta, allDay, revertFunc) {
if (!confirm("Are you sure about this change?")) {
revertFunc();
}
// AJAX call goes here
$.ajax();
},
loading: function(bool) {
if (bool) $('#loading').show();
else $('#loading').hide();
}
});
});
Take a look at the parameters of the function: delta, minuteDelta and allDay. Those tell you how the event was modified in days, minutes and if it was moved to the allday slot. The event itself should hold an identifier so that you can identify it in your database.
I made me a helper function updateEventTimes which is simply called from eventDrop and eventResize with an extra boolean parameter.
The function looks roughly like this:
/*
* Sends a request to modify start/end date of an event to the server
*/
function updateEventTimes(drag, event, dayDelta, minuteDelta, allDay, revertFunc)
{
//console.log(event);
$.ajax({
url: "update.php",
type: "POST",
dataType: "json",
data: ({
id: event.id,
day: dayDelta,
min: minuteDelta,
allday: allDay,
drag: drag
}),
success: function(data, textStatus) {
if (!data)
{
revertFunc();
return;
}
calendar.fullCalendar('updateEvent', event);
},
error: function() {
revertFunc();
}
});
};
Since I found this topic now, I think information below will be helpful in future.
You could use JSON.stringify() method to generate JSON as send date.
But, small workaround need in this case: see Tip on serializing event in fullCalendar with JSON.stringify.
In short, you code should looks like:
/*
* Sends a request to modify start/end date of an event to the server
*/
function updateEventTimes(drag, event, dayDelta, minuteDelta, allDay, revertFunc)
{
delete event.source;
$.post(
"update.php",
event,
function(result) {
if (!result) revertFunc();
}
)
.fail(function() {
revertFunc();
});
};