前端日历添加事件
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.
在先前的博客文章中,我详细介绍了如何使用PHP创建基本日历 ,然后向您展示了如何向该日历添加控件 。 这篇文章将详细介绍如何有效地从MySQL表中提取事件并在日历中显示这些事件。
事件构建PHP / SQL (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)) {
$events[$row['event_date']][] = $row;
}
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.
随意使用您想要的任何结构来创建“事件”表。 事件日期可以保存在DATE或DATETIME字段中。 重要的是日期以YYYY-MM-DD格式导出。
CSS (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 {
width:120px;
padding:5px 25px 5px 5px;
border-bottom:1px solid #999;
border-right:1px solid #999;
}
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.
该项目CSS代码需要稍作更改,以适应当天的绝对位置。 我们需要应用绝对定位,以便事件文本不会干扰当天的展示位置。
PHP-绘制日历 (The PHP - Draw Calendar)
PHP注意:使用未定义的常量replace_angles-在第12行的/private/tmp/temp_textmate.keFHeG中假定为'replace_angles'
/* draws a calendar */
function draw_calendar($month,$year,$events = array()){
/* draw table */
$calendar = '<table cellpadding="0" cellspacing="0" class="calendar">';
/* table headings */
$headings = array('Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday');
$calendar.= '<tr class="calendar-row"><td class="calendar-day-head">'.implode('</td><td class="calendar-day-head">',$headings).'</td></tr>';
/* 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.= '<tr class="calendar-row">';
/* print "blank" days until the first of the current week */
for($x = 0; $x < $running_day; $x++):
$calendar.= '<td class="calendar-day-np"> </td>';
$days_in_this_week++;
endfor;
/* keep going with days.... */
for($list_day = 1; $list_day <= $days_in_month; $list_day++):
$calendar.= '<td class="calendar-day"><div style="position:relative;height:100px;">';
/* add in the day number */
$calendar.= '<div class="day-number">'.$list_day.'</div>';
$event_day = $year.'-'.$month.'-'.$list_day;
if(isset($events[$event_day])) {
foreach($events[$event_day] as $event) {
$calendar.= '<div class="event">'.$event['title'].'</div>';
}
}
else {
$calendar.= str_repeat('<p> </p>',2);
}
$calendar.= '</div></td>';
if($running_day == 6):
$calendar.= '</tr>';
if(($day_counter+1) != $days_in_month):
$calendar.= '<tr class="calendar-row">';
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 <= (8 - $days_in_this_week); $x++):
$calendar.= '<td class="calendar-day-np"> </td>';
endfor;
endif;
/* final row */
$calendar.= '</tr>';
/* end the table */
$calendar.= '</table>';
/** DEBUG **/
$calendar = str_replace('</td>','</td>'."\n",$calendar);
$calendar = str_replace('</tr>','</tr>'."\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 name="month" id="month">';
for($x = 1; $x <= 12; $x++) {
$select_month_control.= '<option value="'.$x.'"'.($x != $month ? '' : ' selected="selected"').'>'.date('F',mktime(0,0,0,$x,1,$year)).'</option>';
}
$select_month_control.= '</select>';
/* select year control */
$year_range = 7;
$select_year_control = '<select name="year" id="year">';
for($x = ($year-floor($year_range/2)); $x <= ($year+floor($year_range/2)); $x++) {
$select_year_control.= '<option value="'.$x.'"'.($x != $year ? '' : ' selected="selected"').'>'.$x.'</option>';
}
$select_year_control.= '</select>';
/* "next month" control */
$next_month_link = '<a href="?month='.($month != 12 ? $month + 1 : 1).'&year='.($month != 12 ? $year : $year + 1).'" class="control">Next Month >></a>';
/* "previous month" control */
$previous_month_link = '<a href="?month='.($month != 1 ? $month - 1 : 12).'&year='.($month != 1 ? $year : $year - 1).'" class="control"><< Previous Month</a>';
/* bringing the controls together */
$controls = '<form method="get">'.$select_month_control.$select_year_control.' <input type="submit" name="submit" value="Go" /> '.$previous_month_link.' '.$next_month_link.' </form>';
/* 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 '<h2 style="float:left; padding-right:30px;">'.date('F',mktime(0,0,0,$month,1,$year)).' '.$year.'</h2>';
echo '<div style="float:left;">'.$controls.'</div>';
echo '<div style="clear:both;"></div>';
echo draw_calendar($month,$year,$events);
echo '<br /><br />';
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.
我们在调用draw_calendar函数之前检索给定月份的事件。 这样做可以避免每天查询,避免了27次以上的查询。 events数组是一个key => value数组,其中key是日期,而value是当天的事件数组。 我们将该事件传递给draw_calendar函数,当它到达日显示DIV时,我们运行FOREACH循环以输出任何事件。
Tada! Happy calendar-creating!
多田 创建日历愉快!
前端日历添加事件