Archief - Ajax kalender: overlappende afspraken

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.

Bram

Legacy Member
Hallo allemaal.

Ik ben atm bezig met een klasagenda te programmeren die met redelijk wat JS werkt.

Ik heb een schooluurrrooster grid waarin men items kan toevoegen. Een activiteit begint dus op een bepaald lesuur en kan ook meerdere lesuren duren (bv een uitstap).

Nu, als activiteiten overlappen, dan wil ik dat de overlappende activiteiten een beetje smaller worden en de ene wat inspringt, zodat beide overlappingen nog goed te zien zijn (denk: google agenda).

Nu bereken ik dit voorlopig nog met volgende js:
Code:
$('.columnWrapper').each(function() {
	var i = 0;
	var items = $(this).children('.AgendaItem');
	if (items.length > 1) {
		var AllItems = new Array(items.length);
		items.each(function() {
			var item = $(this);
			var top = $(this).position().top;
			var bottom = $(this).position().top + $(this).height();
			AllItems[i] = [item, top, bottom];
			i = i + 1;
		});
		var overlappers = [];
		var k = 0;
		for ( var i=0, len=AllItems.length; i<len; ++i ){
			var end = ''
			if(AllItems[i+1] != undefined) {
				end = true;	 
			} else {
				end = false;
			}
			if(end) {
				if(AllItems[i][1] <= AllItems[i+1][1] && AllItems[i+1][1] <= AllItems[i][2]) {
					overlappers[k] = AllItems[i][0];
					++k;
					if(end == true) {
						overlappers[k] = AllItems[i+1][0];
					}	
				}
			}
		}
		for ( var l=0, lenn=overlappers.length; l<lenn; ++l ){
			var width = 100 - ((lenn - 1) * 20);
			var left = l * 20;
			overlappers[l].css({width: width+'%', left: left+'%'});
		}
					
	}
	
});

Deze code is het resultaat van een namiddag prutsen en doen. Het werkt, maar heel buggy.

Is er iemand die hiermee ervaring heeft, of een beter logisch inzicht heeft dan mij, en die mij op weg zou kunnen zetten om een beter algoritme uit te denken. Ik hoef geen letterlijke code, maar eerder de logica die ik zou moeten volgen.

edit: die 37 die je van tijd tot tijd nog ziet passeren was een bugje.

Drone

Legacy Member
Misschien kan je de code van Fullcalendar eens bekijken. Is ook een javascript/jquery kalendar dat nog al erg lijkt op die van google.
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan