یک تقویم ساده در html. چگونه یک تقویم php برای ماه و سال بنویسیم؟ تقویم php برای یک سال

طراحی تقویم

در دوره های آموزشی جاوا اسکریپت ما گاهی اوقات به موضوع ساخت تقویم HTML می پردازیم. برنامه‌ریزی چارچوب تقویم بسیار سریع است، اما من نمی‌خواهم وقت خود را برای طراحی آن با سبک‌های CSS تلف کنم، بنابراین تصمیم گرفته شد که این سبک‌ها را از قبل در یک پست وبلاگ جداگانه برای کاربرد سریع بیشتر بنویسم. اجازه دهید یک تقویم برای جولای 2084 داشته باشیم که در HTML (کمانچه) تنظیم شده است. ما در مورد ارتباط بین جاوا اسکریپت و تقویم در یکی از پست‌های آینده خود بحث خواهیم کرد. عنصر، روزهای هفته در th، روزهای ماه در td) بدون برنامه نویسی.

سبک های HTML و CSS تقویم

بیایید قوانینی برای رنگ آمیزی روزهای ماه (با ویژگی پس زمینه:linear-gradient(...))، کلاس های آخر هفته و روز جاری ماه اضافه کنیم. برای مشاهده نحوه عملکرد کلاس های .holyday و .today، باید مقادیر آنها را در سلول های جدول مربوطه بنویسید. اگر ما فقط در مورد تعطیلات آخر هفته شنبه و یکشنبه صحبت می کنیم، می توانید بدون کلاس با استفاده از انتخابگرهای nth-child(...) کار کنید.

تقویم (حاشیه: 1 پیکسل یکپارچه #bbb؛ نمایشگر: بلوک درون خطی) .جدول تقویم (سلول های خالی: پنهان کردن؛) . شرح تقویم (بالا: 3 پیکسل؛ پس زمینه: گرادیان خطی (به پایین، #ddd 10٪، #bbb .calendar td( padding: 2px 6px; text-align: center; border: 1px solid #cccc; background: linear-gradient (to bottom, #fff 10%, #ddd); border-radius:0 0 3px ) تقویم : 1px جامد #888;

تعیین روزهای هفته ("دوشنبه"، "سه شنبه"، "چهارشنبه"، "پنجشنبه"، "جمعه"، "شنبه"، "یکشنبه")، ماهها ("ژانویه"، "فوریه"، "مارس"، «آوریل»، «مه»، «ژوئن»، «ژوئیه»، «آگوست»، «سپتامبر»، «اکتبر»، «نوامبر»، «دسامبر») را می‌توانید در سایت محلی‌سازی ویجت jQuery Datepicker (https:/) پیدا کنید. /github.com/ jquery/jquery-ui/blob/master/ui/i18n/datepicker-ru.js)، i.e. یک تقویم آماده با استفاده از جاوا اسکریپت و کتابخانه های jQuery و jQuery UI (بیشتر در مورد

یکی از عناصر مهم در سایت تقویم است که کاربران شما می توانند رویدادها و انتشار محصولات جدید را با آن پیگیری کنند. یا فقط یادداشت ها یا هر چیز دیگری که فکرش را می کنید بخوانید. پس از گذراندن مدتی در این درس، یاد خواهید گرفت که چگونه یک اسکریپت تقویم PHP برای وب سایت خود ایجاد کنید. ما فقط به برنامه نویسی محدود نمی شویم، به ساختار CSS و html تقویم نیز توجه خواهیم کرد. در یک کلام، ما همه چیز را از ابتدا تا انتها انجام خواهیم داد!

CSS

کمتر حرف بزن، بیشتر کار کن. بیایید بلافاصله با سبک های css تقویم شروع کنیم. کد زیر با مرورگر مشکل دار IE6 سازگار است.

/* calendar */ table.calendar ( border-left:1px solid #999; ) tr.calendar-row ( ) td.calendar-day (min-height:80px;font-size:11px; position:relative;) html div.calendar-day ( ارتفاع:80px; ) td.calendar-day:hover ( پس زمینه:#eceff5; ) td.calendar-day-np ( پس زمینه:#eee; min-height:80px; ) * html div. calendar-day-np ( ارتفاع: 80 پیکسل؛ ) td.calendar-day-head ( پس زمینه:#ccc؛ فونت-وزن:پررنگ؛ تراز متن:مرکز؛ عرض:120 پیکسل؛ بالشتک:5 پیکسل؛ حاشیه-پایین: 1پیکسل جامد #999; border-top: 1px solid #999; حاشیه سمت راست:-5px 0 عرض:20px جامد #999;

PHP

کل کد اسکریپت تقویم PHP اساساً مبتنی بر یک تابع است که به دو پارامتر نیاز دارد: ماه و سال مورد نظر. لازم به ذکر است که در وسط تابع، فضایی را برای پایگاه داده گذاشتم. در صورت تمایل می توانید رویدادهای لازم را در شبکه تقویم نمایش دهید. هنگام نوشتن این اسکریپت، من از جداول به جای بلوک های div استفاده کردم، زیرا در مواردی که یک روز پر از رویدادها باشد، کاربردی تر هستند.

اسکریپت تقویم انگلیسی زبان به عنوان پایه استفاده شد، بنابراین من دو نسخه ارائه خواهم کرد: یک تقویم به سبک انگلیسی و روسی. کدام را دوست دارید انتخاب کنید! تنها تفاوت در کد PHP است. سبک های CSS برای هر دو گزینه یکسان باقی می مانند.

اسکریپت تقویم پی اچ پی به سبک روسی ". "; /* متغیرهای مورد نیاز روز و هفته... */ $running_day = date("w",mktime(0,0,0,$month,1,$year)); $running_day = $running_day - 1; $ days_in_month = date("t",mktime(0,0,0,$month,1,$year) = $days_counter = 0; */ $calendar.= " < $running_day; $x++): $calendar.= "

1.2 دریافت بوت استرپ

Bootstrap یک چارچوب CSS خلاقانه و آسان برای استفاده است که ما عمدتاً برای ساختار مبتنی بر شبکه آن استفاده خواهیم کرد.

برای استفاده از آن، فقط فایل های css و js را در قسمت head از لینک های رسمی آنها مانند زیر پیوند دهید:

جزء تقویم

2. ایجاد تقویم

در زیر می توانید گام به گام ایجاد تقویم را مشاهده کنید. ابتدا تقویم را در html ایجاد می کنیم و سپس css را اضافه می کنیم.

2.1 HTML

بخش html قرار است شامل ساختار اصلی زیر باشد:

1. Wrapper - این برچسب تمام عناصر را در داخل تقویم قرار می دهد

2. یک هدر - شامل عنوان ماه و نمادهای ناوبری چپ و راست خواهد بود

3. بدنه تقویم - شامل ردیف روزهای هفته و ردیف های تاریخ است.

4. تاریخ فعلی - بخشی در پایین تقویم خواهد بود که تاریخ واقعی را نشان می دهد.

ما به 1 ردیف برای روزهای هفته و 5 ردیف برای ردیف های تاریخ نیاز داریم. ساختار به شکل زیر خواهد بود:

هنوز چیزی در مرورگر نشان داده نمی شود. اکنون که ردیف ها را ایجاد کردیم، اجازه دهید اجزای زیر را اضافه کنیم:

1. نمادهای ناوبری - یک کلاس در بوت استرپ برای این نمادها وجود دارد: glyphicon glyphicon-chevron-left/right

2. ماهی را که تقویم نشان می دهد در قسمت سرصفحه که داخل یک تگ p قرار گرفته است اضافه کنید

3. ردیف‌ها را با کلاس bootstrap به 7 ستون تقسیم کنید: col-xs-1 و روزهای هفته را درون تگ‌های p اضافه کنید.

4. از همان col-xs-1 برای تاریخ ها استفاده کنید اما پاراگراف را در داخل تگ های لنگر قرار دهید، باید روی آنها کلیک کنید.

با اضافه شدن کد بالا، html ما اکنون به شکل زیر است:

ژانویه 2015

دوشنبه 26 ژانویه

خوب، اکنون ما یک نمای در مرورگر داریم:

نگران نباشید که آیکون ناوبری سمت راست پیش می رود، ما آن را با css برطرف خواهیم کرد. همچنین توجه داشته باشید که من یک کلاس غیرفعال را به برخی از تاریخ ها اضافه کرده ام.

این به این دلیل است که آن تاریخ ها مربوط به ماه جاری نیستند و باید سبک متفاوتی داشته باشند (یعنی رنگ روشن تر از بقیه).

2.2 CSS

اینجا قسمت سرگرم کننده است، یک ظاهر طراحی چیزی است که به عناصر شکل و ظاهر کلی می دهد. بیایید با این ویژگی های جهانی شروع کنیم:

بدنه ( font-family: "Montserrat"; /* فقط یک قلم کوتاه */ ) a:-webkit-any-link( text-decoration:none !important; /* زیر لینک ها خط نکشید */ رنگ: سیاه؛ !مهم /* به پیوندها رنگ پیش فرض بدهید */ )

برای اینکه ناویکون‌ها به راست نشان داده شوند، pull-left و pull-right را در کنار کلاس‌های دیگر اضافه کنید:

اکنون به عناصر ساختاری اولیه برخی از ویژگی های استایل بدهید:

Wrapper ( حاشیه: 10em؛ /* فقط یک حاشیه موقت */ حاشیه: 0.1em جامد #cccc؛ /* تقویم را در داخل یک کادر بپیچید */ عرض: 20em؛ /* یک عرض برای کادر تعریف کنید */ ارتفاع: 24em; /* یک ارتفاع برای کادر تعریف کنید */ box-shadow: 0.1em 0.2em 0.8em #ccc /* box shadow برای نمایش بهتر */ .header ( ارتفاع: 4em; /* تعیین ارتفاع برای هدر */ پس زمینه; -color: #3f51b5 /* به هدر یک رنگ پس‌زمینه بدهید */ رنگ: به هدر یک رنگ متن بدهید */ text-align: /* وسط متن داخل هدر */ .col-xs-1 ( عرض: 2.5em؛ /* به هر ستون یک عرض ثابت بدهید */ margin-left: 0.2em؛ /* مقداری فاصله بین ستون */ text-align: مرکز؛ /* تراز کردن متن در مرکز */)

نمای تقویم ما این شد:

یک ظاهر طراحی - قسمت 1

بسیار خوب، در مرحله بعد ویژگی‌هایی را به عناصر جداگانه اضافه کنید تا ظاهر آن‌ها را در تقویم بهبود بخشد: .header p ( padding-top: 1.2em; /* عمودی وسط */ text-transform: حروف بزرگ؛ /* متن تمام حروف بزرگ */). ( بالشتک: 1.3em؛ /* نمادهای مرکزی عمودی و افقی */ ) .غیرفعال ( /* تاریخ های غیرفعال رنگ متن خاکستری روشن دریافت می کنند */ رنگ: #cccc؛ ) .روزهای هفته ( بالشتک: 1em؛ /* دادن مقداری فضا به روزهای هفته حدود */ ) .dates ( بالشتک: 0.2em 1em 0.2em 1em؛ /* به تاریخ ها مقداری فاصله می دهد */ ) .line ( /* یک جداکننده خط خاکستری */ ارتفاع: 0.1em؛ حاشیه: 0.1em جامد #EEEEEE; ) .current-date ( /* شکل دادن به بخش تاریخ فعلی */ text-transform: بزرگ؛ متن تراز: مرکز؛ padding: 0.7em؛ ) .calendar-body .row .col-xs-1 p:hover ( رنگ: #4778a6 /* وضعیت شناور در همه تاریخ ها */ )

و بالاخره یک تقویم شیک و مدرن داریم. به این نگاه کن:

به همین سادگی، به نظر می رسد کارمان تمام شده است. قبل از پایان دادن به این مثال، یک تقویم از پیش ساخته شده را از http://demos.telerik.com/ ببینید که در آن تقویم دارای تعامل کامل توسط کتابخانه jQuery است.

3. تعامل؟ بله، با jQuery!

در این بخش، من قصد دارم به شما اطلاع دهم که تقویم ها می توانند و باید با انتخاب تاریخ/ماه/سال کاملاً تعاملی باشند.

مثال زیر فقط برای نمایش است، این یک الگو در اینترنت است که رفتار تعاملی دارد.

html ( اندازه قلم: 12 پیکسل؛ خانواده قلم: Arial، Helvetica، sans-serif؛ ) مثال رابط کاربری Kendo برای WCG $(document).ready(function() ( // ایجاد تقویم از عنصر div HTML $("#calendar ").kendoCalendar(); ));

همه چیز در آن وجود دارد، از جمله html، css و js، اما css و js از اینترنت پیوند داده شده اند.

مثالی که کد آن در بالا آمده است به صورت زیر است:

تقویم تعاملی - jQuery

4. نتیجه گیری

حتی با وجود اینکه می‌توان تقویم‌ها را به راحتی در html و css ایجاد و استایل کرد، اما وقتی صحبت از تعامل به میان می‌آید، اگر بخواهید آن را کاملاً سفارشی‌سازی شده از ابتدا انجام دهید، به سطح حرفه‌ای‌تری از کدنویسی در جاوا اسکریپت نیاز دارید.

با این حال با خیال راحت کدهای جی کوئری را آماده کنید تا چیزها را کمی متحرک کنید، در حالی که می توانید html و css خود را داشته باشید.

توجه داشته باشید که هنگام در نظر گرفتن یک تقویم پشتیبان، جایی که اطلاعات ارسال می شود و باید به جایی ارسال شود، ممکن است لازم باشد ویژگی هایی مانند مقدار یا نام را به عناصر خود اضافه کنید.

آخرین به روز رسانی: 1395/04/08

چندین نوع عنصر ورودی برای کار با تاریخ و زمان در HTML5 وجود دارد:

datetime-local : تاریخ و زمان را تنظیم می کند

date : تاریخ را تنظیم می کند

ماه: ماه و سال جاری را تنظیم می کند

time: زمان را تنظیم می کند

week : هفته جاری را تنظیم می کند

به عنوان مثال، ما از یک فیلد برای تنظیم تاریخ استفاده می کنیم:

فرم ورودی در HTML5

نام:

تاریخ تولد:

ارسال

و هنگامی که تاریخ را در فیلد وارد می کنید، یک تقویم باز می شود:

البته در اینجا باید توجه داشت که تاثیر این عنصر به مرورگر بستگی دارد. در این مورد از گوگل کروم استفاده می شود. در آخرین نسخه های اپرا، عنصر تفاوت چندانی نخواهد داشت. اما در مایکروسافت اج این عنصر به شکل زیر خواهد بود:

کاربرد سایر عناصر:

فرم ورودی در HTML5

یک هفته:

تاریخ و زمان:

ماه:

زمان:

ارسال

هنگام استفاده از این عناصر، باید در نظر بگیرید که فایرفاکس فقط از عناصر تاریخ و زمان پشتیبانی می کند، فیلدهای متنی معمولی ایجاد می شوند. و IE11 به هیچ وجه از این عناصر پشتیبانی نمی کند.

".implode("	",$headings)."