Reputation: 684
We are currently in the process of adding an event scheduler for our web control panel to allow users of the company to post their work events and track reports and the like.
A little background
The database with the events is structured to include the following:
cid, ceventpostedby, ceventstart, ceventend, ceventday, ceventmonth, ceventyear,
ceventtitle, ceventdesc, cuserdomain, ceventlocation, clastupdated
With a typical entry looking something like the following:
1, 1, 8:30, 13:30, 30, 1, 2017, Some Event, Event Desc, example.com, Some City, 142000000
These events are loaded into a calendar that only users in the same domain group (and root admins) can see, to keep them separate for different web groups in the system. This is defined by the cuserdomain
field. A typical calendar will look something like the following picture:
When a user clicks on a day they are taken to a page that will show the current daily events if any are set or show a blank schedule with 7AM - 7PM on it (times are chosen as users work office hours and events shouldn't be booked later or earlier than these times). The page looks like the following when it is empty and no events are booked:
Now some PHP..
So the event page is checking if there is an event present on that day and setting a yes or no. If it does have events, it should print them out into the right time box. If not, just show all the time slots between the set 7AM-7PM (or 12 hours). We are using the following code
for($i = 0; $i < 12; $i++) {
if($starting_time == 12) {
// default is AM, change to pm after noon
$time_type = "PM";
}
if($starting_time > 12) {
// reset the time to 1 instead of 13 for user ease
$starting_time = "1";
}
if(mysqli_num_rows($schedule_events_query) > 0) {
while($event_result = mysqli_fetch_array($schedule_events_query)) {
$time_start = $event_result['ceventstart'];
$time_end = $event_result['ceventend'];
$time_start = explode(":", $time_start);
$time_end = explode(":", $time_end);
// CODE SHOULD GO HERE TO DISPLAY THIS EVENT
}
} else {
// Using custom template engine we call the empty blocks 12 times
// since there was no event scheduled for today.
echo $x10->template->extract("calendar_empty_schedule", $starting_time, $time_type);
}
$starting_time++;
}
And finally the problem / question
If an event is booked on that day or even multiple events, how can I print them so they fill in the blocks on their time start and stop? So far simply printing a block only prints one block per event and doesn't show the rest of the days hours. I also don't know how to go about showing the specific blocks for each event as different and then showing the rest. I'm sure it's not a difficult thing to produce but I can't seem to wrap my mind around it as I've spent so much time on this panel by myself already that I feel numb (lol). Any suggestions are welcome and help appreciated. I worked hard making this post contain as much data as possible. Here is an html snippet of a day block also for reference
<div class="schedule_item_row">
<div class="time">
<div class="time_smaller">
<div class="time_smaller_item">
<div style="padding-top: 13px;">00</div>
</div>
<div class="time_smaller_item">
<div style="padding-top: 13px;">30</div>
</div>
</div>
<div style="padding-top: 32px;">8 AM</div>
</div>
<div class="schedule_info">
<div class="schedule_block">
<div style="padding: 13px;">
</div>
</div>
<div class="schedule_block">
<div style="padding: 13px;">
</div>
</div>
</div>
<div class="clear"></div>
</div>
Upvotes: 0
Views: 3201
Reputation: 8660
I did a lot of works with event and dates and i can tell you is it not a simple task. I highly suggest using a Javascript plugins to manage your calendar, I use fullCalendar.
FullCalendar is a simple, complete Javascript plugins that can do whatever you want. I assumed you are familiar with Jquery as well. If not, here are a few tutorial to get started. It will really improve the quality of your app.
Gatting Started with fullCalendar
Jquery tutorial on W3C
Upvotes: 1