Problem: Develop an easy to use school calendar for web + print.

1. School has several teachers. Currently 7 but grows. 
2. Each teacher can have multiple groups (average 1-5).  
3. Each group contains multiple students. (average 3-8).  
4. Groups usually have no meaningful name at this point. (Name = names of students).  
5. Currently 4 classrooms available. (Will grow approximately +3 per year)  
6. Teachers can teach the course outside of the classrooms on client’s site.   
7. There are ~10-30 classes during the day.

Calendar should have the following abilities:
1. Add, Edit, Delete existing event. (Assign group, timeframe, recurrence).
2. Add recurring event.
3. You can add as many classes for the same timeframe as you want, but only 4 classes(= number of classrooms) can be held in classrooms. Everything else must be a “client’s site” class. (Should be easily identifiable).

Standard empty calendar looks like this:
enter image description here

Current ideas:

1. Assign a color to each teacher. This way we can easily distinguish
on the calendar grid what teachers are going to teach what.  
2. Add views “Per teacher” and “Per student”. This way we can show only filtered data. I think this is a good approach, since “Show
all” is going to cluttered. (Although we still need “Show all”).  
3. Only allow view by week and by day. I do not see any reason to view this calendar on a monthly basis.  
4. Show “client’s site” classes as semitransparant.  
5. Show details of the appointment on hover.

Again, I don’t think that my ideas are close to the right answer, but maybe there are some calendar design guidelines? Or some smart approach that will make things look nice?
Current ideas will fail on print, especially in black and white. (Maybe use pattern filling for print?).

One more idea is to rotate calendar, so the times are on X axis, while days are on Y axis.

I will appreciate your input.

I was thinking that my color code calendar will look something like this(Rough): but It will become cluttered very fast, I think.

enter image description here

  • Who will be using this calendar? Just teaching staff?
    – Matt Obee
    Commented Feb 15, 2013 at 9:09
  • @MattObee, yes teachers and admins(owners).
    – user194076
    Commented Feb 15, 2013 at 17:25
  • 1
    only assign color to each teacher isn't good idea, because of students with daltonism
    – Xosler
    Commented Feb 15, 2013 at 19:10
  • 1
    Whatever you do, do NOT break the convention. Time is customary along the Y, days along the X axis. Leave bells and whistles for the arts museums... Commented Feb 16, 2013 at 18:49

2 Answers 2


I think part of the problem is that you are trying to cram three dimensions of data (Day, Time, Teacher/Classroom) into two dimensions of the view.

The way around this is to only show two dimensions per view.

So for example, you can show:

  1. All teachers and their assigned classes for a single day, or:
  2. All classes for a single teacher for the whole week

So the daily and weekly views could look like this:


download bmml source – Wireframes created with Balsamiq Mockups

Clicking in an empty slot on the calendar area would start a new "appointment" a la Google Calendar. It would be pre-populated with (for example) the teacher who you were currently viewing.

One last comment: The combo-box to select who/what you are looking at in the weekly view can be laid out like a mega drop-down:


download bmml source

This keeps the "Teachers/Students/Rooms" selection order consistent across daily and weekly views.


To account for a large number of students (as per comment below) I have updated the weekly view slightly. On clicking one of the "Teachers/Students/Rooms" buttons, a select field with search box displays:


download bmml source

  • Alex, thank you for providing a nice solution. I like it a lot, and will try to implement soon. I'm not sure if I understoon "One last comment" correctly. You mean that they can select whatever they want (Teacher, Student, Room) and when Dropdown is collapsed we show "Elsie (Student)". I think the only problem with that is that list of students can be large (100-300). So I guess I will have to add a search as well. Thanks again!
    – user194076
    Commented Feb 17, 2013 at 5:30
  • Glad you like it! I think the mega-dropdown might not work when there are such a large number of students. I'll have a think about another way to do it.
    – Alex
    Commented Feb 17, 2013 at 7:06
  • @user194076 , I have made an edit with my thoughts on an ok way to search through large numbers of students. Hope it helps! P.S. If you like this answer, mark it as accepted :-)
    – Alex
    Commented Feb 17, 2013 at 9:07

Do you need your calendar to show all data at the same time?

I can imagine a solution where you can select what aspect of the planning you'd like to view, and you center your view based on that.

So, if you choose that you want to view the classroom use, you will see the calendar with either a row or a column per class room, and the time on the other axis so you can quickly spot gaps or worse, overlaps in the use. If you want to view the teachers schedules, you do the same, only you put the teachers at the spots where the classrooms used to be. The same goes for student groups.

I assume that a student is only in a single group? If so, then you don't need to worry too much about a view per student, as long as you can quickly match a student to a group.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.