изменить положение кнопки полного календаря

У меня есть требование, в котором следует использовать плагин fullcalendar jquery. Но мне нужно его настроить. Например, мне нужно изменить положение кнопок просмотра (день/месяц/неделя) в крайнем левом углу экрана. Когда я попытался изменить fullcalendar.js, я увидел, что он может перемещаться только вправо/влево от календаря. Не более того. Мне нужно, чтобы эти кнопки были слева, как на боковой панели страницы. Является ли это возможным?? Или есть еще варианты??

Я предполагаю, что один из способов — создать кнопки самостоятельно и подключить их к виджету Fullcalendar. Но я не профессионал jquery, и я бы предпочел попробовать что-нибудь попроще. Спасибо.


jquery fullcalendar
person rubyist    schedule 27.10.2012    source источник
comment
Вы можете попробовать CSS вместо fullcalendar.js. position: fixed; left: 0; выравнивает элементы по хрому браузера.   -  person Dylan Valade    schedule 27.10.2012
comment
Да... но это выровняет его по левому краю экрана. Но он отображается как одна строка. Мне нужно отображать как список. Итак, мое требование: на боковой панели будет кнопка/ссылка в виде календаря, и когда вы нажмете на нее, она расширит доступные представления календаря в виде списков.   -  person rubyist    schedule 27.10.2012

Ответы (3)


arrow_upward
1
arrow_downward

Во-первых, вы можете удалить кнопки дня/месяца/недели из определения заголовка файла инициализации FullCalendar. Затем вы можете использовать функцию, подобную следующей, чтобы связать свои пользовательские кнопки для выполнения операций переключения вида:

function switchView(viewName) {
  $('#calendar').fullCalendar('changeView', viewName);
}

Позвольте мне знать, если это помогает!

person ganeshk    schedule 27.10.2012

arrow_upward
3
arrow_downward

Простое и быстрое решение — оставить плагин JS в покое и просто скрыть встроенные кнопки и добавить свои собственные там, где вы хотите.

В вашем обработчике кликов для ваших кнопок вы запускаете щелчок на связанной кнопке плагина. Это так же просто, как проверить класс каждой кнопки в представлении html консоли браузера и добавить в код, который я начал

Пример

/* quick hide with script for a test, best done with css */
$('.fc-header-right').hide();

$('#myWeekViewButton').click(function(){
    $('.fc-button-agendaWeek').click();
});

Это хорошо тестируется в консоли браузера на демонстрационном сайте.

person charlietfl    schedule 27.10.2012

arrow_upward
0
arrow_downward

Вы можете использовать пресеты для headerToolbar

var calendar = new FullCalendar.Calendar(calendarEl, {
        headerToolbar: {
            center: 'dayGridMonth,timeGridFourDay'
        },.....

https://fullcalendar.io/docs/custom-view-with-settings

person elazafran    schedule 11.03.2021