Event Calendar

Add Events to the PHP Calendar

In a previous blog post I detailed how to create a basic calendar using PHP and then showed you how to add controls to that calendar. This post will detail how you may efficiently pull events from a MySQL table and display those events within the calendar.

The Event-Building PHP / SQL

$events = array(); $query = «SELECT title, DATE_FORMAT(event_date,’%Y-%m-%D’) AS event_date FROM events WHERE event_date LIKE ‘$year-$month%'»; $result = mysql_query($query,$db_link) or die(‘cannot get results!’); while($row = mysql_fetch_assoc($result))

Feel free to create the «events» table with any structure you’d like. The event date may be held in a DATE or DATETIME field. What’s important is that the date is exported in YYYY-MM-DD format.

The CSS

div.day-number < background:#999; position:absolute; z-index:2; top:-5px; right:-25px; padding:5px; color:#fff; font-weight:bold; width:20px; text-align:center; >td.calendar-day, td.calendar-day-np

The CSS code for the item will need to change slightly to accommodate for absolute positioning of the day. We need to apply absolute positioning so that the event text doesn’t disrupt the placement of the day.

The PHP — Draw Calendar

PHP Notice: Use of undefined constant replace_angles — assumed ‘replace_angles’ in /private/tmp/temp_textmate.keFHeG on line 12

/* draws a calendar */ function draw_calendar($month,$year,$events = array())< /* draw table */ $calendar = ''; /* table headings */ $headings = array('Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'); $calendar.= ''; /* days and weeks vars now . */ $running_day = date('w',mktime(0,0,0,$month,1,$year)); $days_in_month = date('t',mktime(0,0,0,$month,1,$year)); $days_in_this_week = 1; $day_counter = 0; $dates_array = array(); /* row for week one */ $calendar.= ''; /* print "blank" days until the first of the current week */ for($x = 0; $x < $running_day; $x++): $calendar.= ''; $days_in_this_week++; endfor; /* keep going with days. */ for($list_day = 1; $list_day 
'; /* add in the day number */ $calendar.= '
'.$list_day.'
'; $event_day = $year.'-'.$month.'-'.$list_day; if(isset($events[$event_day])) < foreach($events[$event_day] as $event) < $calendar.= '
'.$event['title'].'
'; > > else < $calendar.= str_repeat('

 

',2); > $calendar.= '
'; if($running_day == 6): $calendar.= ''; if(($day_counter+1) != $days_in_month): $calendar.= ''; endif; $running_day = -1; $days_in_this_week = 0; endif; $days_in_this_week++; $running_day++; $day_counter++; endfor; /* finish the rest of the days in the week */ if($days_in_this_week < 8): for($x = 1; $x  '; endfor; endif; /* final row */ $calendar.= ''; /* end the table */ $calendar.= '
'.implode('',$headings).'
 
'; /** DEBUG **/ $calendar = str_replace('',''."\n",$calendar); $calendar = str_replace('',''."\n",$calendar); /* all done, return result */ return $calendar; > function random_number() < srand(time()); return (rand() % 7); >/* date settings */ $month = (int) ($_GET['month'] ? $_GET['month'] : date('m')); $year = (int) ($_GET['year'] ? $_GET['year'] : date('Y')); /* select month control */ $select_month_control = ''; /* select year control */ $year_range = 7; $select_year_control = ''; /* "next month" control */ $next_month_link = 'Next Month >>'; /* "previous month" control */ $previous_month_link = '<< Previous Month'; /* bringing the controls together */ $controls = '
'.$select_month_control.$select_year_control.'       '.$previous_month_link.'     '.$next_month_link.'
'; /* get all events for the given month */ $events = array(); $query = "SELECT title, DATE_FORMAT(event_date,'%Y-%m-%D') AS event_date FROM events WHERE event_date LIKE '$year-$month%'"; $result = mysql_query($query,$db_link) or die('cannot get results!'); while($row = mysql_fetch_assoc($result)) < $events[$row['event_date']][] = $row; >echo '

'.date('F',mktime(0,0,0,$month,1,$year)).' '.$year.'

'; echo '
'.$controls.'
'; echo ' '; echo draw_calendar($month,$year,$events); echo '

';

We retrieve the events for the given month BEFORE calling the draw_calendar function. Doing so will allow us to avoid 27+ queries by not querying for each day. The events array is a key=>value array where the key is the date and the value is an array of events for that day. We pass that event into the draw_calendar function and when it gets to the day display DIV we run a FOREACH loop to output any events.

Читайте также:  What is syntax error in javascript

Tada! Happy calendar-creating!

Источник

Event Calendar with PHP

Event Calendar with PHP

In this article, I have developed an event calendar class that will populate all the days in a month based on the specified date, along with the events that we can add to the calendar.

While PHP doesn’t include a built-in calendar API per se (without including additional extensions), it does, however, give you a broad range of date and time methods that we can use to manipulate. In addition, we can use these methods to populate the pages showing the days, weeks, and months of a particular year.

Why should I use the calendar class?

It’s entirely up to you and your requirements. I have decided to take it upon myself to write my own class as I work on many projects that require an event-based calendar system. I’ve searched countless times for a minimal, dependency-free, and modern library. But couldn’t find one that I could seamlessly integrate with my projects. Therefore, I created a PHP class that can easily be integrated with any project, whether the project’s size is small or large.

Source

Create a new file Calendar.php and add the following code:

active_year = $date != null ? date('Y', strtotime($date)) : date('Y'); $this->active_month = $date != null ? date('m', strtotime($date)) : date('m'); $this->active_day = $date != null ? date('d', strtotime($date)) : date('d'); > public function add_event($txt, $date, $days = 1, $color = '') < $color = $color ? ' ' . $color : $color; $this->events[] = [$txt, $date, $days, $color]; > public function __toString() < $num_days = date('t', strtotime($this->active_day . '-' . $this->active_month . '-' . $this->active_year)); $num_days_last_month = date('j', strtotime('last day of previous month', strtotime($this->active_day . '-' . $this->active_month . '-' . $this->active_year))); $days = [0 => 'Sun', 1 => 'Mon', 2 => 'Tue', 3 => 'Wed', 4 => 'Thu', 5 => 'Fri', 6 => 'Sat']; $first_day_of_week = array_search(date('D', strtotime($this->active_year . '-' . $this->active_month . '-1')), $days); $html = '
active_year . '-' . $this->active_month . '-' . $this->active_day)); $html .= '
'; $html .= '
'; $html .= '
'; > for ($i = $first_day_of_week; $i > 0; $i--) < $html .= '
' . ($num_days_last_month-$i+1) . '
'; > for ($i = 1; $i active_day) < $selected = ' selected'; >$html .= '
'; $html .= '' . $i . ''; foreach ($this->events as $event) < for ($d = 0; $d active_year . '-' . $this->active_month . '-' . $i . ' -' . $d . ' day')) == date('y-m-d', strtotime($event[1]))) < $html .= '
'; $html .= $event[0]; $html .= '
'; > > > $html .= '
'; > for ($i = 1; $i ' . $i . '
'; > $html .= '
'; $html .= '
'; return $html; > > ?>

Add the following code to your stylesheet (CSS) or create a new file calendar.css:

.calendar < display: flex; flex-flow: column; >.calendar .header .month-year < font-size: 20px; font-weight: bold; color: #636e73; padding: 20px 0; >.calendar .days < display: flex; flex-flow: wrap; >.calendar .days .day_name < width: calc(100% / 7); border-right: 1px solid #2c7aca; padding: 20px; text-transform: uppercase; font-size: 12px; font-weight: bold; color: #818589; color: #fff; background-color: #448cd6; >.calendar .days .day_name:nth-child(7) < border: none; >.calendar .days .day_num < display: flex; flex-flow: column; width: calc(100% / 7); border-right: 1px solid #e6e9ea; border-bottom: 1px solid #e6e9ea; padding: 15px; font-weight: bold; color: #7c878d; cursor: pointer; min-height: 100px; >.calendar .days .day_num span < display: inline-flex; width: 30px; font-size: 14px; >.calendar .days .day_num .event < margin-top: 10px; font-weight: 500; font-size: 14px; padding: 3px 6px; border-radius: 4px; background-color: #f7c30d; color: #fff; word-wrap: break-word; >.calendar .days .day_num .event.green < background-color: #51ce57; >.calendar .days .day_num .event.blue < background-color: #518fce; >.calendar .days .day_num .event.red < background-color: #ce5151; >.calendar .days .day_num:nth-child(7n+1) < border-left: 1px solid #e6e9ea; >.calendar .days .day_num:hover < background-color: #fdfdfd; >.calendar .days .day_num.ignore < background-color: #fdfdfd; color: #ced2d4; cursor: inherit; >.calendar .days .day_num.selected

How To Use

Include the class in your project and create a new instance.

include 'Calendar.php'; $calendar = new Calendar();

We can specify a date while creating a new instance:

include 'Calendar.php'; $calendar = new Calendar('2023-05-12');

Add new events to the calendar:

$calendar->add_event('Holiday', '2023-05-14');

We can specify the number of days the event should last by binding an additional value to the add_event method:

$calendar->add_event('Holiday', '2023-05-14', 7); // Event will last for 7 days

We can also change the color:

$calendar->add_event('Holiday', '2023-05-14', 7, 'red');

Only red, blue, and green will work (the default is orange). You can add more colors to the CSS file.

We can populate the calendar in HTML format with the following code:

Example Code

Create a new file example.php and add the following code:

add_event('Birthday', '2023-05-03', 1, 'green'); $calendar->add_event('Doctors', '2023-05-04', 1, 'red'); $calendar->add_event('Holiday', '2023-05-16', 7); ?>        

The stylesheet (style.css) for our example page:

* < box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif; font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; >body < background-color: #FFFFFF; margin: 0; >.navtop < background-color: #3b4656; height: 60px; width: 100%; border: 0; >.navtop div < display: flex; margin: 0 auto; width: 800px; height: 100%; >.navtop div h1, .navtop div a < display: inline-flex; align-items: center; >.navtop div h1 < flex: 1; font-size: 24px; padding: 0; margin: 0; color: #ebedee; font-weight: normal; >.navtop div a < padding: 0 20px; text-decoration: none; color: #c4c8cc; font-weight: bold; >.navtop div a i < padding: 2px 8px 0 0; >.navtop div a:hover < color: #ebedee; >.content < width: 800px; margin: 0 auto; >.content h2

And now, if we navigate to our example page, it will appear similar to the following:

Event Calendar PHP

If you don’t see any events populated on the calendar, make sure the dates are correct, and your server timezone is set correctly. You can change the timezone with the below code.

date_default_timezone_set('America/Los_Angeles');

The full list of supported timezones are available here.

Conclusion

While the calendar class I’ve created is not a complete solution, it will most definitely help you integrate the class into any project seamlessly and extend the base code.

Drop a comment below and let me know if you encounter any issues with the class. Don’t forget to follow us on social media and share our articles, as this will help our website grow, and we can provide more quality content.

Released under the MIT License. If you’re going to redistribute the code, please include my name and link to this article. Thanks!

If you would like to support us, consider purchasing the advanced event calendar system below as it will greatly help us create more tutorials and keep our website up and running. The advanced package includes improved code and more features.

Источник

Оцените статью