Calendar component date picker add onSelect function

  • 2
  • Idea
  • Updated 2 years ago
  • Under Consideration
Hello everyone

We are still working with the skuid calendar component. We had to display multiple calendars at once (All Day Events and Normal Events) because they display a different daterange. However, we need to connect them together, so they always display the same daterange.

We already got it working for the previous and next day/week/month buttons. But we also had to expose the normally hidden datepicker for quick navigation and there lies my problem. A selected Date will not notify any listeners to changes it has made.

Therefore my intention was to add a jQuery datepicker onSelect function to fire off a function which sets the second calendar on the same date, as well as firing off a snippet i need for a different purpose every time i select a new date with the datepicker.

However, my onSelect function does not seem to get accepted at all.

$.datepicker.onSelect(function(dateText, inst){
        console.log("debug");
    });

Would be really neet, if we had some way to kick off actions when someone changes the date
Photo of Matthias

Matthias

  • 628 Points 500 badge 2x thumb
  • frustrated

Posted 2 years ago

  • 2
Photo of J.

J., Official Rep

  • 7,470 Points 5k badge 2x thumb
Official Response
Matthias,

That will work, but here's a slight change that makes it a little more generic (doesn't depend on low-level, undocumented Calendar APIs). As before, MyCalendarComponent is the unique id of your calendar component:
(function(skuid){
	var $ = skuid.$;
	$(document.body).one('pageload',function(){
		var calendarComponent = skuid.$C('MyCalendarComponent'),

			//	Get the calendar's date input
			dateInput = calendarComponent.element.find('input.hasDatepicker');

		if (dateInput.length){
			//	The original datepicker "onSelect" method
			var currentOnSelect = dateInput.datepicker('option','onSelect');

			dateInput.datepicker('option','onSelect',function(dateText,inst){
				//	Run the original "onSelect" method
				currentOnSelect.apply(dateInput,arguments);

				//	Do custom actions here
				console.log('date selected',dateText);
				console.log('datepicker instance',inst);
			});
		}
	});
})(skuid);
Include that script as an Inline or StaticResource JavaScript resource. As Zach said though, this is an unsupported custom JavaScript solution. Hope that helps!
(Edited)