CODEWITHSUNDEEP
javascriptphphtml
user9727179
user9727179

Reputation:

Insert a div into another with PHP or JS

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 ?

Upvotes: 1

Views: 64

Answers (1)

user5880661
user5880661

Reputation:

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!

Upvotes: 2

Related Questions