HTML日程控件，可以在此基础上做更多的扩展，如实现行程安排等
日历控件，可以在此基础上做更多的扩展，如实现行程安排等 无 htmlhead title日历控件/title meta http-equiv="Content-Type" content="text/html; charset=utf-8"/ meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0
日历控件，可以在此基础上做更多的扩展，如实现行程安排等
<html>
<head>
<title>日历控件</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<style type="text/css">
.rili {
margin: 30px 0px;
overflow: hidden;
text-align: center;
color: #666
}
.low_calendar {
overflow: hidden;
border: 1px solid #c8d2dc;
}
.low_calendar h1 {
width: 100%;
background: #ff6f7e;
font-size: 14px;
height: 30px;
line-height: 30px;
text-align: center;
color: #fff;
font-weight: 100;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
position: relative
}
.calGrid table {
width: 100%;
border-collapse: collapse;
margin: 0;
padding: 0;
}
.calGrid table th {
background-color: #fff;
border-left: 1px solid #whiteSmoke;
font-size: 12px;
height: 30px;
line-height: 30px;
text-align: center;
vertical-align: middle;
color: #999;
color: #505050;
border-bottom: 1px solid #C8C8C8;
}
.calGrid table td {
width: 12%;
height: 40px;
line-height: 40px;
font-size: 16px;
font-weight: 700 text-align : center;
color: #4A5056;
border-bottom: 1px solid #C8C8C8;
border-left: 1px solid #ccc;
position: relative;
overflow: hidden;
cursor: pointer;
text-align: center;
}
.calGrid table td img {
position: absolute;
left: 0;
top: 0;
display: none
}
.calGrid table td.curr img {
display: block
}
.calGrid table td.disable {
color: #ED5565;
}
.calGrid table td:first-child {
border-left: none;
}
.calGrid table tr:last-child td {
border-bottom: none;
}
.calGrid table td.holiday {
font-size: 12px;
}
.calGrid table th.week_day, .calGrid table td.week_day {
color: #ED5565
}
.calGrid table td.curr {
line-height: 25px;
font-size: 13px;
color: #fff;
background: #ff6f7e;
-moz-box-shadow: 2px #7d92a7 inset;
-webkit-box-shadow: 2px #7d92a7 inset;
box-shadow: 2px #7d92a7 dcdeeb;
}
.calGrid table td.curr span {
display: block;
font-size: 12px;
line-height: 10px;
}
.low_calendar h1 .ldate {
width: 25px;
height: 25px;
background: url(images/ldate.png) no-repeat;
float: left;
position: absolute;
top: 2px;
left: 10px;
overflow: hidden;
text-indent: -99999px
}
.low_calendar h1 .rdate {
width: 25px;
height: 25px;
background: url(images/rdate.png) no-repeat;
float: right;
position: absolute;
top: 2px;
right: 10px;
overflow: hidden;
text-indent: -99999px
}
</style>
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<?php
/**
* User: yuluo
* Date: 2015-05-08
* Time: 下午3:08
* Desc:实现生成指定月份的日历信息 在此基础上可以无限遐想和扩展...
*/
date_default_timezone_set("Asia/Shanghai");
$time_now = time(); //strtotime("2015-02-04");
if($_REQUEST["date"]){
$time_now = strtotime($_REQUEST["date"]);
}
function getCurMonthFirstDay($date)
{
return date('Y-m-01', strtotime($date));
}
function getCurMonthLastDay($date)
{
return date('Y-m-d', strtotime(date('Y-m-01', strtotime($date)) . ' +1 month -1 day'));
}
$current_y = date("Y", $time_now);
$current_m = date("m", $time_now);
$next_m = date('Ymd', strtotime(date('Y-m-01', $time_now) . ' +1 month'));
$pre_m = date('Ymd', strtotime(date('Y-m-01', $time_now) . ' -1 month'));
?>
<div class="rili">
<div class="chosedate">
<div class="low_calendar">
<h1><a class="ldate" href="date_ctrl.php?date=<?php echo($pre_m); ?>">上一月</a><span><?php echo($current_y); ?>年<?php echo($current_m); ?>月</span><a class="rdate" href="date_ctrl.php?date=<?php echo($next_m); ?>">下一月</a></h1>
<div class="calGrid">
<table cellspacing="1" cellpadding="1">
<tbody>
<tr>
<th class="week_day">周日</th>
<th>周一</th>
<th>周二</th>
<th>周三</th>
<th>周四</th>
<th>周五</th>
<th class="week_day">周六</th>
</tr>
<?php
//$time_now = strtotime("2015-05-11");
$str_time_now = date("Y-m-d", $time_now); ////////字符串格式的当前时间
$current_month_first_day = getCurMonthFirstDay($str_time_now); /////////当前月的第一天
$current_month_first_w_val = intval(date("w", strtotime($current_month_first_day))); //////当前月第一天是一周的第几天 周日(0)是第一天
$current_month_last_day = getCurMonthLastDay($str_time_now); ////////当前月的最后一天
$current_week_val = date("w", $time_now);
$current_day_val = date("j", $time_now);
$last_day_val = date("j", strtotime($current_month_last_day)); ////////当前月最后一天的天索引
$strart_time = false;
$int_day_val = 1;
$ctrl_step = $last_day_val + $current_month_first_w_val; ////////控件结束的位置索引
for ($i = 0; $i < 42; $i++) {
if($i == 0){ ?>
<tr>
<?php }
if ($i == $current_month_first_w_val) {
$strart_time = true;
}
if ($i >= $ctrl_step) {
$strart_time = false;
}
if ($strart_time) {
$tem_current_date = date("Y-m-d",strtotime(date("Y-m", $time_now).("-").strval($int_day_val)));
$str_td_class = "";
if (($i%7)==0 || (($i + 1) % 7) == 0){
$str_td_class = "week_day";
}
?>
<td date="<?php echo($tem_current_date); ?>" class="<?php echo($str_td_class); ?>"><?php echo($int_day_val); ?></td>
<?php
$int_day_val++;
} else {
?>
<td class="null"> </td>
<?php
}
if ((($i + 1) % 7) == 0) {
?>
</tr>
<?php
}
}
?>
</tbody>
</table>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function(){
console.log($("td [date='2015-05-12']"));
});
</script>
</body>
</html>
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1392
52
What should I do if the win11 dual-screen calendar does not exist on the second monitor?
Jun 12, 2024 pm 05:47 PM
An important tool for organizing your daily work and routine in Windows 11 is the display of time and date in the taskbar. This feature is usually located in the lower right corner of the screen and gives you instant access to the time and date. By clicking this area, you can bring up your calendar, making it easier to check upcoming appointments and dates without having to open a separate app. However, if you use multiple monitors, you may run into issues with this feature. Specifically, while the clock and date appear on the taskbar on all connected monitors, the ability to click the date and time on a second monitor to display the calendar is unavailable. As of now, this feature only works on the main display - it's unlike Windows 10, where clicking on any
Win10 calendar displays week numbers
Jan 04, 2024 am 08:41 AM
Many users want to use the win10 calendar tool to check the current number of days, but the calendar does not automatically display this function. In fact, we only need to make simple settings to see the cumulative number of weeks this year ~ win10 calendar displays weeks Digital setting tutorial: 1. Enter calendar in the search in the lower left corner of the desktop and open the application. 2. In the open calendar application, click the "gear" icon in the lower left corner, and the settings will pop up on the right. We click "Calendar Settings" 3. Continue in the open calendar settings, find "Week Number" and then change the week Just adjust the number option to "the first day of the year". 4. After completing the above settings, click "Week" to see this year's week number statistics.
From start to finish: How to use php extension cURL to make HTTP requests
Jul 29, 2023 pm 05:07 PM
From start to finish: How to use php extension cURL for HTTP requests Introduction: In web development, it is often necessary to communicate with third-party APIs or other remote servers. Using cURL to make HTTP requests is a common and powerful way. This article will introduce how to use PHP to extend cURL to perform HTTP requests, and provide some practical code examples. 1. Preparation First, make sure that php has the cURL extension installed. You can execute php-m|grepcurl on the command line to check
Outlook calendar not syncing;
Mar 26, 2024 am 09:36 AM
If your Outlook calendar cannot sync with Google Calendar, Teams, iPhone, Android, Zoom, Office account, etc., please follow the steps below to resolve the issue. The calendar app can be connected to other calendar services such as Google Calendar, iPhone, Android, Microsoft Office 365, etc. This is very useful because it can sync automatically. But what if OutlookCalendar fails to sync with third-party calendars? Possible reasons could be selecting the wrong calendar for synchronization, calendar not visible, background application interference, outdated Outlook application or calendar application, etc. Preliminary fix for Outlook calendar not syncing
Can't open the calendar in the lower right corner of win10
Dec 26, 2023 pm 05:07 PM
Some friends who use the win0 system have encountered the situation where the win10 calendar cannot be opened. This is just a normal computer glitch. It can be solved in the privacy settings of the win10 system. Today, the editor has brought a detailed solution. Below Let’s take a look. Solution to the problem that the calendar cannot be opened in the lower right corner of win10 1. Click Start in the win10 system → click the program list button above → find Pinyin (Chinese) R → Calendar 2. When using it for the first time, new events may not be opened (mouse If you lean up, there will be no dark blue selected), you can set it in privacy. Click the three-bar icon in the upper left corner of the desktop → there will be a settings menu at the bottom; 3. Click Privacy in the pop-up interface; 4. If you have used settings before, you can click on the left
What should I do if there are no pop-up reminders for calendar events in Win10? How to recover if calendar event reminders are gone in Win10
Jun 09, 2024 pm 02:52 PM
The calendar can help users record your schedule and even set reminders. However, many users are asking what to do if calendar event reminders do not pop up in Windows 10? Users can first check the Windows update status or clear the Windows App Store cache to perform the operation. Let this site carefully introduce to users the analysis of the problem of Win10 calendar event reminder not popping up. To add calendar events, click the "Calendar" program in the system menu. Click the left mouse button on a date in the calendar. Enter the event name and reminder time in the editing window, and click the "Save" button to add the event. Solving the problem of win10 calendar event reminder not popping up
No Period Lost Purchasing Office: New calendar and birthday series peripherals!
Feb 29, 2024 pm 12:00 PM
The Lost Purchasing Office is confirmed to be updated at 11 am on February 28th. Players can go to Taobao to search the Purchasing Office and select the store category to purchase. This time we bring you the MBCC birthday party series and 2024 Desk Calendar peripherals. Come together. Take a look at the product details this time. No Period Lost Purchasing Office: New calendar and birthday series peripherals! There is something new in the Lost Procurement Office! - Pre-sale time: February 28, 2024 11:00 - March 13, 2024 23:59 Purchase address: Taobao search [Unexpected Lost Purchasing Office] Select [Store] category to enter the store for purchase; peripheral introduction: The new peripherals released this time are MBCC birthday party series and 2024 desk calendar peripherals. Please click on the long image for details. The Purchasing Office introduces new peripherals—MBCC students
Extensions and third-party modules for PHP functions
Apr 13, 2024 pm 02:12 PM
To extend PHP function functionality, you can use extensions and third-party modules. Extensions provide additional functions and classes that can be installed and enabled through the pecl package manager. Third-party modules provide specific functionality and can be installed through the Composer package manager. Practical examples include using extensions to parse complex JSON data and using modules to validate data.
