web-dev-qa-db-fra.com

Manière compacte d'afficher le calendrier hebdomadaire?

Donc, fondamentalement, je dois afficher le calendrier hebdomadaire des cours. Je voudrais que ce soit assez compact, donc je veux juste montrer si la classe se déroule le matin/après-midi/soir pour chaque jour (je déterminerai les plages horaires réelles à un moment donné).

Cela signifie donc que, s'ils sont disposés dans une grille, il y a 21 cellules (voir l'image jointe). Je vais probablement inclure les heures réelles au survol/clic dans une info-bulle, par exemple 14h00 - 16h00.

Il doit y avoir une manière plus efficace/compacte d'afficher ces informations qu'une grille de 21 cellules, sûrement? Si quelqu'un a des idées/expériences, faites-le moi savoir. Merci.

EDIT: Pour un peu de contexte, cela doit être compact car j'affiche ces cours en tant que résultats de recherche, j'ai donc besoin d'une sorte de système en place comme un "aperçu rapide" de la programmation.

enter image description here

info-visualisationtimetimelineinfographic
1
j_d

An example of how transposing the data gives the illusion of a more compact table

Un exemple de la façon dont la transposition des données donne l'illusion d'une table plus compacte (et adaptée aux mobiles)

1
Alex P

J'ai fait quelques hypothèses, mais c'est la version la plus compacte à laquelle je peux penser étant donné les informations les plus pertinentes qui doivent être affichées:

  • Jours de la semaine : Une étiquette à trois lettres est probablement le moyen le plus court et le moins déroutant d'indiquer les jours de la semaine (évite les T et S en double)
  • Ordre de la semaine : Une ligne pour séparer les jours de la semaine des week-ends pour permettre à l'utilisateur de distinguer facilement ces sections
  • Heure du cours : La position dans la grille l'indique déjà afin que nous puissions éliminer les différentes couleurs. Étant donné que tous les emplacements ne sont pas toujours remplis, nous pouvons également utiliser l'étiquette (ceux-ci peuvent être réduits) dans la grille afin que l'utilisateur n'ait pas à numériser vers le haut. Cela pourrait être remplacé par des valeurs réelles à l'avenir.

enter image description here

1
Michael Lai

Pas besoin non plus de transposer la table - vous pouvez la rendre beaucoup plus compacte dans la même orientation:

enter image description here

Toutes mes excuses pour la maquette super rapide 'n' sale ... vous pourriez, bien sûr, la rendre encore plus compacte.

0
Mattynabib

Je me souviens avoir travaillé sur quelque chose de similaire dans le passé. L'une des options consiste à utiliser la vue grain. Tout comme l'application Google Agenda, vous pouvez avoir plusieurs vues qui révèlent des détails plus fins lorsque vous "zoomez" (changez de vue). Cela reviendrait également à refaire votre mise en page. Vous pouvez même révéler les détails de l'heure dans le grain le plus fin.

0
Adarsh Sosale