[HTML/CSS] Agenda dagoverzicht design

[-FoX-]

Ik ben al een tijdje aan het prutsen om een goed design in elkaar te stoppen voor mijn planning systeem. Maar ik krijg het maar niet voor elkaar... Op dit moment is dit design wel al werkbaar en ziet er ongeveer zo uit:
Voor basis zaken is dit natuurlijk wel voldoende, maar het systeem laat wel meerdere zaken toe zoals dubbele boekingen e.d. Er moet ook meer interactie in komen, achteraf eventueel uitbreidbaar met ajax (verslepen van entries, resizen van entries, ...); maar daar hoeft nu nog even geen rekening mee gehouden te worden.

Visueel heb ik natuurlijk al een en ander uitgedokterd en mijn idee ook ineens omgezet via een bewerkingsprogramma en dan bekom ik volgende visuele output:


Dit is natuurlijk wel na te maken, alleen heb ik geen idee wat de beste aanpak hiervoor is? Ik ben al enkele malen hieraan begonnen, maar telkens kon ik mijne opzet weggooien omdat ik op een bepaald punt vast kwam te zitten. Deze layout moet namelijk gemakkelijk dynamisch opgevuld kunnen worden, zonder al te veel 'hacks', want het achterliggende systeem is een J2EE applicatie.

Wie kan me met een serieuze schop de juiste richting uit sturen

edit:
Iedere entry moet ook klikbaar zijn om zo naar het input scherm te kunnen navigeren. Een beetje zoals het reeds werkende voorbeeld dus.

[ Voor 8% gewijzigd door -FoX- op 22-07-2006 18:11 ]

[Zoefff]

Er staat echt maar een paar topics hieronder eenzelfde topic waar ik een vrij uitgebreid en uitgewerkt voorbeeld in heb gezet, [rml]Zoefff in "[ DHTML] Reserverings overzicht weergeven"[/rml].

Ben je op zoek naar een oplossing zonder tabellen dan is http://crew.tweakers.net/Zoefff/web/agenda.htm misschien wel een goede opzet voor je

[ Voor 24% gewijzigd door Zoefff op 22-07-2006 20:03 ]

[-FoX-]

Ik wil liefst een oplossing zonder tabellen bereiken, maar indien dit niet haalbaar blijkt te zijn, hoeft het niet perse voor mij.

Ik heb eens naar je oplossing zonder tabellen gekeken, maar dit is maar een erg minimalistische opzet die op het eerste zicht wel gelijkaardig lijkt te zijn. Al denk ik, dat wanneer ik het voorbeeld verder uitwerk zoals mijn prototype, ik achteraf in de problemen zal komen. Daar werk je ook alleen maar met individuele classes per afspraak, die dan gepositioneerd worden adh van pixel breedtes.

Het geheel moet verder wel vrij dynamisch in elkaar gezet kunnen worden, aangezien het vanuit een backend systeem data krijgt toegevoerd. Dus ik weet niet in hoeverre ik hiervoor een cleane oplossing kan maken. Stel dat de gebruiker de CSS bvb uitschakeld, dan nog zou het netjes weergegeven moeten worden in de zin dat de afspraken bij de juiste uren zullen staan.

Ik weet niet in hoeverre mijn voorgestelde oplossing ook maar haalbaar is

[Harm]

-FoX- schreef op zaterdag 22 juli 2006 @ 20:55:
Het geheel moet verder wel vrij dynamisch in elkaar gezet kunnen worden, aangezien het vanuit een backend systeem data krijgt toegevoerd. Dus ik weet niet in hoeverre ik hiervoor een cleane oplossing kan maken. Stel dat de gebruiker de CSS bvb uitschakeld, dan nog zou het netjes weergegeven moeten worden in de zin dat de afspraken bij de juiste uren zullen staan.

Dat klinkt alsof het hier niet om een openbare webpagina gaat, maar meer om een intranetoplossing of een applicatie die alleen beschikbaar is voor een relatief kleine groep gebruikers. Mijns insziens mag je in dat soort gevallen best eisen stellen aan een useragent, waarbij CSS dan dus een van de noodzakelijkheden is

Ik zie trouwens dat je jouw vereiste eventueel ook nog wel met Zoefffs oplossing zou kunnen bereiken door aan het agenda-item ook de begin- en eindtijd mee te geven. Die kun je dan eventueel weer verbergen als CSS aanstaat, maar dan staan ze in ieder geval wel in de HTML en is het alsnog enigszins bruikbaar.

[-FoX-]

Inderdaad, het gaat hier niet om een gewone website maar om een groupware webapplicatie, dus in dat opzicht kunnen er wel eventuele eisen gesteld worden. Javascript is toch sowieso al vereist, maar de applicatie moet wel robuust/consistent blijven werken als die uitgeschakeld is. Ik bedoel hier dan vooral mee dat ze er de applicatie niet mee kunnen compromiteren door bvb validatie rules te ontwijken, maar dat de applicatie slechts gedeeltelijk bij hun werkt, is dan weer hun probleem.

Ik had al gedacht om aan iedere gegenereerde lijn een specifiek timeslot ID te hangen, of een id die het aantal minuten voorsteld, hierop gebasseerd kan dan eventueel de gehele layout gegenereerd worden, maar dan moeten de entries er wel mooi over geplaatst worden..

[Zoefff]

De tabel-versie is voor jou inderdaad minder interessant omdat de data minder tabulair is. Een defenitionlist met in de dt de tijd en de x volgende dd's de afspraak lijkt me beter, zoals in mijn tweede voorbeeld.

Als het CSS-loos ook nog duidelijk moet zijn dan zou ik zéker voor de dl-oplossing gaan. De afspraken zet je neer bij de begintijd. Prop er dan een span met begin- en eindtijd in (die je met CSS op display: none;) zet, en je hebt bij een CSS-loze weergave ook de eindtijd duidelijk zichtbaar.

Misschien heb ik morgen nog wat tijd over, dan wil ik het dl-voorbeeld wel wat verder uitwerken. Het enige waar ik op dit moment nog geen oplossing voor kan verzinnen zijn die paarse balken links...

[-FoX-]

"display:none;" is wel een goed idee voor de CSS-loze weergave.

Voor die paarse balken heb ik ook nog geen idee om die te verwezenlijken. De bedoeling daarvan is, om bij een shared agenda, gemakkelijk te kunnen zien welke bloks nog niet ingeplanned zijn. Het is voor de gebruiker dus mogelijk om meerdere agenda's boven elkaar te openen en op die manier kan hij gemakkelijk zien als er nog plaats is bij een collega of een dag al dan niet vol geplanned is.

[Zoefff]

Als je de dl-oplossing gebruikt kan je iedere afspraak (dd) gewoon een padding geven bedenk ik me net, met een links een paarse border. Een beetje leuk knutselen met z-index levert dan wel het gewenste resultaat op, ook als er op 1 tijd meerdere afspraken zijn. Maargoed, ik zou me op een gegeven moment wel afvragen of dit niet te complex wordt om met 'normale' HTML & CSS op te lossen, of dat je niet liever naar een Javascript oplossing grijpt (AJAX?). Probleem is dan natuurlijk wel weer dat het niet echt te bekijken is op computers die geen CSS danwel JS ondersteunen.

[Anoniem: 9542]

als je een ics beschikbaar heb kan je eens kijken, want ik ben er ook mee bezig:
http://www.rikkertkoppes.com/tests/calendar/test.htm

ik heb ook een oplossing met tabellen met daarin divs die over de cellen heen kunnen vallen. Bij de weekview zijn de hoogtes ook nog eens dynamisch (wat ik bij de dayview er nog in moet stoppen) Ik moet verder nog wel even uitwerken hoe ik meerdere events simultaan ga weergeven, maar da's voornamelijk een uitrekenkwestie.

(overigens nog redelijk Fx only, maar dat komt nog)

[ Voor 12% gewijzigd door Anoniem: 9542 op 23-07-2006 11:29 ]

[-FoX-]

Zoefff schreef op zaterdag 22 juli 2006 @ 22:07:
Als je de dl-oplossing gebruikt kan je iedere afspraak (dd) gewoon een padding geven bedenk ik me net, met een links een paarse border. Een beetje leuk knutselen met z-index levert dan wel het gewenste resultaat op, ook als er op 1 tijd meerdere afspraken zijn. Maargoed, ik zou me op een gegeven moment wel afvragen of dit niet te complex wordt om met 'normale' HTML & CSS op te lossen, of dat je niet liever naar een Javascript oplossing grijpt (AJAX?). Probleem is dan natuurlijk wel weer dat het niet echt te bekijken is op computers die geen CSS danwel JS ondersteunen.

Een left border kan idd een oplossing zijn, maar ik zie niet goed in hoe je dat zal oplossen met meerdere afspraken op een overlappend tijdstip en op welke manier javascript hier wel een oplossing voor kan zijn?

[Anoniem: 9542]

ik zit me net af te vragen of elementen (die je de juiste hoogte hebt gegeven) left floaten dat meerdere afspraken niet vanzelf oplost. Niet mee getest (nog), maar wellicht een idee

[-FoX-]

mm, als ik dat hier test lopen de afspraken soms gewoon dwars door elkaar heen. Waarschijnlijk doe ik dus nog iets fout.

Wat is de beste manier dat ik dit hierarchisch kan oplossen (element gewijs dan)?

[Zoefff]

Ik zou het met CSS oplossen. Per afspraak een ID met daarin de duur (hoogtte) en een class in welke 'kolom' hij moet komen.

[-FoX-]

Zoefff schreef op zondag 23 juli 2006 @ 18:00:
Ik zou het met CSS oplossen. Per afspraak een ID met daarin de duur (hoogtte) en een class in welke 'kolom' hij moet komen.

Is het mogelijk om dit even via een voorbeeld uit leggen?

Ik krijg het namelijk totaal niet voor elkaar. Is het nodig om te weten in welke 'kolom' ie moet komen, kan dit niet al floatend opgelost worden?

[Rowanov]

Zoefff schreef op zondag 23 juli 2006 @ 18:00:
Ik zou het met CSS oplossen. Per afspraak een ID met daarin de duur (hoogtte) en een class in welke 'kolom' hij moet komen.

Ik denk dat je dan op twee classes uitkomt, ipv van id's. Het is vrij lastig om unieke id's te bewaken als de hoogte van twee elementen hetzelfde kan zijn. Aangezien je een element twee classen kan geven kan je daarmee het een en ander bepalen.

Technisch stel ik het me zo voor:
• een realtief gepositioneerde container die je grid bevat
• de individuele afspraken (welk element je er ook voor kiest) absoluut positioneren
• aan de hand van de class voor hoogte die je er aan geeft een style toekennen die de hoogte regelt
• de class voor de kolom het element laten positioneren dmv. de 'left' property
• met javascript de top instellen van het element, om het op de juiste hoogte (starttijd) te krijgen

Dat laatste kan je zien als een simpele formule, die het aantal uren omzet naar een aantal pixels wat het element naar beneden moet schuiven. Vanuit dit princiepe kan je een heleboel functionaliteit er bij bouwen. Je kan ook de hoogte van de elementen met javascript laten regelen, als je niet alle opties hard in je stylesheet wil zetten.

[cybermans]

mocht je het ook voor Pocket IE (windows mobile) geschikt willen maken dan kan je enkel tables gaan gebruiken. Zelf heb ik dat net gedaan (lees hier een van me problemen tijdens het maken: [rml][ PIE/JS] <td onclick c'est impossible?[/rml] )

[-FoX-]

cybermans schreef op maandag 24 juli 2006 @ 11:25:
mocht je het ook voor Pocket IE (windows mobile) geschikt willen maken dan kan je enkel tables gaan gebruiken. Zelf heb ik dat net gedaan (lees hier een van me problemen tijdens het maken: [rml][ PIE/JS] <td onclick c'est impossible?[/rml] )

Handig.. mss voor in de toekomst, want ik wil het eerst op deze manier realiseren.

[ Voor 6% gewijzigd door -FoX- op 25-07-2006 08:29 ]

[-FoX-]

Eindelijk maar weer eens verder kunnen prutsen aan het ontwerp, na een drukke periode, maar ik kom steeds weer vast te zitten.. of met de kleuren of dan weer met de layout of dan weer met het dynamische gedeelte.

Dit heb ik er tot hiertoe van kunnen maken: Voorbeeld. Is er iemand die mij verder wil helpen??

[CaptBiele]

kun je niet kijken naar de Google Calendar? die is ook wel relaxed hoor....

[Anoniem: 37786]

Mocht je CSS3 willen gebruiken en toch IE blijven ondersteunen. Kijk dan voor de gein eens hier: http://dea.edwards.name/IE7/. Performance verlies blijft minimaal.

[Rowanov]

Anoniem: 37786 schreef op zondag 06 augustus 2006 @ 22:32:
Mocht je CSS3 willen gebruiken en toch IE blijven ondersteunen. Kijk dan voor de gein eens hier: http://dea.edwards.name/IE7/. Performance verlies blijft minimaal.

Het is http://dean.edwards.name/IE7/

Daarnaast is CSS3 niet ter sprake gekomen in dit topic, nog de (on)mogelijkheden om het met de huidige gangbare css op te lossen. Het moet prima kunnen zonder zulk soort noodgrepen, omdat eigenlijk alleen de positionering een probleem vorm; een probleem dat wel lastig is, maar toch met de huidige css opgelost kan worden (al dan niet met wat eigen javascript).

[Zoefff]

Ik heb me er een paar weken geleden even over gebogen en ben toen tot dit gekomen: http://crew.tweakers.net/...agenda-defenitionlist.htm . Kijk er eens naar zou ik zeggen, heb zelf geen tijd (en zin) meer gevonden om er mee verder te gaan

[-FoX-]

Anoniem: 37786 schreef op zondag 06 augustus 2006 @ 22:32:
Mocht je CSS3 willen gebruiken en toch IE blijven ondersteunen. Kijk dan voor de gein eens hier: http://dean.edwards.name/IE7/. Performance verlies blijft minimaal.

Handig, maar niet perse vereist voor deze functionaliteit. I'll keep it in mind though..

Zoefff schreef op maandag 07 augustus 2006 @ 00:43:
Ik heb me er een paar weken geleden even over gebogen en ben toen tot dit gekomen: http://crew.tweakers.net/...agenda-defenitionlist.htm . Kijk er eens naar zou ik zeggen, heb zelf geen tijd (en zin) meer gevonden om er mee verder te gaan

Wow nice Dit komt al aardig dicht in de buurt van mijn prototype! Het enige probleem dat dan nog getackeled dient te worden is de uren in large font tonen en de minuten in sup/sub mode, in combinatie met een grijze achtergrond kleur. Dit moet nog wel lukken denk ik. Enkel de border die de geboekte uren als 'paars' highlight, lijkt me nog erg tricky..

Thanks, ik kan straks weer verder aan de slag..

[-FoX-]

Nadat ik net het gewenste resultaat bereikte qua mouse-over effecten, verschillend voor de open uren en bestaande afspraken, werd mijn vreugde even gedempt toen ik het design onder de loep nam in IE.

Welke hacks kan ik toepassen om het hovering aspect voor dit design hetzelfde te krijgen zowel voor IE als Firefox?

[Borizz]

Misschien kan je eens kijken naar Whatever:hover .