I'm trying to disable Fullcalendar's default functionality when you click on a day (in agendaWeek view). If I leave dayClick: out entirely, it still pops up a dialog asking for an event name, and whether you enter one or hit Cancel, it still adds an event. I'd rather it did nothing at all. Thanks!
I had a similar question. You have to change the test to the view you want. Something like this.
if($('#calendar').fullCalendar('getView').type != 'agendaWeek') {
}
Related
Um using fullcalendar.io javascript library to render a Calendar on my app.
Im using the callback select to create events on my calendar. My code is like this:
calendar.fullCalendar({
header: {
left: "prev",
center: "title",
right: "next"
},
select: function(start, end) {
var now = new Date();
if(start > now){
}
The problem here is: The event is rendered on the calendar. It is not added to the events, but shows the selection on the screen. It disappears when I call another selection (because of course it isnt on the event list)
But I dont want it to be rendered. I tried to override the eventRender: function, but it still being rendered (probably because the library itself calls the render).
So, how can I not permit that the user select past dates on fullcalendar.io js library?
You said
"The event is rendered on the calendar. It is not added to the events,
but shows the selection on the screen".
I think you've misunderstood what's happening. What you see is not an event, it's merely some graphics showing the selection the user made. It's left on the screen until the user selects something else, or you until you remove it yourself. This is detailed in the documentation here. You can remove it yourself by calling the unselect method.
calendar.fullCalendar("unselect");
You can put that inside your "select" callback when you have decided that the event cannot be added to the calendar.
eventRender has no effect because it's not an event.
Hi I have this current JS for fullCalendar (v 1.6.4):
eventRender: function(event, element, view) {
element.find('.fc-event-inner').attr("id", "event-" + event.id_event);
},
eventClick: function(calEvent, jsEvent, view) {
alert("Event clicked: "+calEvent);
}
This works ok if I click on an event.
I than have this button:
$('#ext-click').click(function(){
$('#event-120.fc-event-inner').trigger('click');
})
(Note: #event-120 is a correct id for the event)
Now, when clicking on #ext-event button nothing happens, BUT, if I click on the event-120 I get the alert, I close the alert and I press #ext-event this time the alert appears.
So #ext-event works only if I first click on event-120, otherwise nothing happens.
Expectancy:
When clicking on #ext-event I should get the event-120 alert every time.
Try this fiddle: https://jsfiddle.net/hs0q6r3v/1/
You will see by clicking the "Click-me" button as first thing, nothing happens. Click then on the event, you'll get an alert, close it and click on the "Click-me" button again, this time it works.
I'd recommend to rethink this user experience approach by triggering a click by button. What's the reason for that? If you want to do a select then use the fullcalendar select method, etc.
Why it's probably not working:
A fullcalendar event is different from a with the id of a fullcalendar id. That might be the reason why the order of clicking is important cause there is a listener generated for this div showing this event. But you can't rely on that the internal Id of an event will always be reflected in the DOM.
e.g. In the latest fullcalendar release the fullcalendar event_id is not used for the id of the related
Approaches for dealing with page change:
I use both approaches in my applications
New Page
calendarview has optional parameter
pass "selected_id" to the new page
when leaving "new_page" pass back "selected_id"
when calendarview receives a "selected_id" deal with it in the "eventRender" method (e.g. special styling for highlighting, ...)
Modal Dialog
if convenient you can also use a modal dialog, so the calendarview will stay the same.
Firstly, here is a JsFiddle: http://jsfiddle.net/VTv2j/76/
This is what I want to happen:
Switch starts in the indeterminate / in-between state (this works)
Event fires when user chooses either state (this works)
When use clicks RESET the switch goes back to the indeterminate / in-between state (this works)
Event fires when user chooses either state (this DOES NOT work)
What is happening is if the user goes back to whatever the previous state was then no event fires. So say it was on YES, they click RESET, then click YES again - no event fires (but if it was previously on YES, and the reset then went to NO then the event would fire).
I've got no idea how to approach this. I've tried things like destroying and recreating the switch:
$('input[name=test]').bootstrapSwitch('destroy');
$('input[name=test]').bootstrapSwitch();
To no avail unfortunately.
Here is the important thing for me - all I need to know is when the user moves from the indeterminate state to ANY state. I don't actually care what they choose, as long as they choose something. So if anyone can think of a different type of workaround with that in mind (maybe it makes it easier) that would definitely be welcome.
Any help is appreciated, this is driving me crazy.
Here's a working version of the code above: http://jsfiddle.net/byzwng4t/1/
function initializeSwitch(selector) {
$(selector).bootstrapSwitch('destroy', true);
$(selector).bootstrapSwitch({
'state': null
});
$(selector).on('switchChange.bootstrapSwitch', function(event, state) {
console.log('change event' + (new Date()).getTime());
});
}
$(function() {
initializeSwitch('input[name=test]');
$('.reset').click(function() {
initializeSwitch('input[name=test]');
});
});
The trick is to bind the events again after destroying the switch.
$('input[name=test]').bootstrapSwitch('state', $('input[name=test]').is(':checked'), true);
Refer: http://bootstrapswitch.site/methods.html
Stackoverflow: Bootstrap Switch - Change state after clicking on button
Scenario:
I have a RadCombobox and I have attached functions to most of the events.
One event of the combobox is OnClientBlur and I am using this to check whether value in Combo is "Unassigned" or not. If it is "Unassigned" I need to cancel the onblur event and keep the focus on to the same combo.
This is the javascript which I has been used to cancel the event.
if (sender.get_text() === "Unassigned") {
eventArgs.get_domEvent().preventDefault();
return false;
}
Problem:
When the user tabs out first time of the ComboBox the event gets cancelled and the focus stays on the same combo box (in this case it is the 3rd Combo).
But when the user hits the tab button again the focus moves to the next control.
When I debugged the code I found that when the user first hits the tab button, following line works
eventArgs.get_domEvent().preventDefault();
I can see the preventDefault function, see following snapshot.
but when the user hits the tab button again I get an error and cannot see preventDefault function, see following snapshot
I am not able to understand what is going wrong here. Anyhelp would be appreciated.
Your problem, revolves around the difference between MouseEvents and KeyEvents. And also the way Telerik implement the OnClientBlur event. As far as it doesn't point to a specific type of browser event, each time it gets triggered
As you see in the first snapshot you got clientX and clientY, which means your OnClientBlur derived from a MouseEvent.
Whereas in the second one you got altKey, altLeft, and also there is no button property, which means that this one is a KeyEvent.
The other point here is as you have these fields in the output:
e.bookmarks
e.behaviorPart
e.behaviorCookie
Means you are using one of the old versions of IE4+ to IE7 or IE8, which they have cancelBubble instead of preventDefault.
Sometimes events are not cancelable, and using event.cancelable you can make sure if the current event is cancelable or not.
At the end to fix you code you can simply do this:
if (sender.get_text() === "Unassigned") {
var domEvent = eventArgs.get_domEvent();
if(domEvent.cancelable){
if(typeof(domEvent.preventDefault)==="function")
domEvent.preventDefault();
else
domEvent.cancelBubble = true;
return false;
}
else{
//you can not cancel the event, do something else to make it manageable
}
}
I want to click a <select> but stop it to show his dropdown list
$('select').click(function(){
if ($(this).find('option').size() > 20) {
// some code to do my job
return false;
}
});
The code return false can stop dropdown list display in Firefox(actually, the dropdown list display first and hide after a short while), but not work in Chrome.
I also tried let the <select> to be disabled, trigger blur() on it, or trigger click() on other element, but the dropdown list is still there unless user click somewhere else.
Is this possible? ... and Thanks!
Long story is here (if you have interested in why I want to do that):
As you know, sometimes there will be a <select> with too many
<option> in it, and when you click it, there will be a long dropdown
list. Find what you need in a long dropdown list is a terrible job...
But unfortunately there is a lot in my site.
So I think the simplest way is to write some javascript to change
that, when option is more than 20, show a dialog with a filter and a
new <select> which only have filtered <option> to let find easy.
And my problem is the dropdown list is still display, make my users
confused... They don't know where to operate. "the dialog or the
origin select".
The problem is that the default action of a select element occurs on the mousedown event, rather than click (or mouseup), so you'll need to bind an event handler to mousedown instead:
$("select").mousedown(function(e) {
if ($(this).find('option').length > 20) {
e.preventDefault(); //return false will also work
}
});
Here's a working example. Note that I've used the preventDefault method of the event object, simply because I think that makes it clearer what's actually happening. However, return false will work too.
I wanted to disable all form controls (with the 'form_control' class) in a table (id 'details_table'), including selects, and point users to an 'edit' button that opens a modal. A small tweak to the previous answers seemed to work in both Firefox and Chrome on Linux. Not tested in other browsers yet.
$('#details_table').on('mousedown', '.form-control', function(e) {
alert("Please click on the Edit button to modify details.");
e.preventDefault();
this.blur();
});