AJAX Events Calendar for PHP AJAX - UI for events spanning multiple days
I created a PHP calendar system and did pretty much everything, but not sure how to deal with a UI issue related to how events stretched out for a couple of days. I want to be able to stretch an event that stretches a couple of days into a div that spans those days in the calendar. Basically I would like to know how to achieve what these guys have achieved with an event that stretches from 21 to 22 amid a yellow div .
I'm trying to figure out how I can do this with PHP, but I feel like maybe I'm trying to go wrong. Perhaps this is done with javascript?
source to share
Indeed, it will take quite a long time to explain how to do this. I can give you some general pointers, however ...
Basically, in the example you provided, the authors of this calendar used absolutely positioned divs that lay above the calendar. If you open Firebug in Firefox and "inspect an item" on one of the spans, and then look at the item as the browser resizes, you will notice that they turn yellow. This is because JavaScript actively overrides elements when elements are added or when the page is resized. I tried to do something similar to this for a while and eventually gave up due to its complexity and unnecessary cumbersomeness.
In the end I decided to go against my strong anti-table mentality and used the attribute of colspan
elements <td>
in the table itself. Each row of events is <tr>
, and each event is equal <td>
. Because it <td>
can span multiple "columns" using the attribute colspan
.
So, to break it ...
Calendar - <div>
. Every week there is another 100% page <div>
that contains two tables:
- The first table just contains the cell borders to display the calendar.
- The second contains the numbers of the day, events, etc.
In the second table, the first row contains 7 columns (1 for each day of the week). All tertiary lines contain only the number of lines needed to display their events. So a week that only has 1 event, for example Thursday that spans 2 days (Thursday to Friday), will have 6 columns:
This line will look something like this:
<tr>
<td class="no-event"></td> <!-- Sunday -->
<td class="no-event"></td> <!-- Monday -->
<td class="no-event"></td> <!-- Tuesday -->
<td class="no-event"></td> <!-- Wednesday -->
<td class="no-event" colspan="2"> <!-- Thursday through Friday -->
<div class="some-styling-class">Vacation to Orlando!</div>
</td>
<td class="no-event"></td> <!-- Saturday -->
</tr>
Note that there are only 6 columns ... (since event c colspan="2"
takes up 2 columns).
Each table is positioned fixedly on the parent "weekly" div ... the first has a lower z-index so that the second table (events, etc.) will appear at the top and across the cell border calendar.
This is actually what Google uses to create their Google Calendars. It's actually pretty elegant, easy to work with, and there's crazy little javascript to write. The hardest thing is to wrap an event on, say, Thursday by a week, say, Wednesday, another week (since you have to make n number of caps <td>
depending on the number of weeks covered by the visible calendar space).
So my suggestion would be to research the structure of Google G-Cal tables and see what you can extrapolate from that. The easy way is to just copy all the HTML from it using Firebug and paste it into the editor, then just play around until you figure out how it works.
I hope what I've shown helps. Good luck dude.
source to share
How Google Calendar solves this problem, believe it or not, through tables. This is a little more complicated (they have one table for the calendar grid and then on top of the top another table for events inside), but in a basic approach, you would use multiple rows for each calendar window and put one event per row, per column. Then when you want to stretch an event over several days, you simply use colspan on the table cell for that particular event. Something like that:
===============================
|| Monday || Tuesday ||
===============================
|| Evt 1 || Evt 2 || ...
-------------------------------
|| Evt 3 (colspan=2) ||
-------------------------------
|| || ||
------------------------------- ...
|| || ||
===============================
|| Monday || Tuesday ||
===============================
...
Where the double lines represent borders you are actually rendering and the individual lines represent invisible borders between lines. In this example, you will have 4 rows in the calendar grid (so you can have a maximum of 4 events per day).
You can achieve all of this from PHP by carefully rendering HTML and using CSS.
Something else I would recommend is, as Michael said, to learn Google Calendar, but a much better way than looking at the code is to get Firefox (you hopefully already did it), and install the Firebug extension ( which you also hopefully already have). Then go to the Firebug menu and select "Inspect element" and click on one of the events in the calendar and examine the structure from there.
source to share
The problem with using a single div spanning multiple "cells" is that you have to deal with line breaks. Let's say an event runs from Thursday to Tuesday, but every week (starting Monday) will get its own row.
An alternative solution would be to use multiple divs and set a separate class for the first and last days of the event. Something like...
<div class="event01 first">(text)</div>
<div class="event01"></div> <!-- repeat -->
<div class="event01 last"></div>
Of course, the downside to this would be that the description would be limited to the first div. Hence, a combination of the two is likely to work best; one div from the start to the end of the week, a second (and possibly a third, etc.) to the end date of the event.
Or, in the case of tables, you could of course combine Tekahera's answer:
<td class="event01 first last">1-day event</td>
<td class="event01 first">Multi-day event</td>
<td class="event01"></td>
<td class="event01 last"></td>
In both examples, the "event01" class will set the background and top / bottom borders, while the "first" and "last" classes will set the left and right borders respectively. (By default they will be 0).
source to share