Возможно ли сделать календарь используя html-форму (соблюдая размеры, высоту таблицы и т.д.)

@Блондинка йа · Регистрация: 08.03.2019

Author24 — интернет-сервис помощи студентам

kidASM,
а возможно ли сделать календарь используя html-форму (соблюдая размеры, высоту таблицы и т.д.)

PHP/HTML

<!DOCTYPE HTML>
<html lang="ru">
<head>
  <meta charset="utf-8">
<title></title>
  <style type="text/css">
body { width: 960px; }
body, select, input { font: 14px serif; }
#calendar { width: 330px; display: inline-block; border: 1px solid #a9a9a9; border-radius: 6px/4px; padding: 5px; }
#navigation_panel { background-color: #c5e3ff; height: 53px; border: 1px solid #a9a9a9; border-radius: 6px/4px; padding: 5px; margin-bottom: 3px; text-align: center; vertical-align: middle; }
#navigation_panel button, #navigation_panel #calendar_year { background-color: #94cdff; color: #00f; font: 14px serif; border: 1px solid #00f; }
#calendar_month { background-color: transparent; color: #00f; font: 14px serif; border: 1px solid #00f; }
#navigation_panel button { height: 24px; vertical-align: middle; }
#background_month { background-color: #94cdff; display: inline-block; }
button_minus, button_plus { width: 28px; }
button.minus { border-radius: 6px 0 0 6px / 4px 0 0 4px; margin-right: -5px; }
button.plus { border-radius: 0 6px 6px 0 / 0 4px 4px 0; margin-left: -5px; }
#month_plus { margin-right: 35px; }
#presently { width: 252px; margin-top: 5px; border-radius: 6px/4px; }
#calendar_month { width: 89px; display: inline-block; }
#calendar_year { width: 54px; display: inline-block; }
select { height: 24px; }
input { height: 20px; border: 1px solid #a9a9a9; display: inline-block; text-align: center; }
#table { width: 100%; height: 222px; padding: 2px; }
#table, td { border: 1px solid #a9a9a9; border-radius: 6px/4px; }
td { margin: 1px; text-align: center; }
td.week-day { height: 33px; }
</style>
</head>
<body>
<div id="calendar">
<div id="navigation_panel">
<button class="minus">‹</button>
<span id="background_month"><select id="calendar_month"><option>Август</option></select></span>
<button class="plus" id="month_plus">›</button>
<button class="minus">‹</button>
<input type="text" size="4" id="calendar_year">
<button class="plus">›</button><br>
<button id="presently">сегодня</button>
</div>
<table id="table">
<tr><td class="week-day">Пн.</td><td class="week-day">Вт.</td><td class="week-day">Ср.</td><td class="week-day">Чт.</td><td class="week-day">Пт.</td><td class="week-day">Сб.</td><td class="week-day">Вс.</td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
</table>
</div>
</body>
</html>

Добавлено через 11 секунд
kidASM,
а возможно ли сделать календарь используя html-форму (соблюдая размеры, высоту таблицы и т.д.)

PHP/HTML

<!DOCTYPE HTML>
<html lang="ru">
<head>
  <meta charset="utf-8">
<title></title>
  <style type="text/css">
body { width: 960px; }
body, select, input { font: 14px serif; }
#calendar { width: 330px; display: inline-block; border: 1px solid #a9a9a9; border-radius: 6px/4px; padding: 5px; }
#navigation_panel { background-color: #c5e3ff; height: 53px; border: 1px solid #a9a9a9; border-radius: 6px/4px; padding: 5px; margin-bottom: 3px; text-align: center; vertical-align: middle; }
#navigation_panel button, #navigation_panel #calendar_year { background-color: #94cdff; color: #00f; font: 14px serif; border: 1px solid #00f; }
#calendar_month { background-color: transparent; color: #00f; font: 14px serif; border: 1px solid #00f; }
#navigation_panel button { height: 24px; vertical-align: middle; }
#background_month { background-color: #94cdff; display: inline-block; }
button_minus, button_plus { width: 28px; }
button.minus { border-radius: 6px 0 0 6px / 4px 0 0 4px; margin-right: -5px; }
button.plus { border-radius: 0 6px 6px 0 / 0 4px 4px 0; margin-left: -5px; }
#month_plus { margin-right: 35px; }
#presently { width: 252px; margin-top: 5px; border-radius: 6px/4px; }
#calendar_month { width: 89px; display: inline-block; }
#calendar_year { width: 54px; display: inline-block; }
select { height: 24px; }
input { height: 20px; border: 1px solid #a9a9a9; display: inline-block; text-align: center; }
#table { width: 100%; height: 222px; padding: 2px; }
#table, td { border: 1px solid #a9a9a9; border-radius: 6px/4px; }
td { margin: 1px; text-align: center; }
td.week-day { height: 33px; }
</style>
</head>
<body>
<div id="calendar">
<div id="navigation_panel">
<button class="minus">‹</button>
<span id="background_month"><select id="calendar_month"><option>Август</option></select></span>
<button class="plus" id="month_plus">›</button>
<button class="minus">‹</button>
<input type="text" size="4" id="calendar_year">
<button class="plus">›</button><br>
<button id="presently">сегодня</button>
</div>
<table id="table">
<tr><td class="week-day">Пн.</td><td class="week-day">Вт.</td><td class="week-day">Ср.</td><td class="week-day">Чт.</td><td class="week-day">Пт.</td><td class="week-day">Сб.</td><td class="week-day">Вс.</td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
</table>
</div>
</body>
</html>

@kidASM · 31.07.2019, 11:37

Вот делал простой пример генерации календаря (тут)

@Блондинка йа · 31.07.2019, 17:01 **[ТС]**

kidASM, я разместила свой пост в той теме но его вынесли в отдельную тему, вот мне немного дополнили этот вариант

PHP/HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>тест-календарь</title>
        <style>
        body {
                width: 350px;
 
                }
        #calendar {
                width: 320px;
                padding: 5px;
                margin: 5px;
                                border: 1px solid #a9a9a9;
                border-radius: 6px/4px;
        }
        input[type=month] {
                width: 100%;
                                border: 1px solid #a9a9a9;
                border-radius: 6px/4px;
                text-align: center;
        }
            table {
                border-collapse: separate;
                width: 100%;
                               padding: 1px;
                               }
                table, th, td {
                border: 1px solid #a9a9a9;
                border-radius: 6px/4px;
            margin: 1px;
                        }
            th, td {
                text-align: center;
            }
            .wrapper {
                margin-top: 5px;
            }
            .anotherMonthWeek {
                background-color: #e6f5ff;
                color: #9ed9ff;
                border: 1px solid #dcdcdc;
            } /* дата будние дни другой месяц */
            .anotherMonthWeekEnd {
                background-color: #fff5fa;
                color: #ffb8db;
                border: 1px solid #dcdcdc;
            } /* дата выходные дни другой месяц */
            .currentMonthWeek {
                background-color: #def1ff;
                color: #0091ff;
            }
            .currentMonthWeekEnd {
                background-color: #ffc3d7;
                color: #dc143c;
            } /* дата выходные дни */
            .currentDay{
                background-color: #c2d6ff;
                border: 1px solid #0000ff;
                font-weight: bold;
                color: #ffffff;
                text-shadow: 1px 1px #0000ff, -1px 1px #0000ff, 1px -1px #0000ff, -1px -1px #0000ff, 1px 0px #0000ff, 0px 1px #0000ff, -1px 0px #0000ff, 0px -1px #0000ff;
            }
            #wrapper th {
                background-color: #c2d6ff;
                color: #0069ff;
            }
            #wrapper th:nth-child(n+6){
                background-color: #ffb4d2;
                color: #b92346;
            } /* дни недели выходные дни */
                #wrapper th.currentDay {
                        border: 1px solid #285fcd;
                background-color: #6b9cff;
                color: #E6f5ff;
                text-shadow: 1px 1px #285fcd, -1px 1px #285fcd, 1px -1px #285fcd, -1px -1px #285fcd, 1px 0px #285fcd, 0px 1px #285fcd, -1px 0px #285fcd, 0px -1px #285fcd;
            }
            #wrapper th:nth-child(n+6).currentDay{
                border: 1px solid #b92346;
                background-color: #ff73a0;
                color: #ffafc8;
                text-shadow: 1px 1px #b92346, -1px 1px #b92346, 1px -1px #b92346, -1px -1px #b92346, 1px 0px #b92346, 0px 1px #b92346, -1px 0px #b92346, 0px -1px #b92346;
            }
            #wrapper td:nth-child(n+6).currentDay{
                background-color: #ff85ad;
                border: 1px solid #ff0000;
                font-weight: bold;
                color: #ffffff;
                text-shadow: 1px 1px #ff0000, -1px 1px #ff0000, 1px -1px #ff0000, -1px -1px #ff0000, 1px 0px #ff0000, 0px 1px #ff0000, -1px 0px #ff0000, 0px -1px #ff0000;
            }
            button.current.hide {
                display: none;
            }
            button {
                width: 100%;
                                border: 1px solid #a9a9a9;
                border-radius: 6px/4px;
            }
        </style>
    </head>
    <body>
    <div id="calendar">
        <form name="formDate">
            <input type="month" id="inpDate" name="inpDate">
            <button type="button" class="current hide">сегодня</button>
        </form>
        <div class="wrapper" id="wrapper"></div>
        <script>
            var wrapper = document.getElementById("wrapper");
            var form = document.forms.formDate;
            var button = document.querySelector("button.current");
            function createTable(event){
                    var date = form.inpDate.valueAsDate;
                    if(button) button.classList.remove("hide");
                    if(date){
                        var current = new Date();
                            current.setHours(0,0,0,0);
                        date.setDate(1);
                        date.setHours(0);
                        date.setSeconds(0);
                        date.setMilliseconds(0);
                        var date2 = new Date(date.getTime());
                        var month = date.getMonth();
                        while(date.getDay() != 1){ date.setDate(date.getDate()-1); }
                        date2.setMonth(date2.getMonth()+1);
                        date2.setDate(1);
                        date2.setHours(0);
                        date2.setSeconds(0);
                        date2.setMilliseconds(0);
                        var trs = Math.ceil((date2-date)/1000/3600/24/7)+1;
                        var table = document.createElement('table');
                        var i = 0;
                        var daysPerWeek = 7;
                        while(i<trs){
                            var tr = document.createElement('tr');
                            if(i == 0){
                                for(var j=0; j<daysPerWeek; j++){
                                    var th = document.createElement('th');
                                    th.innerText = getShortNameOfDay(j);
                                    tr.appendChild(th);
                                }
                                table.appendChild(tr);
                            }
                            else{
                                for(var j=0; j<daysPerWeek; j++){
                                    var td = document.createElement('td');
                                    if(date.getMonth() == month){
                                        if(date.getDay() == 0 ||  date.getDay() == 6){
                                            td.className = "currentMonthWeekEnd";
                                        }
                                        else{
                                            td.className = "currentMonthWeek";
                                        }
                                    }
                                    else {
                                        if(date.getDay() == 0 ||  date.getDay() == 6){
                                            td.className = "anotherMonthWeekEnd";
                                        }
                                        else{
                                            td.className = "anotherMonthWeek";
                                        }
                                    }
                                    if(date.getTime() == current.getTime()) {
                                        td.className = "currentDay";
                                        table.querySelectorAll("th")[j].className = "currentDay";
                                        if(button) button.classList.add("hide");
                                    }
                                    td.innerText = date.getDate();
                                    date.setDate(date.getDate() + 1);
                                    tr.appendChild(td);
                                    table.appendChild(tr);
                                }
                            }
                            i++;
                        }
                        wrapper.innerHTML = "";
                        wrapper.appendChild(table);
                    }
                };
            function setToday()
            {
                form.inpDate.valueAsDate = new Date();
                var event = new Event('change');
                form.dispatchEvent(event);
            }
           if(wrapper && form){
                form.addEventListener('change', createTable);
                button && button.addEventListener("click", setToday);
                setToday()
            }
            function getShortNameOfDay(x){
                var name = "xx";
                switch(x){
                    case 0: name = "Пн"; break;
                    case 1: name = "Вт"; break;
                    case 2: name = "Ср"; break;
                    case 3: name = "Чт"; break;
                    case 4: name = "Пт"; break;
                    case 5: name = "Сб"; break;
                    case 6: name = "Вс";
                }
                return name;
            }
        </script>
        </div>
    </body>
</html>

возможно ли сделать чтобы управление календарём было не через input type month, а через выпадающий список с кнопками и поле ввода для года с кнопками? и возможно ли задать таблице фиксированную высоту?

Новые блоги и статьи
Использование связки C# и PHP в корпоративной разработке и микросервисной архитектуре InfoMaster 16.01.2025 Введение в интеграцию C# и PHP В современной корпоративной разработке все чаще возникает потребность в создании гибких и масштабируемых решений, способных эффективно решать широкий спектр. . .	Как использовать Kerio дома для управления сетью и пользователями InfoMaster 16.01.2025 Использование технологий для улучшения повседневной жизни стало неотъемлемой частью современного быта. Одной из таких технологий является Kerio — мощный инструмент для управления сетью и. . .	Есть ли будущее у DVD и Blu-ray? InfoMaster 16.01.2025 В эпоху стремительного развития цифровых технологий и повсеместного распространения потоковых сервисов вопрос о будущем физических носителей информации становится все более актуальным. Особенно остро. . .	Как проводить научные вычисления на Python InfoMaster 15.01.2025 Python стал одним из наиболее востребованных языков программирования в области научных вычислений благодаря своей простоте, гибкости и обширной экосистеме специализированных библиотек. Научные. . .	Создание игры типа Minecraft на PyGame/Python: пошаговое руководство InfoMaster 15.01.2025 В данном руководстве мы рассмотрим процесс создания игры в стиле Minecraft с использованием библиотеки PyGame на языке программирования Python. Этот проект идеально подходит как для начинающих. . .	Как создать свою первую игру в стиле Doom на Unreal Engine InfoMaster 15.01.2025 Разработка шутера от первого лица в стиле классического Doom представляет собой увлекательное путешествие в мир игрового программирования, где сочетаются творческий подход и технические навыки. . . .
Параллельное программирование: основные технологии и принципы InfoMaster 15.01.2025 Введение в параллельное программирование Параллельное программирование представляет собой фундаментальный подход к разработке программного обеспечения, который позволяет одновременно выполнять. . .	Как написать микросервис на C# с Kafka, MediatR, Redis и GitLab CI/CD InfoMaster 15.01.2025 В современной разработке программного обеспечения микросервисная архитектура стала стандартом де-факто для создания масштабируемых и гибких приложений. Этот подход позволяет разделить сложную систему. . .	Что такое CQRS и как это реализовать на C# с MediatR InfoMaster 15.01.2025 Концепция CQRS и её роль в современной разработке В современном мире разработки программного обеспечения архитектурные паттерны играют ключевую роль в создании масштабируемых и поддерживаемых. . .	Как настроить CI/CD с Azure DevOps InfoMaster 15.01.2025 CI/ CD, или непрерывная интеграция и непрерывное развертывание, представляет собой современный подход к разработке программного обеспечения, который позволяет автоматизировать и оптимизировать процесс. . .	Как настроить CI/CD с помощью Jenkins InfoMaster 15.01.2025 Введение в CI/ CD и Jenkins В современной разработке программного обеспечения непрерывная интеграция (CI) и непрерывная доставка (CD) стали неотъемлемыми элементами процесса создания качественных. . .	Как написать микросервис на Go/Golang с Kafka, REST и GitHub CI/CD InfoMaster 14.01.2025 Определение микросервиса, преимущества использования Go/ Golang Микросервис – это архитектурный подход к разработке программного обеспечения, при котором приложение состоит из небольших, независимо. . .

@kidASM 398 / 293 / 109 Регистрация: 28.08.2013 Сообщений: 721
	31.07.2019, 11:37	2
	Вот делал простой пример генерации календаря (тут) 0

	31.07.2019, 17:01