<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> |
<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, как правильно вставить таблицы календаря? чтобы скрипт работал независимо от наличия или отсутствия вертикальной или горизонтальной таблицы, спанов "календарь на месяц/год", кнопок +/-, "сегодня" ? |
<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, как правильно вставить таблицы календаря? чтобы скрипт работал независимо от наличия или отсутствия вертикальной или горизонтальной таблицы, спанов "календарь на месяц/год", кнопок +/-, "сегодня" ? другими словами, помогите сделать универсальный скрипт, один для всех этих страниц, если надо вертикальный или горизонтальный календарь, или с переключением направления таблицы, календарь на месяц или год, квартал, полугодие, три(несколько) месяцев, с переключением отображения месяц/год, или без переключения, кто может помочь? |
Цитата:
|
Часовой пояс GMT +3, время: 21:09. |