1

First, I would like to build a simple calendar with event.

I'm using flexbox to build the layout of my calendar:
https://jsfiddle.net/97c0aLb8/1/

My row is the following actually:

<div class="week">
    <div class="day">Room #101</div>
    <div class="day" id="2018-05-01_1"></div>
    <div class="day" id="2018-05-02_1"></div>
    <div class="day" id="2018-05-03_1"></div>
    <div class="day" id="2018-05-04_1"></div>
    <div class="day" id="2018-05-05_1"></div>
    <div class="day" id="2018-05-06_1"></div>
    <div class="day" id="2018-05-07_1"></div>
    <div class="day" id="2018-05-08_1"></div>
    <div class="day" id="2018-05-09_1"></div>
    <div class="day" id="2018-05-10_1"></div>
</div>

How can I insert another div on top of my layout and cover 2 <div class="day">...</div>.

Here an example

How can we make this please ?

  • Have you considered using flexbox to solve this issue? Depending on the reason you need a div in a table, flexbox could be more dynamic and flexible for your use case. – Teyler Halama May 01 '18 at 19:41
  • You cannot add divs inside of a `table` unless it's inside the `td` tags. – AndrewL64 May 01 '18 at 19:53
  • @AndrewL, so I will need to convert my table into divs ? –  May 01 '18 at 19:53
  • That would be a good idea yes. – AndrewL64 May 01 '18 at 19:54
  • @AndrewL, so one div per `` ? –  May 01 '18 at 19:55
  • I would recommend doing away with tables altogether and use flex box divs instead as @TeylerHalama mentioned. – AndrewL64 May 01 '18 at 19:57
  • I have personally developed a calendar application using flex box and it is honestly the best thing to happen to the web in years. Sticking with divs in tables is going to give you a headache the entire development process and force your code not to be clean. – Teyler Halama May 01 '18 at 19:59
  • https://css-tricks.com/snippets/css/a-guide-to-flexbox/ – Teyler Halama May 01 '18 at 20:00
  • @TeylerHalama: so I put in consideration your idea and successfully merge my code to flex box. Could you please help me regarding my question? Thanks in advance. –  May 02 '18 at 01:16
  • @PacPac Hey I am happy to hear! It's looking slick. I don't fully understand the question, are you trying to put the rooms in the days? – Teyler Halama May 02 '18 at 01:22
  • @TeylerHalama, supposing I have a booking for room 101, from 2018-05-03 to 2018-05-05, I would like to insert a div that will cover the given dates in my calendar. –  May 02 '18 at 01:24

1 Answers1

2

Interesting question and an issue I never thought about before. It seems like you have to restructure the way you are thinking about the application. Instead of thinking about the days being the focus (Like we do by default) in table format, we need to think of it as focused by the events. That way you can do things like span events over multiple days. There is a really amazing post that covers this in more details here. The post even has a great fiddle to mess around with.

HTML markup for multi-day calendar events

If you were to go about it day focused, you would have to do some layout ghosting and it would cause a lot of mess and unclean and hard to manage code. Hope this helps, man! This is a fascinating project and an interesting problem to solve :)

Cheers!

Teyler Halama
  • 103
  • 9