[calculuswhizParticipant]

[…] the main problem is that setting properties when the instance is used will not update the component.

Yes, but isn’t that what setOptions() is for?

[calculuswhizParticipant]

…And I just discovered that this is allowed on several different widgets (seems to break for jqxTabs, though…):

const gridInstance = new jqwidgets.jqxGrid(selector, options);

This is clearly even better and only requires a little tweaking to the .d.ts to get it to work… Shouldn’t that be documented?

[calculuswhizParticipant]

Oops, I the answer I gave before wasn’t correct for a few reasons:

1. The view property doesn’t change when the buttons are pressed. (This one’s not my fault.)
2. The base date defaults to today, not the beginning of the date range.
3. The base date will not change when the range view is changed.

A more “reliable” way to do this would be to use the status bar’s date information at the top of the scheduler:

function getSchedulerRange($scheduler)
{
    let statusTexts = $scheduler
        // Grab the status bar:
        .find('.jqx-scheduler-toolbar-details')
        .text()
        .split(' - ');
    
    return (
    {
        // Convert to Date object
        from : new Date(statusTexts[0]),
        // Account for single-day view
        to : new Date(statusTexts[statusTexts.length - 1])
    });
}

Of course, this still could have all been avoided if they had given us a property accessor or a getter method to retrieve this info. But, hey, what can you do? (Bother it all and make one yourself with React, perhaps.)

Also, as per usual with these widgets, the status bar will not be valid immediately in the context of your event listener. In this case, you can defer the function call until the currently executing context is done executing like so:

// Standard jqWidgets timer hack
setTimeout(function ()
{
    // Do things with the data here...
    getSchedulerRange($('#scheduler-element'));
}, 0);

[calculuswhizParticipant]

This isn’t too helpful an answer. The OP asked for a range.

You have to add to the date you get from the ‘date’ property:

function getSchedulerRange($scheduler)
{
	let baseDate = $scheduler.jqxScheduler('date');
	let view = $scheduler.jqxScheduler('view');
	let toDate;
	switch(view)
	{
    	case 'dayView':
	    	toDate = baseDate.addDays(1);
	    	break;
		case 'weekView':
			toDate = baseDate.addDays(7);
			break;
		case 'monthView':
			toDate = baseDate.addMonths(1);
			break;
		case 'agendaView':
			toDate = baseDate.addDays(7);
			break;
		// Add more cases here...
		default:
			toDate = baseDate.addDays(7);
			break;
	}
	
	return (
	{
		from : baseDate.toDate(),
		to : toDate.toDate()
	});
}

// Call the function:
getSchedulerDateRange($('#scheduler-element'));

I guess they forgot to add this property accessor in.

[Author]

Posts