I have a calendar with drag functionality where a user can drag events to quickly update them.
After Dragging an event I ask the user if he wants to save it and then call a UpdatEvent function.
However, before the user confirms, (just as the dialog appears) the event automatically reverts back and only return to the updated position if I confirm in the dialog.
Is there a way for the event to stay in the dragged position and then either revert back or stay in the actual one?
My eventDrop looks like this:
eventDrop: function (event, delta, revertFunc) {
if (confirm("Do you wish to save the event?")) {
UpdateEvent(event.id, event.start);
}
else {
revertFunc();
}
}
At the beginning of the Eventdrop and/or Eventresize place the following:
$('#calendar').fullCalendar('updateEvent', event);
Related
What is the way to catch anytime a view is rendered?
Not only when switching views, but also when clicking today / prev / next?
I need to clear an array of unique event titles after (or before) each render is complete.
So, similar to eventAllRender which was removed starting v4.
Currently using .click event for all buttons, which does the trick, but I was hoping there was something really linked to the actual rendering.
calendar.render();
$('.fc-button').click( () => {
console.log("do something")
})
https://fullcalendar.io/docs/datesSet
Called after the calendar’s date range has been initially set or
changed in some way and the DOM has been updated.
datesSet: function(info) {
// ...
}
I am using Aframe 0.7.0. and it working great! My application has camera with cursor and the raycaster intersect with entities.
I want to disable click event that is emitted by intersection of cursor and any entity, but at same time I want other events to work just fine, like mouseenter, etc.
How can I achieve this? Please let me know if I am missing any information required for this question.
Thanks
If i'm correct about Your idea, You should be able to do something like this.
Activate clicking on stuff using the addEventListener("click", handler)
Deactivate clicking on stuff using the removeEventListener("click", handler)
Having those in Your component,
AFRAME.registerComponent("foo", {
addListeners: function() {
this.el.addEventListener("click", this.handler);
},
removeListeners: function() {
this.el.removeEventListener("click", this.handler);
},
handler: function() {
// whatever response from clicking
}
});
You can enable clicking by using el.components.foo.addListeners and disable using el.components.foo.removeListeners from any other method.
Check out my example here. right box enables, disables the click event on the left one. Check it out in the console.
I am using FullCalendar in my project. I used background events, rendering="background". How can I detect if user click on the background events? I try this but it doesnot work since all dates cannot be clicked.
dayClick: function (start, end, allDay, jsEvent, view,color,calEvent) {
if (calevent.rendering==="background") {
alert('Click Background Event Area');
}
else{
$('#modal1').modal('show');
}
if (start.isBefore(moment())) {
$('#calendar').fullCalendar('unselect');
return false;
}
},
Since fullCalendar doesn't expose an "click" type event on background events, the only way I can think of to do this is essentially a DIY approach. The basic idea:
Handle the "select" event
Fetch all the events currently in fullCalenar's memory, using the "clientEvents" method.
Loop through them all and check whether any of them are background events, and if so, whether they overlap with the selected time period. If they do, then that's the event that was clicked on.
I haven't tested this, but it's based on some old code I found, so hopefully you get the idea:
select: function(start, end, jsEvent, view) {
var cal = $("#calendar"); //put the ID of your calendar element here
var evts = cal.fullCalendar('clientEvents'); //get all in-memory events
var selectedEvent = null;
for (i in evts) {
if (evts[i].rendering == "background" && start.isBefore(evts[i].end) && end.isAfter(evts[i].start)) {
selectedEvent = evts[i];
}
}
}
The only flaw in this is that "select" allows selection of a time period, not just a single click, so it could be that the selection is overlapping the background event, and not wholly contained within it. You might be able to adjust the logic a little bit if that doesn't suit you - e.g. to require that both start and end are within the event's boundaries.
I took the JQuery UI dialog form sample from JQuery UI website.
Since I wanted that, once the dialog is opened and the form is displayed, that pressing the key submits the form, I added the following in the onReady() :
$.extend($.ui.dialog.prototype.options, {
open: function() {
var $this = $(this);
// focus first button and bind enter to it
$this.parent().find('.ui-dialog-buttonpane button:first').focus();
$this.keypress(function(e) {
if( e.keyCode == 13 ) {
$this.parent().find('.ui-dialog-buttonpane button:first').click();
return false;
}
});
}
});
This does perfectly the trick (I mean the click() is triggered when it has to), but the following occurs :
When the form is first submited through a press on the key, the submission is performed once.
If I reopen the dialog, and submit it again with a press on the key, the form is submitted twice.
If I reopen the dialog, and submit it again with a press on the key, the form is submitted three times, and so on...
This can be tested with the following fiddle :
http://jsfiddle.net/fWW2E/
Let me add that doing so by clicking on the dedicated "Submit" button works properly, this fails only when pressing the key is involved.
Any ideas ?
Thank you !
Because since you're assigning this on "open" and your buttons are "closing" the dialog.
When this gets called though:
$('something').dialog('close');
doesn't actually remove the element, it just hides it. So the next time you click to open up a "new" dialog, you're really just showing the first one again. However the "open" event is getting fired again every time it's opened, which is adding a new keypress handler onto it.
Here's the fiddle. I actually write out to the console an array of the current handlers on that element. You'll see everytime you open the dialog that there is another keypress handler.
DEMO
On page I have fullcalendar, variable which determines how to display now (all events or events with filter), button for changing variable value and function which applies filter.
Variable (true - show all events, false - with filter):
var isShownWithCancelEvents = true;
Button and it's click function:
$('.fc-header-left').append('<span class="fc-button fc-button-show-with-canceled-events fc-state-default"><span class="fc-button-inner"><span id="show_without_canceled_events" class="fc-button-content">Show with filter</span><span class="fc-button-effect"><span></span></span></span>');
$(".fc-button-show-with-canceled-events").click(function() {
isShownWithCancelEvents = !isShownWithCancelEvents;
prepareEvents();
});
Function prepareEvents():
function prepareEvents(){
if (isShownWithCancelEvents) {
$('#calendar').fullCalendar('refetchEvents');
$(".fc-button-show-with-canceled-events .fc-button-content ").text("Show with filter");
}
else {
$('#calendar').fullCalendar ( 'removeEvents', filter );
$(".fc-button-show-with-canceled-events .fc-button-content ").text("Show all events");
}
}
Filter function:
function filter(event) {
return (event.ec_e_id !== null);
}
Also in fullcalendar I use option:
viewDisplay: function(view) {
prepareEvents();
},
Button is working, problem is with fullcalendar option.
Default view on page is agendaWeek. I open page and click button, variable's value changes to false, filter applies. It's OK. Then I click button "Month" and view changes to month. And I see all events. Then I click button "Week" and view changes to agendaWeek - events are filtered. I click button "Month" again - on this view events are filtered too. So, the problem is when first time changing view to another.
I open page and click button, variable's value changes to false, filter applies. It's OK. Then I navigate left or right (next or previous week), and I see all events. Then I return back, where events were filtered and see all events there.
If I add alert into fullcalendar option
viewDisplay: function(view) {
alert("something");
prepareEvents();
},
everything is OK, and filter works every time.