Develop Reference

How to prevent highlight (gray background) of an external event in fullcalendar

I already have start and end time for an external event but is there any correct way to set the end time on highlight (gray background) of the same external event.
Or if there is no way to set the end time on highlight then can we remove the fc-highlight completely from external/draggable events.
By the way, I already asked this question but didn't get correct response, so that's why I'm asking again
For more detail, please visit my another question here: Disable highlight of an external event in fullcalendar

Starting from your CodePen...
I managed to customise the draggable event in order to have a defined duration to be used as time calculation.
I added data-duration-hour and data-duration-minute attributes to the draggable event.
Those "data" attributes ares used to determine the ending time of the event, on drop.
NOW about the hightlight which occurs on drag (before drop) in the calendar...
It still hightlights 2 hours.
You'll have to to look at a function to add on drag in fullCalendar options.
I have no idea for the moment.
So... I may not have answered the right question (about the hightlight effect on drag).
But this is still an improvement for your project.
See in this CodePen
HTML modified:
<div class='fc-event' data-duration-hour="3" data-duration-minute="30">My Event 1</div>
JS modified:
function external_event_dropped(date, external_event) {
var event_object;
var copied_event_object;
var tempDate = new Date(date);
event_object = $(external_event).data('eventObject');
copied_event_object = $.extend({}, event_object);
copied_event_object.start = date;
// This is the dropped date object
console.log(date);
// This is the drop time in clear.
console.log( "dropped at: "+date.hour()+":"+date.minute() );
// Retreive the data-duration from the dragged element.
var durationHour = parseInt(external_event.data("duration-hour"));
var durationMinute = parseInt(external_event.data("duration-minute"));
console.log("DATA: "+durationHour+":"+durationMinute);
// Clone the time object to modify it in order to create de end time.
var dateEnd = date.clone();
dateEnd = dateEnd.hour(dateEnd.hour()+durationHour);
dateEnd = dateEnd.minute(dateEnd.minute()+durationMinute);
// This is the end time object.
console.log(dateEnd);
// This is the drop end time in clear.
console.log( "dropped at: "+dateEnd.hour()+":"+dateEnd.minute() );
// Now set it to the FullCalendar object.
copied_event_object.end = dateEnd;
copied_event_object.allDay = false;
copied_event_object.title = 'ADEEL';
external_event.remove();
$('#exampleCalendar').fullCalendar('renderEvent', copied_event_object, true);
}

For the complete solution check this out: Fullcalendar
External/Draggable Events Highlight
Effect
Well after reading the fullcalendar documentation and spent a lot of time on this issue, I come up with a solution and I hope it might help others as well.
So, the solution is:
I've added an option defaultTimedEventDuration which is a default duration of an external/draggable event, if there is no duration set on event.
e.g: defaultTimedEventDuration: '01:00:00'
Also added data-duration in html to get dynamic duration and highlighted effect.
e.g: <div class='fc-event' data-duration='03:00'>My Event 1</div>
N.B: Also possibility to set duration attribute in js data

Prevent deselect date (Bootstrap-datepicker sandbox)

I have a question about the bootstrap-datepicker.
When I select a random Date and then open the Popup again and click the same Date, the Input-Field clears. Is there any way to prevent this from happening?
I need this because in my case the Input-Field is not allowed to be empty.

I use Angular, and have a directive defined that inserts this little snip of hacky javascript... you might be able to do something similar:
.on('changeDate', function (ev) {
if (ev.dates && !ev.date && selectedDate)
{
// Fixes bug in bootstrap calendar without multiselect, where picking the same day unselects it
$(this).datepicker('setDate',selectedDate);
}
else if (ev.date && ev.date!=selectedDate) selectedDate = ev.date;
});
By having a variable named "selectedDate" somewhere before the constructor for your datepicker, this additional event handler will store valid dates and strip the bogus deselection. You'll notice the event object passed includes the array "dates" when incorrectly deselected, and only "date" when correctly selected.

jQuery 'change' method (for HTML attribute modify) working only once

I have this pair of functions affecting two inputs, and one select. These are exclusive so when inputs are filled, select must be modified to have option 3 selected, and when any option except 3 is selected, both inputs must be empty:
$('#ar_filter').on('change', '#ar_fromDate, #ar_toDate', function() {
if ($('#ar_fromDate, #ar_toDate').val!=""){
$('.lastDays').attr('readonly','readonly').find('option[value=3]').attr('selected', true);
}
});
$('#ar_filter').on('change', '#lastDays', 'select', function() {
if ($('.lastDays').val()!=3){
$('#ar_fromDate, #ar_toDate').val("");
}
});
This works, but only the first time. When I write some value on the inputs, it resets correctly select to value 3, but when I change manually selected options, after it resets and leaves inputs empty, it does not reset anymore the select, even when writing on any of those inputs.
JSFIDDLE EXAMPLE (try making 2 select resets by filling the inputs: it will only make the first one)

Based on your JSFiddle, I believe your second implementation of .on() is incorrect. The third optional argument can be passed as data to the handler function as denoted in the reference documentation.
Try changing:
$('#ar_filter').on('change', '#lastDays', 'select', function() {
to this:
$('#ar_filter').on('change', '#lastDays', function() {
Based on your comment above, I believe your selector is wrong. #lastDays is the id of the <select> element, which is where you want the change event bound. The extra select is not needed.
Updated Fiddle
Note:
The updated fiddle includes the .val() fix described by #tymeJV in his answer.
EDIT:
In addition to the .on() selector fix described above, you'll need to break out the two selectors in your .val() statement. This is because only the first input will be validated each time the change event occurs. This comes directly from the jQuery documentation for .val():
Get the current value of the first element in the set of matched elements.
The second value will not be fetched or validated.
Change this:
$('#ar_fromDate, #ar_toDate').val() != ""
to this:
$('#ar_fromDate').val() != "" || $('#ar_toDate').val() != ""
This should fix the problem. I've included an updated fiddle below. I've left the original fiddle in tact to show the progression of steps in solving this problem for the benefit of future visitors.
Complete Fiddle

"forceSelection:true" does not let clearing the field

When I set forceSelection:true for a combo, the user can not clear it after selectiong an option. Without adding a dummy empty choice, how can I let him to clear the field ?

I add a "clear" trigger to my comboboxes that need this support. Ultimately, you just need an action to hook onto in order to call clearValue().
Ext.create('Ext.form.field.ComboBox', {
...
trigger1Cls: 'x-form-clear-trigger',
trigger2Cls: 'x-form-arrow-trigger',
onTrigger1Click: function() {
this.clearValue();
}
});
Here's an http://www.sencha.com/forum/showthread.php?190886-How-to-reset-a-Combobox-or-Multiselect-to-no-values-selected
NOTE: You'll still need to do some CSS and create an image (probably) in order for the trigger image to show up.

set value to jquery autocomplete combobox

I am using jquery autocomplete combobox
and everything is ok. But I also want to set specific value through JavaScript like $("#value").val("somevalue") and it set to select element, but no changes in input element with autocomplete.
Of course, I can select this input and set value directly, but is it some other ways to do that? I try set bind to this.element like this.element.bind("change", function(){alert(1)}) but it was no effects. And I don't know why.
Edit
I found a workaround for this case. But I don't like it. I have added the following code to _create function for ui.combobox
this.element.bind("change", function() {
input.val( $(select).find("option:selected").text());
});
And when I need to change the value I can use $("#selector").val("specificvalue").trigger("change");

Is this demo what you are looking for?
The link sets the value of the jQuery UI autocomplete to Java. The focus is left on the input so that the normal keyboard events can be used to navigate the options.
Edit: How about adding another function to the combobox like this:
autocomplete : function(value) {
this.element.val(value);
this.input.val(value);
}
and calling it with the value you want to set:
$('#combobox').combobox('autocomplete', 'Java');
Updated demo
I cannot find any available existing function to do what you want, but this seems to work nicely for me. Hope it is closer to the behaviour you require.

I managed a quick and dirty way of setting the value. But, you do need to know both the value and the text of the item that you want to display on the dropdown.
var myValue = foo; // value that you want selected
var myText = bar; // text that you want to display
// You first need to set the value of the (hidden) select list
$('#myCombo').val(myValue);
// ...then you need to set the display text of the actual autocomplete box.
$('#myCombo').siblings('.ui-combobox').find('.ui-autocomplete-input').val(myText);

#andyb,
i think rewrite:
autocomplete: function (value) {
this.element.val(value);
var selected = this.element.children(":selected"),
value = selected.val() ? selected.text() : "";
this.input.val(value);
}

I really like what andyb did, but I needed it to do a little more around event handling to be able to handle triggering the a change event because "selected" doesn't handle when hitting enter or losing focus on the input (hitting tab or mouse click).
As such, using what andyb did as a base as well as the latest version of the jQuery Autocomplete script, I created the following solution: DEMO
Enter: Chooses the first item if menu is visible
Focus Lost: Partial match triggers not found message and clears entry (jQuery UI), but fully typed answer "selects" that value (not case sensative)
How Change method can be utlized:
$("#combobox").combobox({
selected: function (event, ui) {
$("#output").text("Selected Event >>> " + $("#combobox").val());
}
})
.change(function (e) {
$("#output").text("Change Event >>> " + $("#combobox").val());
});
Hopefully this helps others who need additional change event functionality to compensate for gaps that "selected" leaves open.

http://jsfiddle.net/nhJDd/
$(".document").ready(function(){
$("select option:eq(1)").val("someNewVal");
$("select option:eq(1)").text("Another Val");
$("select option:eq(1)").attr('selected', 'selected');
});
here is a working example and jquery, I am assuming you want to change the value of a select, change its text face and also have it selected at page load?
#
Attempt 2:
here is another fiddle: http://jsfiddle.net/HafLW/1/ , do you mean that you select an option, then you want to append that value to the autocomplete of a input area?
$(".document").ready(function(){
someString = "this,that";
$("input").autocomplete({source: someString.split(",")});
$("select").change(function(){
alert($(this).val()+" appended");
someString = someString+","+$(this).val();
$("input").autocomplete({source: someString.split(",")});
});
});