Calendar widget with data being retrieved from database

[MFS]

Hi,

we would like to use the easyui-calendar widget to show a calendar within our app and also mark dates that are taken/have events on that day. When loading the data first and than initilazing the calendar widget it works fine, but when we need to fetch more/new data based on calendar navigation events we can't await for that data to be returned before the formatter and validator method are called.

The only way to achieve this atm that we can see is to load all the data from the database before initializing the calendar widget which is not optimal at all since there are way too many records that would need to be retrieved at that point and would make the load time much slower.

What would be nice is to be able to specify a url property to the calendar in the same way we can do it to the datagrid, which would than get called everytime an onNavigation event is fired and/or even on click but for on click we can hanlde that our self.

Code:

//example code
$("#mycalendar").calendar({
        url: 'remoteCalendarData.php',
	onSelect: function(date){
		console.log(`onSelect`, date);
	},
	formatter: function(date) {
		return date.getDate();
	}
});

Does anyone have any suggestions for this or should we switch to something like fullcalendar for even calendars and stick to easyui for simple form and grid stuff ?

[jarry]

This is the simple example that shows how to format a date with the ext data properties.

Code:

// The data to store the ext properties for each date.
var data = [];
function fetchData(year,month,cb){
	// Make a little delay to simulate the fetching data from server.
	setTimeout(function(){
		var index = data.findIndex(row => row.y==year && row.m==month);
		if (index == -1){
			if (month == 3){
				data.push({y:2022,m:3,d:3,other:'other msg33'})
				data.push({y:2022,m:3,d:4,other:'other msg34'})
				data.push({y:2022,m:3,d:5,other:'other msg35'})
				cb();
			} else if (month == 4){
				data.push({y:2022,m:4,d:13,other:'other msg413'})
				data.push({y:2022,m:4,d:14,other:'other msg414'})
				data.push({y:2022,m:4,d:15,other:'other msg415'})
				cb();
			} else {

			}
		}
	},200)
}
$(function(){
	$('#cc').calendar({
		formatter: function(date){
			var y = date.getFullYear();
			var m = date.getMonth()+1;
			var d = date.getDate();
			var items = data.filter(row => row.y==y && row.m==m && row.d==d);
			var item = items.length ? items[0] : null;
			return item ? item.other : date.getDate();
		},
		onNavigate: function(year,month){
			var index = data.findIndex(row => row.y==year && row.m==month);
			// If the data item doesn't exist, fetch it from server.
			if (index == -1){
				fetchData(year, month, function(){
					$('#cc').calendar()
				})
			}
		}
	})
})