当前位置:首页 > PHP

php实现日历周末变红

2026-01-29 05:22:46PHP

实现日历周末变红的方法

使用PHP实现日历中周末日期显示为红色,可以通过判断日期是否为周六或周日,然后应用CSS样式来实现。以下是具体步骤:

获取当前月份的天数和第一天是星期几

$year = date('Y');
$month = date('m');
$days_in_month = date('t', mktime(0, 0, 0, $month, 1, $year));
$first_day = date('w', mktime(0, 0, 0, $month, 1, $year));

生成日历表格

echo '<table border="1">';
echo '<tr><th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th></tr>';
$day_count = 1;
echo '<tr>';
for ($i = 0; $i < 7; $i++) {
    if ($i < $first_day) {
        echo '<td></td>';
    } else {
        $current_date = "$year-$month-$day_count";
        $day_of_week = date('w', strtotime($current_date));
        $style = ($day_of_week == 0 || $day_of_week == 6) ? 'style="color:red;"' : '';
        echo "<td $style>$day_count</td>";
        $day_count++;
    }
}
echo '</tr>';

填充剩余日期

while ($day_count <= $days_in_month) {
    echo '<tr>';
    for ($i = 0; $i < 7; $i++) {
        if ($day_count > $days_in_month) {
            echo '<td></td>';
        } else {
            $current_date = "$year-$month-$day_count";
            $day_of_week = date('w', strtotime($current_date));
            $style = ($day_of_week == 0 || $day_of_week == 6) ? 'style="color:red;"' : '';
            echo "<td $style>$day_count</td>";
            $day_count++;
        }
    }
    echo '</tr>';
}
echo '</table>';

使用CSS样式优化

可以在HTML头部定义CSS样式,使代码更清晰:

<style>
    .weekend {
        color: red;
    }
</style>

然后在PHP代码中动态添加类:

php实现日历周末变红

$day_of_week = date('w', strtotime($current_date));
$class = ($day_of_week == 0 || $day_of_week == 6) ? 'weekend' : '';
echo "<td class='$class'>$day_count</td>";

完整示例代码

<?php
$year = date('Y');
$month = date('m');
$days_in_month = date('t', mktime(0, 0, 0, $month, 1, $year));
$first_day = date('w', mktime(0, 0, 0, $month, 1, $year));
?>
<style>
    .weekend {
        color: red;
    }
    table {
        border-collapse: collapse;
    }
    td, th {
        padding: 8px;
        text-align: center;
    }
</style>
<table border="1">
    <tr>
        <th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th>
    </tr>
    <tr>
        <?php
        $day_count = 1;
        for ($i = 0; $i < 7; $i++) {
            if ($i < $first_day) {
                echo '<td></td>';
            } else {
                $current_date = "$year-$month-$day_count";
                $day_of_week = date('w', strtotime($current_date));
                $class = ($day_of_week == 0 || $day_of_week == 6) ? 'weekend' : '';
                echo "<td class='$class'>$day_count</td>";
                $day_count++;
            }
        }
        ?>
    </tr>
    <?php
    while ($day_count <= $days_in_month) {
        echo '<tr>';
        for ($i = 0; $i < 7; $i++) {
            if ($day_count > $days_in_month) {
                echo '<td></td>';
            } else {
                $current_date = "$year-$month-$day_count";
                $day_of_week = date('w', strtotime($current_date));
                $class = ($day_of_week == 0 || $day_of_week == 6) ? 'weekend' : '';
                echo "<td class='$class'>$day_count</td>";
                $day_count++;
            }
        }
        echo '</tr>';
    }
    ?>
</table>

注意事项

  • 代码中的date('w')返回星期几的数字,0表示周日,6表示周六。
  • 可以根据需要调整CSS样式,比如改变字体大小、背景色等。
  • 如果需要显示其他月份的日历,可以修改$year$month变量的值。

标签: 变红日历
分享给朋友:

相关文章

vue实现每日签到日历

vue实现每日签到日历

实现每日签到日历的基本思路 使用Vue实现每日签到日历需要结合日期处理和组件化设计。核心功能包括生成当月日历数据、标记签到状态以及交互逻辑。 日历数据生成 通过JavaScript的Date对象处理…

vue实现全年日历功能

vue实现全年日历功能

实现全年日历功能 在Vue中实现全年日历功能,可以通过组合多个月份日历组件或使用第三方库来简化开发。以下是两种常见方法: 使用第三方库(如FullCalendar) 安装FullCalendar V…

vue滚动实现日历组件

vue滚动实现日历组件

实现思路 基于Vue实现滚动日历组件的核心在于动态生成日期数据,并通过CSS和触摸事件实现平滑滚动效果。关键在于处理日期计算、渲染优化和交互逻辑。 基础结构设计 <template>…

vue3实现日历

vue3实现日历

Vue3 日历组件实现方法 基础日历结构 使用Vue3的Composition API可以快速构建日历核心逻辑。以下代码展示如何生成当月日历网格: <script setup> impo…

vue实现iview日历显示

vue实现iview日历显示

实现步骤 安装必要的依赖库iview和vue。通过npm或yarn进行安装: npm install iview vue 在main.js中引入iview并注册组件: import Vue fro…

js日历实现

js日历实现

实现日历的基本思路 日历的核心功能是展示日期,并允许用户选择日期。需要处理年、月、日的计算,以及界面布局。 获取当前日期 使用 Date 对象获取当前日期信息: const date = new…