Geek Answers Handbook

Create a weekly schedule using CSS / HTML

I am trying to create a weekly class schedule for a yoga studio. I created a static version using a table, which you can see at:

http://www.studioleisure.com/classes.php

Note: ^^ This web page now contains a ready-made version of HTML that was created using answers to this question.

I have a problem with classes that start 15 minutes after an hour or lasting more than an hour, and it's pretty difficult to create PHP for this version.

I'm just wondering if anyone has any ideas to create one that will look similar but make it easier to code PHP for.

+7
source share
3 answers

I would lose the table and use only the columns. Then I placed the classes with CSS ( position:absolute ) and calculated the top value depending on their start time and "height" depending on their length. Horizontal lines can be achieved using a repeating background image. Labels on the left can be placed just like you put classes.

HTML might look something like this:

 <ul> <!-- Monday: --> <li> <strong>Monday</strong> <ul class="classes"> <li style="top:200px; height:100px;"> <span>10:30 - 11:45</span> Class title </li> <li> <!-- More classes here... --> </li> </ul> </li> <li> <!-- Other days here... --> </li> </ul> <ul class="labels"> <li style="top:180px">10:00</li> <!-- More labels here... --> </ul>
+8
source

Good markup. But you are right - to do this with fine detail will lead to the monster of the table (and the accompanying code to create it). This is doable, but there is an easier way, although it is not so neat:

Create the table as usual, but make it empty. However, set a fixed width / height for each row and column. Then use absolute positioning to place calendar entries on top of the table . Presto - it looks the same, but you can put records with minimal dots if you want.

The disadvantage of this is that copy-paste will not work (very well) on this beast, and I don’t know what it will do for SEO and accessibility. Probably nothing good. Therefore, if these two are important to you, you will have to resort to workarounds (although I think there are ways to use the scheme and have good SEO / accessibility).

Added: Oh, and I just realized that you would also have to look at crowded texts. Table cells will automatically expand, but absolutely positioned DIVs will not.

Added 2: Hey, here is the idea: use relative positioning to slightly shift the records. Instead of writing text directly in cells, write them in SPAN, and then relatively position it so that it moves for 15 minutes. Again, this requires a fixed cell width and height, and overflow will be a problem, but SEO / accessibility will not suffer, and copy-paste will work as expected.

+1
source

Below is a weekly schedule template that I created.

 https://github.com/NisalSP9/Weekly-time-schedule-template-jquery

And this example works.

 https://codepen.io/nisalsp9/pen/QqqvwZ?editors=1111
0
source

More articles:


All Articles