Блог

Главная - Вопросы по программированию - Календарь позиционирования

Календарь позиционирования

#html #css #fullcalendar

#HTML #css #полный календарь

Вопрос:

Как расположить календарь так, чтобы он отображался на странице, как в демо-версии?

Приведенный пример фиксирует календарь в верхней левой точке.. исправлено. Код

 <style>
  html, body {
    overflow: hidden; /* don't do scrollbars */
    font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
    font-size: 14px;
  }

  #calendar-container {
    width: 700px;
      position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }

  .fc-header-toolbar {
    /*
    the calendar will be butting up against the edges,
    but let's scoot in the header's buttons
    */
    padding-top: 1em;
    padding-left: 1em;
    padding-right: 1em;
  }
    .td_Info{
         width: 300px; 
    }
    .td_calendar{
         width: 700px; 
    }
</style>

</head>
<body>
<div>
<h1>My Page</h1>
</div><br/>
<table><tr>
        <td class="td_Info">INFO<br>
          more<br> 
          more <br>
          more <br>
          more<br></td>
        <td class="td_cal"><div style="max-width: 500px;">
          <div id='calendar-container'>
            <div id='calendar'></div>
          </div>
        </td></tr>
       </table>
    </div>
  </body>
</html>

Визуализация
Календарь

Я понимаю, что это из-за фиксированной позиции в стиле.. но когда я снимаю его и помещаю что-то вроде relative.. календарь больше не отображается должным образом..

визуализация календаря 2

Комментарии:

1. «нравится демо» … есть много демонстраций FullCalendar. Какой из них вы имеете в виду? В любом случае, вы, вероятно, можете просто изучить исходный код HTML этой страницы, чтобы увидеть, как они это сделали — функция просмотра исходного кода или инструментов разработчика в любом браузере может вам помочь. Также, вероятно, это просто какой-то общий HTML и CSS для создания контейнера, который находится по центру страницы. Ничего общего с FullCalendar конкретно.

2. Я пробовал это, но демонстрация, похоже, настроена в особом случае .. и когда я говорю «Демонстрация», я имею в виду страницу, которая представлена из полнокалендарных демонстраций. Смотрите: fullcalendar.io/#demos

3. Если вы откроете View Source на этой странице, вы увидите, что он заключен в некоторые divs, которые управляют макетом страницы (к ним должны быть прикреплены некоторые правила CSS, которые помогают с позиционированием — вы можете увидеть, что это такое, перейдя по ссылкам на файлы CSS, загруженные на страницу, и / или с помощьюиспользуйте инспектор элементов вашего браузера, чтобы увидеть, какие правила применяются к каждому элементу.

4. Единственное, что является «особым случаем», это то, что фактическое отображение календаря загружается через Javascript в зависимости от того, какая опция выбрана в меню слева. Календарь всегда загружается в <div class='demos__main-container' id='demo-content'> элемент (использование инспектора элементов браузера показывает вам этот факт). Но это не имеет отношения к общему макету или расположению этого элемента на странице, которая полностью статична.