Dahock Сообщество - Календарь

Простой календарь для сайта

Предлагаем Вашему вниманию JavaScript код, который позволит Вам реализовать на своем сайте календарь. Данный календарь будет способен рассчитать сколько дней в месяце, и какими днями недели будут числа в указанных месяцах и годах.

Предлагаемый нами календарь содержит множество настроек, которые позволяют настраивать его отображение.

Чуть ниже Вы можете наблюдать пример работы предлагаемого Вам скрипта календаря:

 
Пн Вт Ср Чт Пт Сб Вс
        1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
             

Для того чтобы получить точно такой же календарь, как и в примере, показанном чуть выше, скопируйте данный JavaScript код на свою страничку:

Обращаем Ваше внимание на то, что текст скрипта приведен с переносами длинных строк, которые после копирования необходимо вновь написать в одну строку!

В том месте Вашей странички, где Вы планируете показывать данный календарь, добавьте следующий код:

<script type="text/javascript">
var dDate=new Date();
var cur_month=dDate.getMonth();
var day_of_month=dDate.getDate();
var cur_year=dDate.getFullYear();
var Prev_Element=new Object();
var bgcolor, webgcolor, wecolor, nwecolor, tbgcolor, ntbgcolor, sbgcolor;

function fToggle_color(el) {
var toggle_col="#ff0000";
if (el.id=="cal_text") {
  if (el.color==toggle_col) el.color="";
  else el.color=toggle_col;
}
else if ((el.id=="cal_cell") || (el.id=="today_cell")) {
 for (var i in el.children) {
  if (el.children[i].id=="cal_text") {
   if (el.children[i].color==toggle_col) el.children[i].color="";
   else el.children[i].color=toggle_col;
  }
 }
}
}

function opted_day(el) {
if (el.id=="cal_cell") {
 if (!isNaN(parseInt(el.children["cal_text"].innerText))) {
  el.bgColor=sbgcolor;
  Prev_Element.bgColor=ntbgcolor;
  document.all.selected_date.value=parseInt(el.children["cal_text"].innerText);
  Prev_Element=el;
 }
}
}

function DaysInMonth(iMonth, iYear) {
var prev_date=new Date(iYear, iMonth, 0);
return prev_date.getDate();
}

function build_cal(iYear, iMonth) {
var the_month=new Array();
    the_month[0]=new Array("Пн","Вт","Ср","Чт","Пт","Сб","Вс");
    the_month[1]=new Array(7);
    the_month[2]=new Array(7);
    the_month[3]=new Array(7);
    the_month[4]=new Array(7);
    the_month[5]=new Array(7);
    the_month[6]=new Array(7);
var dCalDate=new Date(iYear, iMonth-1, 1);
var day_first=dCalDate.getDay();
var iDaysInMonth=DaysInMonth(iMonth, iYear);
var iVarDate=1;
var i, d, w;
if (day_first==0) day_first=6;
else day_first=day_first-1;

for (d=day_first; d < 7; d++) {
 the_month[1][d]=iVarDate;
 iVarDate++;
}
for (w=2; w < 7; w++) {
 for (d=0; d < 7; d++) {
  if (iVarDate <= iDaysInMonth) {
   the_month[w][d]=iVarDate;
   iVarDate++;
  }
 }
}
return the_month;
}

function draw_cal(iYear, iMonth, cell_width, cell_height, text_weight, ibg_col,
                  iwebg_col, inwe_col, iwe_col, itbg_col, intbg_col, isbg_col) {
bgcolor=ibg_col;
webgcolor=iwebg_col;
nwecolor=inwe_col;
wecolor=iwe_col;
tbgcolor=itbg_col;
ntbgcolor=intbg_col;
sbgcolor=isbg_col;

var my_month;
my_month=build_cal(iYear, iMonth);
document.write("<table border='0'>")
document.write("<tr align='center' style='background-color:" + bgcolor +
                ";color:" + nwecolor +"'>");
document.write("<td><b>" + my_month[0][0] + "</b></td>");
document.write("<td><b>" + my_month[0][1] + "</b></td>");
document.write("<td><b>" + my_month[0][2] + "</b></td>");
document.write("<td><b>" + my_month[0][3] + "</b></td>");
document.write("<td><b>" + my_month[0][4] + "</b></td>");
document.write("<td style='background-color:" + webgcolor + ";color:" +
                wecolor + "'><b>" + my_month[0][5] + "</b></td>");
document.write("<td style='background-color:" + webgcolor + ";color:" +
                wecolor + "'><b>" + my_month[0][6] + "</b></td>");
document.write("</tr>");
for (w=1; w < 7; w++) {
 document.write("<tr align='center' valign='center'>")
 for (d=0; d < 7; d++) {
  if (my_month[w][d]==day_of_month) document.write("<td id=today_cell bgcolor='" +
          tbgcolor + "'width='" + cell_width + "' height='" + cell_height +
          "'style='cursor:Hand;font-weight:" +
          text_weight + "' onMouseOver='fToggle_color(this)' +
          onMouseOut='fToggle_color(this)' onclick='opted_day(this)'>");
  else document.write("<td id=cal_cell bgcolor='" + ntbgcolor + "'width='" +
          cell_width + "' height='" + cell_height +
          "'style='cursor:Hand;font-weight:" +
          text_weight + "' onMouseOver='fToggle_color(this)' +
          onMouseOut='fToggle_color(this)' onclick='opted_day(this)'>");

  if (!isNaN(my_month[w][d]))
          document.write("<font id=cal_text onclick=opted_day(this)>" +
          my_month[w][d]);
  else document.write("<font id=cal_text onclick=opted_day(this)>&nbsp;");
 document.write("</td>")
 }
document.write("</tr>");
}
document.write("</table>")
}

function update(iYear, iMonth) {
my_month=build_cal(iYear, iMonth);
Prev_Element.bgColor=ntbgcolor;
if (((iMonth-1)==cur_month) && (iYear==cur_year)) today_cell.bgColor=tbgcolor;
else today_cell.bgColor=ntbgcolor;

document.all.selected_date.value="";
for (w=1; w < 7; w++) {
 for (d=0; d < 7; d++) {
  if (!isNaN(my_month[w][d])) cal_text[((7*w)+d)-7].innerText=my_month[w][d];
  else cal_text[((7*w)+d)-7].innerText=" ";
 }
}
}
</script>

<form name="c_fоrm" action="">
<input type="hidden" name="selected_date" value="">

<select name="sel_month"
    onchange='update(c_fоrm.sel_year.value, c_fоrm.sel_month.value)'>
 <option value="1">Январь</option>
 <option value="2">Февраль</option>
 <option value="3">Март</option>
 <option value="4">Апрель</option>
 <option value="5">Май</option>
 <option value="6">Июнь</option>
 <option value="7">Июль</option>
 <option value="8">Август</option>
 <option value="9">Сентябрь</option>
 <option value="10">Октябрь</option>
 <option value="11">Ноябрь</option>
 <option value="12">Декабрь</option>
</select>

<select name="sel_year"
    onchange='update(c_fоrm.sel_year.value, c_fоrm.sel_month.value)'>
 <option value="2013">2013</option>
 <option value="2014">2014</option>
 <option value="2015">2015</option>
 <option value="2016">2016</option>
 <option value="2017">2017</option>
 </select>
</form>

<script type="text/javascript">
var cur_date=new Date();
draw_cal(cur_date.getFullYear(), cur_date.getMonth()+1, 30, 16, "bold",
    "gray", "red", "white", "white", "red", "silver", "#F6F6F6");
c_fоrm.sel_month.options[cur_date.getMonth()].selected=true;
for (i=0; i < c_fоrm.sel_year.length; i++)
 if (c_fоrm.sel_year.options[i].value==cur_date.getFullYear())
    c_fоrm.sel_year.options[i].selected=true;
</script>

Еще раз обращаем Ваше внимание на то, что текст скрипта в некоторых местах приведен с переносами длинных строк, которые после копирования к себе на сайт необходимо вновь написать в одну строку!

И пусть большой размер приведенного кода Вас не пугает, он нисколько не будет тормозить работу Вашего сайта.

 

Задачи 2019
Просмотров: 244
Рейтинг: 3.6

Обновление
Просмотров: 306
Рейтинг: 2.5

Закрыть меню
Боковая Панель Закрыть

 Навигация Основное:

На Музыкальный Сайт  (Музыкальный Сайт на котором эксклюзивное видео и аудиозаписи с RaidCall)

На Кино Сайт    (Кино Сайт где вы найдете мультфильмы,фильмы и шоу а также фильмы от Dahock)

На Хоррор Сайт  (Мистический Сайт где только мрак и тишина любителям мистики)

На Manual Dahock  (Мануал для тех кто попал впервые на Портал)

На XDXKX  (Hard Anime Сайт только +18)

На Газета DHK  (Авторский Информационный Блог)

Каналы:

Ютуб (Основной канал  всегда самое первое видео выходит раньше всего)

Рутуб (Второстепенный канал на русскоязычном портале)

Соц-Сети:

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

Одноклассники  (Для тех кто не сидит не где кроме Одноклассники)

Фейсбук  (Всемирная соц сеть где выходят не все новости а только отсортированные)

МайлРу  (Редкая группа редко выходят новости и видео для тех кто не любит ничего кроме МайлРу)

Твиттер  (Всегда свежие статейки ссылки и цитаты)

close