Форум

Блондинка · #41 (**permalink**) 10.07.2021, 15:58

<style type="text/css">
div { border: 1px solid #999;
padding: 5px;
margin: 0 0 5px; }
table { border: 1px solid #00f;
padding: 5px; }
td { border: 1px solid #090;
padding: 5px; }

#navigation_panel {
white-space: nowrap;
overflow: scroll;
padding: 5px;
min-width: 400px; }

select { background-color: hsl(210, 100%, 90%);
color: hsl(210, 100%, 50%);
border: 1px solid hsl(210, 100%, 50%);
font: bold 14px serif;
padding: 5px; }

button { background-color: hsl(210, 100%, 90%);
color: hsl(210, 100%, 50%);
border: 1px solid hsl(210, 100%, 50%);
font: 14px serif;
width: 30px;
height:30px;
border-radius: 12px 12px 0 12px; }

button.month_minus,
button.year_minus,
button.kvartal_minus,
button.year_05_minus
 { background-color: hsl(210, 100%, 90%);
color: hsl(210, 100%, 50%);
border: 1px solid hsl(210, 100%, 50%);
font: 14px serif;
width: 30px;
height:30px;
border-radius: 28px 0 0 28px/18px 0 0 18px; }

button.month_plus,
button.year_plus,
 button.kvartal_plus,
 button.year_05_plus
 { background-color: hsl(210, 100%, 90%);
color: hsl(210, 100%, 50%);
border: 1px solid hsl(210, 100%, 50%);
font: 14px serif;
width: 30px;
height:30px;
border-radius: 0 28px 28px 0/0 18px 18px 0; }

input { border: 1px solid #099;
width: 60px; }
span { background-color: hsl(190, 100%, 98%);
color: hsl(190, 100%, 40%);
border: 1px solid hsl(190, 100%, 40%);
font: 14px serif;
padding: 5px;
display: inline-block;
 }
</style>
<body>
    <div id="calendar_month">
    <div id="month">
    <div id="navigation_panel">
    Календарь на месяц<br>
    <button class="month_minus">◀</button>
    <select class="select_month">
    <option value="01">Январь</option>
    <option value="02">Февраль</option>
    <option value="03">Март</option>
    <option value="04">Апрель</option>
    <option value="05">Май</option>
    <option value="06">Июнь</option>
    <option value="07">Июль</option>
    <option value="08">Август</option>
    <option value="09">Сентябрь</option>
    <option value="10">Октябрь</option>
    <option value="11">Ноябрь</option>
    <option value="12">Декабрь</option>
    </select>
    <button class="month_plus">▶</button>
    <button class="year_minus">◀</button>
    <input class="year_input" type="number" value="">
    <button class="year_plus">▶</button>
    <button class="table_rotate">➘</button>
    </div>
    <div id="month_name"></div> 
    <table class=" table_month_horiz"></table>
    </div>
    <span id="select_05_year">календарь на полугодие</span>
    </div>
    
    <div id="calendar_05_year">
    <div id="navigation_panel">
    Календарь на полугодие<br>
    <button class="year_05_minus">◀</button>
    <select class="select_05_year">
    <option value="Ⅰ">Ⅰ полугодие</option>
    <option value="01" disabled>Январь</option>
    <option value="02" disabled>Февраль</option>
    <option value="03" disabled>Март</option>
    <option value="04" disabled>Апрель</option>
    <option value="05" disabled>Май</option>
    <option value="06" disabled>Июнь</option>
    <option value="Ⅱ">Ⅱ полугодие</option>
    <option value="07" disabled>Июль</option>
    <option value="08" disabled>Август</option>
    <option value="09" disabled>Сентябрь</option>
    <option value="10" disabled>Октябрь</option>
    <option value="11" disabled>Ноябрь</option>
    <option value="12" disabled>Декабрь</option>
    </select>
    <button class="year_05_plus">▶</button>
    <button class="year_minus">◀</button>
    <input class="year_input" type="number" value="">
    <button class="year_plus">▶</button>
    <button class="table_rotate">➘</button>
    </div>
    <table id="table">
    <tr>
    <td class="td_month">
    <div id="month_num_1"></div>
    <table class="table_month_horiz"></table>
    </td>
    <td class="td_month">
    <div id="month_num_2"></div>
    <table class="table_month_horiz"></table>
    </td>
    <td class="td_month">
    <div id="month_3"></div>
    <table class="table_month_horiz"></table>
    </td>
    </tr>
    <tr>
    <td class="td_month">
    <div id="month_num_4"></div>
    <table class="table_month_horiz"></table>
    </td>
    <td class="td_month">
    <div id="month_num_5"></div>
    <table class="table_month_horiz"></table>
    </td>
    <td class="td_month">
    <div id="month_6"></div>
    <table class="table_month_horiz"></table>
    </td>
    </tr>
    </table>
    <span id="select_month"> календарь на месяц</span>
    </div>
    </body>

Блондинка · #42 (**permalink**) 10.07.2021, 16:09

<body>
    <div id="month_3">
      <div id="navigation_panel">
      Календарь на 3 месяца<br>
      <button class="month_minus">◀</button>
      <select class="select_month">
      <option value="01">Январь</option>
      <option value="02">Февраль</option>
      <option value="03">Март</option>
      <option value="04">Апрель</option>
      <option value="05">Май</option>
      <option value="06">Июнь</option>
      <option value="07">Июль</option>
      <option value="08">Август</option>
      <option value="09">Сентябрь</option>
      <option value="10">Октябрь</option>
      <option value="11">Ноябрь</option>
      <option value="12">Декабрь</option>
      </select>
      <button class="month_plus">▶</button>
      <button class="year_minus">◀</button>
      <input class="year_input" type="number" value="">
      <button class="year_plus">▶</button>
      <button class="table_rotate">➘</button>
      </div>
    <div id="month_minis_11">
    <div class="month_year"></div>
    <table class="table_month_horiz"></table>
    </div>
    <div id="month_minis_10">
    <div class="month_year"></div>
    <table class="table_month_horiz"></table>
    </div>
    <div id="month_minis_9">
    <div class="month_year"></div>
    <table class="table_month_horiz"></table>
    </div>
    <div id="month_minis_8">
    <div class="month_year"></div>
    <table class="table_month_horiz"></table>
    </div>
    <div id="month_minis_7">
    <div class="month_year"></div>
    <table class="table_month_horiz"></table>
    </div>
    <div id="month_minis_6">
    <div class="month_year"></div>
    <table class="table_month_horiz"></table>
    </div>
    <div id="month_minis_5">
    <div class="month_year"></div>
    <table class="table_month_horiz"></table>
    </div>
    <div id="month_minis_4">
    <div class="month_year"></div>
    <table class="table_month_horiz"></table>
    </div>
    <div id="month_minis_3">
    <div class="month_year"></div>
    <table class="table_month_horiz"></table>
    </div>
    <div id="month_minis_2">
    <div class="month_year"></div>
    <table class="table_month_horiz"></table>
    </div>
    <div id="month_minis_1">
    <div class="month_year"></div>
    <table class="table_month_horiz"></table>
    </div>
    
    <div id="month_cur">
    <div class="month_year"></div>
    <table class="table_month_horiz"></table>
    </div>
    
    <div id="month_plus_1">
    <div class="month_year"></div>
    <table class="table_month_horiz"></table>
    </div>
    <div id="month_plus_2">
    <div class="month_year"></div>
    <table class="table_month_horiz"></table>
    </div>
    <div id="month_plus_3">
    <div class="month_year"></div>
    <table class="table_month_horiz"></table>
    </div>
    <div id="month_plus_4">
    <div class="month_year"></div>
    <table class="table_month_horiz"></table>
    </div>
    <div id="month_plus_5">
    <div class="month_year"></div>
    <table class="table_month_horiz"></table>
    </div>
    <div id="month_plus_6">
    <div class="month_year"></div>
    <table class="table_month_horiz"></table>
    </div>
    <div id="month_plus_7">
    <div class="month_year"></div>
    <table class="table_month_horiz"></table>
    </div>
    <div id="month_plus_8">
    <div class="month_year"></div>
    <table class="table_month_horiz"></table>
    </div>
    <div id="month_plus_9">
    <div class="month_year"></div>
    <table class="table_month_horiz"></table>
    </div>
    <div id="month_plus_10">
    <div class="month_year"></div>
    <table class="table_month_horiz"></table>
    </div>
    <div id="month_plus_11">
    <div class="month_year"></div>
    <table class="table_month_horiz"></table>
    </div>
    </div>
    </body>
    
    <body>
    <div id="calendar_month">
    <div id="month">
    <div id="navigation_panel">
    Календарь на месяц<br>
    <button class="month_minus">◀</button>
    <select class="select_month">
    <option value="01">Январь</option>
    <option value="02">Февраль</option>
    <option value="03">Март</option>
    <option value="04">Апрель</option>
    <option value="05">Май</option>
    <option value="06">Июнь</option>
    <option value="07">Июль</option>
    <option value="08">Август</option>
    <option value="09">Сентябрь</option>
    <option value="10">Октябрь</option>
    <option value="11">Ноябрь</option>
    <option value="12">Декабрь</option>
    </select>
    <button class="month_plus">▶</button>
    <button class="year_minus">◀</button>
    <input class="year_input" type="number" value="">
    <button class="year_plus">▶</button>
    <button class="table_rotate">➘</button>
    </div>
    <div id="month_name"></div> 
    <table class=" table_month_horiz"></table>
    </div>
    <span id="select_3_month">календарь на 3 месяца</span>
    </div>
    
    <div id="month_3">
    <div id="navigation_panel">
    Календарь на 3 месяца<br>
    <button class="month_minus">◀</button>
    <select class="select_month">
    <option value="01">Январь</option>
    <option value="02">Февраль</option>
    <option value="03">Март</option>
    <option value="04">Апрель</option>
    <option value="05">Май</option>
    <option value="06">Июнь</option>
    <option value="07">Июль</option>
    <option value="08">Август</option>
    <option value="09">Сентябрь</option>
    <option value="10">Октябрь</option>
    <option value="11">Ноябрь</option>
    <option value="12">Декабрь</option>
    </select>
    <button class="month_plus">▶</button>
    <button class="year_minus">◀</button>
    <input class="year_input" type="number" value="">
    <button class="year_plus">▶</button>
    <button class="table_rotate">➘</button>
    </div>
    <div id="month_minis_11">
    <div class="month_year"></div>
    <table class="table_month_horiz"></table>
    </div>
    <div id="month_minis_10">
    <div class="month_year"></div>
    <table class="table_month_horiz"></table>
    </div>
    <div id="month_minis_9">
    <div class="month_year"></div>
    <table class="table_month_horiz"></table>
    </div>
    <div id="month_minis_8">
    <div class="month_year"></div>
    <table class="table_month_horiz"></table>
    </div>
    <div id="month_minis_7">
    <div class="month_year"></div>
    <table class="table_month_horiz"></table>
    </div>
    <div id="month_minis_6">
    <div class="month_year"></div>
    <table class="table_month_horiz"></table>
    </div>
    <div id="month_minis_5">
    <div class="month_year"></div>
    <table class="table_month_horiz"></table>
    </div>
    <div id="month_minis_4">
    <div class="month_year"></div>
    <table class="table_month_horiz"></table>
    </div>
    <div id="month_minis_3">
    <div class="month_year"></div>
    <table class="table_month_horiz"></table>
    </div>
    <div id="month_minis_2">
    <div class="month_year"></div>
    <table class="table_month_horiz"></table>
    </div>
    <div id="month_minis_1">
    <div class="month_year"></div>
    <table class="table_month_horiz"></table>
    </div>
    
    <div id="month_cur">
    <div class="month_year"></div>
    <table class="table_month_horiz"></table>
    </div>
    
    <div id="month_plus_1">
    <div class="month_year"></div>
    <table class="table_month_horiz"></table>
    </div>
    <div id="month_plus_2">
    <div class="month_year"></div>
    <table class="table_month_horiz"></table>
    </div>
    <div id="month_plus_3">
    <div class="month_year"></div>
    <table class="table_month_horiz"></table>
    </div>
    <div id="month_plus_4">
    <div class="month_year"></div>
    <table class="table_month_horiz"></table>
    </div>
    <div id="month_plus_5">
    <div class="month_year"></div>
    <table class="table_month_horiz"></table>
    </div>
    <div id="month_plus_6">
    <div class="month_year"></div>
    <table class="table_month_horiz"></table>
    </div>
    <div id="month_plus_7">
    <div class="month_year"></div>
    <table class="table_month_horiz"></table>
    </div>
    <div id="month_plus_8">
    <div class="month_year"></div>
    <table class="table_month_horiz"></table>
    </div>
    <div id="month_plus_9">
    <div class="month_year"></div>
    <table class="table_month_horiz"></table>
    </div>
    <div id="month_plus_10">
    <div class="month_year"></div>
    <table class="table_month_horiz"></table>
    </div>
    <div id="month_plus_11">
    <div class="month_year"></div>
    <table class="table_month_horiz"></table>
    </div>
    <span id="select_month">календарь на месяц</span>
    </div>
    </body>

вот несколько body, как правильно вставить таблицы календаря? чтобы скрипт работал независимо от наличия или отсутствия вертикальной или горизонтальной таблицы, спанов "календарь на месяц/год", кнопок +/-, "сегодня" ?

Блондинка · #43 (**permalink**) 10.07.2021, 16:44

<style type="text/css">
div { border: 1px solid #999;
padding: 5px;
margin: 0 0 5px; }
table { border: 1px solid #00f;
padding: 5px; }
td { border: 1px solid #090;
padding: 5px; }

#navigation_panel {
white-space: nowrap;
overflow: scroll;
padding: 5px;
min-width: 400px; }

select { background-color: hsl(210, 100%, 90%);
color: hsl(210, 100%, 50%);
border: 1px solid hsl(210, 100%, 50%);
font: bold 14px serif;
padding: 5px; }

button { background-color: hsl(210, 100%, 90%);
color: hsl(210, 100%, 50%);
border: 1px solid hsl(210, 100%, 50%);
font: 14px serif;
width: 30px;
height:30px;
border-radius: 12px 12px 0 12px; }

button.month_minus,
button.year_minus,
button.kvartal_minus,
button.year_05_minus
 { background-color: hsl(210, 100%, 90%);
color: hsl(210, 100%, 50%);
border: 1px solid hsl(210, 100%, 50%);
font: 14px serif;
width: 30px;
height:30px;
border-radius: 28px 0 0 28px/18px 0 0 18px; }

button.month_plus,
button.year_plus,
 button.kvartal_plus,
 button.year_05_plus
 { background-color: hsl(210, 100%, 90%);
color: hsl(210, 100%, 50%);
border: 1px solid hsl(210, 100%, 50%);
font: 14px serif;
width: 30px;
height:30px;
border-radius: 0 28px 28px 0/0 18px 18px 0; }

input { border: 1px solid #099;
width: 60px; }
span { background-color: hsl(190, 100%, 98%);
color: hsl(190, 100%, 40%);
border: 1px solid hsl(190, 100%, 40%);
font: 14px serif;
padding: 5px;
display: inline-block;
 }
</style>
<body>
    <div id="calendar_month">
    <div id="month">
    <div id="navigation_panel">
    Календарь на месяц<br>
    <button class="month_minus">◀</button>
    <select class="select_month">
    <option value="01">Январь</option>
    <option value="02">Февраль</option>
    <option value="03">Март</option>
    <option value="04">Апрель</option>
    <option value="05">Май</option>
    <option value="06">Июнь</option>
    <option value="07">Июль</option>
    <option value="08">Август</option>
    <option value="09">Сентябрь</option>
    <option value="10">Октябрь</option>
    <option value="11">Ноябрь</option>
    <option value="12">Декабрь</option>
    </select>
    <button class="month_plus">▶</button>
    <button class="year_minus">◀</button>
    <input class="year_input" type="number" value="">
    <button class="year_plus">▶</button>
    <button class="table_rotate">➘</button>
    </div>
    <div id="month_name"></div> 
    <table class=" table_month_horiz"></table>
    </div>
    <span id="select_3_month">календарь на 3 месяца</span>
    </div>
    
    <div id="month_3">
    <div id="navigation_panel">
    Календарь на 3 месяца<br>
    <button class="month_minus">◀</button>
    <select class="select_month">
    <option value="01">Январь</option>
    <option value="02">Февраль</option>
    <option value="03">Март</option>
    <option value="04">Апрель</option>
    <option value="05">Май</option>
    <option value="06">Июнь</option>
    <option value="07">Июль</option>
    <option value="08">Август</option>
    <option value="09">Сентябрь</option>
    <option value="10">Октябрь</option>
    <option value="11">Ноябрь</option>
    <option value="12">Декабрь</option>
    </select>
    <button class="month_plus">▶</button>
    <button class="year_minus">◀</button>
    <input class="year_input" type="number" value="">
    <button class="year_plus">▶</button>
    <button class="table_rotate">➘</button>
    </div>
    <div id="month_minis_11">
    <div class="month_year"></div>
    <table class="table_month_horiz"></table>
    </div>
    <div id="month_minis_10">
    <div class="month_year"></div>
    <table class="table_month_horiz"></table>
    </div>
    <div id="month_minis_9">
    <div class="month_year"></div>
    <table class="table_month_horiz"></table>
    </div>
    <div id="month_minis_8">
    <div class="month_year"></div>
    <table class="table_month_horiz"></table>
    </div>
    <div id="month_minis_7">
    <div class="month_year"></div>
    <table class="table_month_horiz"></table>
    </div>
    <div id="month_minis_6">
    <div class="month_year"></div>
    <table class="table_month_horiz"></table>
    </div>
    <div id="month_minis_5">
    <div class="month_year"></div>
    <table class="table_month_horiz"></table>
    </div>
    <div id="month_minis_4">
    <div class="month_year"></div>
    <table class="table_month_horiz"></table>
    </div>
    <div id="month_minis_3">
    <div class="month_year"></div>
    <table class="table_month_horiz"></table>
    </div>
    <div id="month_minis_2">
    <div class="month_year"></div>
    <table class="table_month_horiz"></table>
    </div>
    <div id="month_minis_1">
    <div class="month_year"></div>
    <table class="table_month_horiz"></table>
    </div>
    
    <div id="month_cur">
    <div class="month_year"></div>
    <table class="table_month_horiz"></table>
    </div>
    
    <div id="month_plus_1">
    <div class="month_year"></div>
    <table class="table_month_horiz"></table>
    </div>
    <div id="month_plus_2">
    <div class="month_year"></div>
    <table class="table_month_horiz"></table>
    </div>
    <div id="month_plus_3">
    <div class="month_year"></div>
    <table class="table_month_horiz"></table>
    </div>
    <div id="month_plus_4">
    <div class="month_year"></div>
    <table class="table_month_horiz"></table>
    </div>
    <div id="month_plus_5">
    <div class="month_year"></div>
    <table class="table_month_horiz"></table>
    </div>
    <div id="month_plus_6">
    <div class="month_year"></div>
    <table class="table_month_horiz"></table>
    </div>
    <div id="month_plus_7">
    <div class="month_year"></div>
    <table class="table_month_horiz"></table>
    </div>
    <div id="month_plus_8">
    <div class="month_year"></div>
    <table class="table_month_horiz"></table>
    </div>
    <div id="month_plus_9">
    <div class="month_year"></div>
    <table class="table_month_horiz"></table>
    </div>
    <div id="month_plus_10">
    <div class="month_year"></div>
    <table class="table_month_horiz"></table>
    </div>
    <div id="month_plus_11">
    <div class="month_year"></div>
    <table class="table_month_horiz"></table>
    </div>
    <span id="select_month">календарь на месяц</span>
    </div>
    </body>

вот несколько body, как правильно вставить таблицы календаря? чтобы скрипт работал независимо от наличия или отсутствия вертикальной или горизонтальной таблицы, спанов "календарь на месяц/год", кнопок +/-, "сегодня" ?

другими словами, помогите сделать универсальный скрипт, один для всех этих страниц, если надо вертикальный или горизонтальный календарь, или с переключением направления таблицы, календарь на месяц или год, квартал, полугодие, три(несколько) месяцев, с переключением отображения месяц/год, или без переключения,

кто может помочь?

Блондинка · #44 (**permalink**) 10.07.2021, 17:57

Сообщение от рони

я пытался ))) вариантов 20 календарей уже было за два года, но всё не впрок ...

сначала была мысль, получить скрипт при клике на кнопку меняется направление таблицы, а при клике на спан "календарь на месяц/год" скрыть див с календарём на месяц или год, но после этого поста и общения на других форумах решила предусмотреть квартал, полгола, три(несколько) месяцев, одним словом хочу получить универсальный календарь который зависит чисто от html.........

Форум

Справочник

Discord чат

Курсы javascript