промяна на позицията на бутона на пълния календар

Имам изискване, където трябва да се използва плъгин jquery fullcalendar. Но трябва да го персонализирам. Например, трябва да променя позицията на бутоните на изглед (ден/месец/седмица) в най-лявата част на екрана. Когато се опитах да модифицирам fullcalendar.js, видях, че може да се движи само вдясно/вляво на календара. Не отвъд това. Трябва да имам тези бутони вляво като в страничната лента на страница. Възможно ли е?? Или има други опции за това??

Предполагам, че един от начините би бил да създам бутоните сам и да ги свържа с приспособлението Fullcalendar. Но аз не съм професионалист на jquery и бих предпочел да опитам нещо по-просто. Благодаря.


jquery fullcalendar
person rubyist    schedule 27.10.2012    source източник
comment
Може да опитате CSS вместо fullcalendar.js. position: fixed; left: 0; подравнява елементи към браузъра chrome.   -  person Dylan Valade    schedule 27.10.2012
comment
Да.. но това ще го подравни в лявата част на екрана. Но се показва като един ред. Трябва да се показва като списък. Така че моето изискване е като: Ще има бутон/връзка в страничната лента като Календар и когато щракнете върху него, това ще разшири наличните изгледи на календара като списъци.   -  person rubyist    schedule 27.10.2012

Отговори (3)


arrow_upward
1
arrow_downward

Първо, можете да премахнете бутоните ден/месец/седмица от дефиницията на заглавката на вашия FullCalendar init. След това можете да използвате функция, подобна на следната, за да свържете персонализираните си бутони за извършване на операциите за превключване на изгледа:

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

Можете да използвате de presets за 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