We Keep Coding

Fullcalendar Event Graphic Color Change

I was wondering if there is a way to change the graphic of an event in Fullcalendar v5.
As it for now i know that if you set the properties Allday to "True" you'll see a full blue event, if you don't you'll see a different one. Are there some other event graphic type? Because i created a calendar with 3 type of event but 2 of these graphically results equal so it's a little bit sad.
It would be cool even just a way to change the color from blue to something else based on the type of event choosen, maybe it would be even better. Thanks <3
(image to show the 3 type of event i created and the fact that 2 of them are the same because they do not have allday: true)

Chrome DevTools listen to multiple selections of the same element in the elements panel

In my Google Chrome DevTools Extension I try to listen to the selections in the DevTools panel "Elements". In particular, it should be possible to listen to the selection of the already selected element.
My current implementation method revolves around the function chrome.devtools.panels.elements.onSelectionChanged. The function name already suggests that it is only possible to react to elements that are not currently selected.
Therefore I tried to reset or remove the current selection with the help variable $0, to be able to listen to the same element again - unfortunately without success.
My goal is to somehow listen to every click/selection in the elements panel. In summary, I am looking for an onSelection listener instead of an onSelectonChange listener.
EDIT #1
Here's my code I've tried:
chrome.devtools.panels.elements.createSidebarPane(
"Selector",
function(sidebar) {
// It fires if I'm selecting a specific DOM element via the elements panel the first time
// It won't fire if I'm selecting the same DOM element again
chrome.devtools.panels.elements.onSelectionChanged.addListener(() => {
chrome.devtools.inspectedWindow.eval(`(${getSelector})()`,
selector => {
console.log(selector)
// Here I tried to reset the current selection...
// I've already debugged it: I can assign a value to $0,
// but this implies that the value remains constant even
// after a new selection.
chrome.devtools.inspectedWindow.eval('$0 = undefined')
})
})
}
)
I am wondering if there is a way to change the selector programmatically...

I found a solution actually.
It looks like I overlooked the function inspect(<domElement>) in the Chrome DevTools documentation. With this function it is possible to programmatically change the auxiliary variable $0. I call inspect(document.body) at the end of each chrome.devtools.panels.elements.onSelectionChanged.addListener() function call, thus all other DOM elements become selectable again (several times).
Note: Ideally you should call inspect(<domElement>) on that DOM element where you know you don't want to select it multiple times.
I hope that I could help someone with the same problem.

Fullcalendar: Events with open and closed day background/marker

I was building a Calendar with dynamic events.
Simplest representation of my event object
id : " sdsddsd "
start : "2018-05-13T0..."
end : "2018-05-26T0"
open_monday: true
open_tuesday: false
open_wednesday: true
open_thursday: false
...
So in the month view calendar, I wanted to show my events and within the event if open_monday is true then set the background of that day grid to green. The following Tuesday will use the value open_tuesday and it is false so it will display red.
The red and green background will only be inside an Event. If the day grid isn't within any event, it will be left as blank.
How can I do this. Or is there a better way to do this using resources, constraintsetc. ?.
Thanks.

I am not sure I understand, but it is rather strange to pass the whole list of open/closed weekdays with each event. You should rather determine which weekday your event is and act accordingly. Just add an eventRender callback field to your calendar to control exactly the layout of the HTML element rendering the event. See
https://fullcalendar.io/docs/eventRender
To know the weekday of an event, use
moment(event.start).day()
See
https://momentjs.com/docs/#/get-set/day/
Alternatively, you can add an eventDataTransform field to your calendar, which will be applied to each event when it is loaded, so you can change any of its layout specifiers (color, backgroundColor, className...), see list at
https://fullcalendar.io/docs/event-object

jQuery range slider - any event other than slidestart and slidestop

I can read slidestart and slidestop events. However what I want is an event in between. Basically if I pull or swipe the slider to the right then I would like to know what the current value is (on an ongoing basis) so that I could display that value in another DOM Object that converts and displays second in HH:MM:SS format.
Thanks.

Auto scroll to next option in Magento

I am very new to JS. How do I add onclick event to magento Advanced options so when selected first option it should automatically scroll (jump) to next option without having to manually scroll for the next option. Here is an example: Link to Example

Since you tagged 'jQuery' in your post I'm going to assume you want to use that.
Below is the code that would work on the example you gave, but it (especially the selectors) will be different for other templates.
// Click event handler
$('.optionblock input').click(function(){
// Check if there is a next option block
var $next = $(this).parents('.optionblock').next('.optionblock');
if($next.length) {
// Set scroll position to the next option block
$(window).scrollTop($next.offset().top);
}
});
This is just to get the idea. I didn't consider crossbrowser support and animated scroll effects.
Update: here you have a working example with the animated scroll effect: http://jsfiddle.net/66AmA/
Update 2: For your specific HTML-structure the code would be like this: http://jsfiddle.net/FFu6n/

Try to define "onChange" event to focus next input (or use other condition than onchange):
document.getElementById("myForm").elements[next].focus();