Адаптивный календарь JavaScript для Bootstrap 3

Адаптивный календарь JavaScript для Bootstrap 3

Адаптивный календарь на весь год для сайта, сделан на JavaScript для использования на сайтах с подключенным фреймворком Bootstrap 3, описаны настройки календаря и предоставлено рабочее демо.

Подключение и настройка календаря

Вам достаточно поместить скрипт календаря в зону разметки Bootstrap 3 и календарь будет отображаться на выделенном пространстве.

Вы можете добавить базовые селекторы для таблиц Bootstrap 3 или дописать необходимые свойства CSS в стилях.

Используемые классы Bootstrap 3 в календаре

class='table-responsive'
Класс адаптивности таблицы
class='table table-bordered'
Базовый класс таблицы + добавление бордюра таблице
class='text-center'
Класс соответствующий свойству text-align: center из CSS

Код установки с подключением файла Bootstrap 3

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.0/css/bootstrap.min.css" />

<script language="javascript">
function day_title(day_name){
document.write("<td class='text-center' style='width:13%'>"+day_name+"</td>")
}
function fill_table(month,month_length)
{ 
day=1
document.write("<div class='table-responsive'><table class='table table-bordered'><tr>")
document.write("<td colspan='7' class='text-center'><h4>"+month+" "+year+"</h4><tr>")
day_title("Воскресенье")
day_title("Понедельник")
day_title("Вторник")
day_title("Среда")
day_title("Четверг")
day_title("Пятница")
day_title("Суббота")
document.write("</tr><tr>")
for (var i=1;i<start_day;i++){
document.write("<td>")
}
for (var i=start_day;i<8;i++){
document.write("<td class='text-center'>"+day+"</td>")
day++
}
document.write("<tr>")
while (day <= month_length) {
for (var i=1;i<=7 && day<=month_length;i++){
document.write("<td class='text-center'>"+day+"</td>")
day++
}
document.write("</tr><tr>")
start_day=i
}
document.write("</tr></table></div><br />")
}
year= new Date().getFullYear()
today= new Date("Январь 1, "+year)
start_day = today.getDay() + 1
fill_table("Январь",31)
fill_table("Февраль",28)
fill_table("Март",31)
fill_table("Апрель",30)
fill_table("Май",31)
fill_table("Июнь",30)
fill_table("Июль",31)
fill_table("Август",31)
fill_table("Сентябрь",30)
fill_table("Октябрь",31)
fill_table("Ноябрь",30)
fill_table("Декабрь",31)
</script>

Готовое демо календаря + скрипт


<script language="javascript">
function day_title(day_name){
document.write("<td class='text-center' style='width:13%'>"+day_name+"</td>")
}
function fill_table(month,month_length)
{ 
day=1
document.write("<div class='table-responsive'><table class='table table-bordered'><tr>")
document.write("<td colspan='7' class='text-center'><h4>"+month+" "+year+"</h4><tr>")
day_title("Воскресенье")
day_title("Понедельник")
day_title("Вторник")
day_title("Среда")
day_title("Четверг")
day_title("Пятница")
day_title("Суббота")
document.write("</tr><tr>")
for (var i=1;i<start_day;i++){
document.write("<td>")
}
for (var i=start_day;i<8;i++){
document.write("<td class='text-center'>"+day+"</td>")
day++
}
document.write("<tr>")
while (day <= month_length) {
for (var i=1;i<=7 && day<=month_length;i++){
document.write("<td class='text-center'>"+day+"</td>")
day++
}
document.write("</tr><tr>")
start_day=i
}
document.write("</tr></table></div><br />")
}
year= new Date().getFullYear()
today= new Date("Январь 1, "+year)
start_day = today.getDay() + 1
fill_table("Январь",31)
fill_table("Февраль",28)
fill_table("Март",31)
fill_table("Апрель",30)
fill_table("Май",31)
fill_table("Июнь",30)
fill_table("Июль",31)
fill_table("Август",31)
fill_table("Сентябрь",30)
fill_table("Октябрь",31)
fill_table("Ноябрь",30)
fill_table("Декабрь",31)
</script>

Рейтинг: 5.0/5 из 1



Добавлено Автор Ник Источник Просмотров Комментариев Теги
01-02-2019 Михаил Меренков aTmpl © 47 0 bootstrap calendar, responsive cflendar, адаптивный календарь, javascript calendar, календарь Bootstrap