Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 20.06.2019, 11:06
Новичок на форуме
Отправить личное сообщение для bohdan_a Посмотреть профиль Найти все сообщения от bohdan_a
 
Регистрация: 19.06.2019
Сообщений: 8

Нужно сделать 2 кнопки
подскажите как сделать 2 кнопки, которые будут генерировать календарь по коду ниже. Нужно чтобы одна кнопка, генерировала прошлый месяц, а другая - следующий месяц

function createCalendar(id, year, month) {
        const table = document.createElement('table');
        const header = document.createElement('tr');
        const daysOfWeek = ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'];
        const daysInMonth = new Date(year, month, 0).getDate();
        for (const day of daysOfWeek)
            header.insertAdjacentHTML('beforeend', `<th>${day}</th>`)
        table.append(header);
        let firstDay = (new Date(year, month - 1).getDay() + 6) % 7;
        let nextDayToAdd = 1 - firstDay;
        while (nextDayToAdd <= daysInMonth) {
            const week = document.createElement('tr');
            for (let i = 0; i < 7; i++) {
                const day = document.createElement('td');
                if (nextDayToAdd > 0 && nextDayToAdd <= daysInMonth)
                    day.innerHTML = nextDayToAdd;
                nextDayToAdd++;
                week.append(day);
            }
            table.append(week);
        }
        div.append(table);
        return table;
    }
let table = createCalendar("calendar", 2019, 6);
Ответить с цитированием
  #2 (permalink)  
Старый 20.06.2019, 12:38
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

календарь, кнопки для листания месяца
bohdan_a,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  td{
      border: 1px solid hsl(240, 100%, 40%);
      border-radius: 4px;
      text-align: center;
      width:  1.8em;
  }
  th {
     text-align: center;
  }

  #calendar button:after{
      content: 'prev';
  }
  #calendar button:nth-of-type(2):after{
      content: 'next';
  }
  </style>

</head>

<body>
<div id="calendar"></div>
  <script>
function createCalendar(id, year, month) {
        const table = document.createElement('table');
        const header = document.createElement('tr');
        const daysOfWeek = ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'];
        const data = new Date(year, month, 0);
        const daysInMonth = data.getDate();
        const nameMonth = new Intl.DateTimeFormat("en", {
        month: "long", year : 'numeric'}).format(data);
        table.insertAdjacentHTML('beforeend', `<tr><th colspan='7'>${nameMonth}</th></tr>`)
        for (const day of daysOfWeek)
            header.insertAdjacentHTML('beforeend', `<th>${day}</th>`)
        table.append(header);
        let firstDay = (new Date(year, month - 1).getDay() + 6) % 7;
        let nextDayToAdd = 1 - firstDay;
        while (nextDayToAdd <= daysInMonth) {
            const week = document.createElement('tr');
            for (let i = 0; i < 7; i++) {
                const day = document.createElement('td');
                if (nextDayToAdd > 0 && nextDayToAdd <= daysInMonth)
                    day.innerHTML = nextDayToAdd;
                nextDayToAdd++;
                week.append(day);
            }
            table.append(week);
        }
        let div = document.getElementById(id);
        div.innerHTML = "";
        div.append(table);
        [-1,1].forEach(n => {
            let button = document.createElement('button');
            button.addEventListener('click', () => createCalendar(id, year, month + n));
            div.append(button)
        })
        return table;
    }
let table = createCalendar("calendar", 2019, 6);

  </script>
</body>
</html>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Нужно сделать добавление обьектов в массив Romann Общие вопросы Javascript 1 10.09.2017 22:09
Как сделать нажатие кнопки? jonsinat2 Javascript под браузер 0 02.04.2017 10:13
Сделать кнопки без действенными на время анимации FredIkO Общие вопросы Javascript 3 06.06.2013 13:39
Нужно сделать открытие див блоков elizaveta199309 Общие вопросы Javascript 1 30.12.2012 20:50
Сделать кнопки next и prev bullet2018 Общие вопросы Javascript 10 27.10.2012 13:49