We Keep Coding

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

Is there a way to deselect date in Pikaday?

Is there a way to deselect selected by user day in Pikaday calendar?
I would like to get from this state
to the following one

You could set the pickers date to null using .setDate(null) and attaching a listener to a button you press as described in the documentation to clear the selected date.

Select multiple dates inside Kendo Date Picker widget

I am using kendo date picker widget inside our software application. However, for our specific feature, I would like to be able to select "more than one date" inside the date picker widget.
By default, as soon as you change the selected date inside the widget, the widget automatically sets the newly selected date and then triggers the default "close" event of the widget and hence, it closes automatically. Therefore, I am not able to handle the "close" event manually and hence, the "change" event as well. An example of a simple kendo date picker is as under:
$("#inputDateTimePicker2").kendoDatePicker({
format: "yyyy-MM-dd",
change: function (e){
var newValue = kendo.toString(e.sender.value(), "yyyy-MM-dd");
},
close: function(e){
//code to handle the close event.
}
});
Is there a good way to achieve this functionality inside the kendo date picker widget.
It would be very helpful.

Destroy method on jQuery DatePicker removes DatePicker but when I re-instantiate a new one, the previous selected Date value is still selected

I created a demo to show the issue I am having using a jQuery library called Zebra-Datepicker.
Zebra-Datepicker documentation: http://stefangabos.ro/jquery/zebra-datepicker/
Zebra-Datepicker GitHub: https://github.com/stefangabos/Zebra_Datepicker
My demo shows how to:
create a DatePicker instance,
select a date value,
destroy the date picker instance,
create a new instance of the date picker,
select a new date value....
Problem:
The problem is that destroying the DatePicker does not seem to destroy the previous selected date value! So when instantiating a new DatePicker, it has the previous Date value selected instead of a new value!
I could really use some expert help as this is crucial for me to fix for my project which loads Project Task records into a Modal DIV. My Task records all share the HTML in the DOM of a single Modal, just replacing placeholder variables for a Task and then re-setting them when Modal is closed for the next Task to do the process over and over.
My Demo JSFiddle: http://jsfiddle.net/jasondavis/Lqwfamoc/17/
If you follow these steps on my demo you will see what I mean...
Click on Date SPAN to reveal DatePicker calendar and click on date 2015-05-30
Click Destroy DatePicker button
Click on Date Span which will then show DatePicker is missing since we destroyed it.
Now click on UPDATE DatePicker to 2015-05-24 Button which will set the Date SPAN value to have a new date of 2015-05-24. When we instantiate the DatePicker plugin again, it should grab this new date value in the SPAN and set the DatePicker to this date!
Now click Build New DatePicker button which instantiates a new DatePicker
Now click the Date SPAN text: 2015-05-24 to show the DatePicker Calendar again
You should now see that the original 30th day 2015-05-30 is selected in the DatePicker even though it SHOULD now have our Date value of 2015-05-24 selected instead since we destroy() and re-instantiated a new DatePicker after Destroying the old one!
Apparently, the Destroy method didn't full destroy or something else is going on? Any ideas on how to fix this?
The sourcecode of the actual Zebra-Datepicker lIbrary's destroy() method:
Located here
https://github.com/stefangabos/Zebra_Datepicker/blob/master/public/javascript/zebra_datepicker.src.js#L1469
/**
* Destroys the date picker.
*
* #return void
*/
plugin.destroy = function() {
// remove the attached icon (if it exists)...
if (undefined !== plugin.icon) plugin.icon.remove();
// ...and the calendar
plugin.datepicker.remove();
// remove associated event handlers from the document
$(document).unbind('keyup.Zebra_DatePicker_' + uniqueid);
$(document).unbind('mousedown.Zebra_DatePicker_' + uniqueid);
$(window).unbind('resize.Zebra_DatePicker_' + uniqueid);
// remove association with the element
$element.removeData('Zebra_DatePicker');
};

I found the problem. You need to change this:
$('#updateDate').on('click', function(){
$('#task-modal-due-date-span').text('2015-05-24');
});
to this:
$('#updateDate').on('click', function(){
$('#task-modal-due-date-span').text('2015-05-24').val('2015-05-24');
});
The reason is that when you rebuild a new DatePicker control, it is looking at the value of the span, not the text of the span. (Note: Normally you would attach a DatePicker to an "input" element, not a "span" element.)

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.