FullCalendar изменить вид от месяца к дню

В моем приложении FullCalendar, а точнее в визуализации представления месяца, у меня есть ссылка, которая появляется всякий раз, когда в один и тот же день добавляются 3 или более событий, а затем я хочу, чтобы эта ссылка приводила к режиму просмотра дня для этого конкретного дня.

$(".events-view-more a").click(function () {
    alert("clicou");
});

Родительский (родительский для .events-view-more a) элемент td содержит атрибут данных со значением даты, содержащим что-то вроде «2013-11-29».

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


jquery calendar fullcalendar
person rodrigoalvesvieira    schedule 29.11.2013    source источник
comment
проверьте changeView и gotoDate   -  person Henrique C.    schedule 30.11.2013

Ответы (6)


arrow_upward
16
arrow_downward

Что-то вроде этого перенесет вас из представления «Месяц» в представление «День», если вы щелкните в любом месте ячейки в представлении «Месяц»:

$('#calendar').fullCalendar({

   //other parameters here

   dayClick: function(date, jsEvent, view) {

            $('#calendar').fullCalendar('gotoDate',date);
            $('#calendar').fullCalendar('changeView','agendaDay');

   }

});

Надеюсь, это будет полезно для других, я знаю, что это старый пост.

person Jeff K    schedule 01.03.2016
comment
Это работает, но вам нужно перевернуть порядок. Измените вид, а затем дату, иначе вы вернетесь к дате по умолчанию! - person Kosmonaut; 09.11.2017

arrow_upward
2
arrow_downward

Для всех, кто ищет решение не jquery:

window.calendar = new FullCalendar.Calendar(element, options);

// do stuff ...

window.calendar.changeView("timeGridDay")
person WΩLLE - ˈvɔlə    schedule 27.01.2020

arrow_upward
0
arrow_downward

Единственное, что вам нужно сделать, это указать имя представления в header (например, agendaDay или agendaWeek):

$('#calendar').fullCalendar({
    // put your options and callbacks here

    header: {
        left:   'title',
        center: '',
        right:  'today prev,next agendaDay,agendaWeek'
    },

    defaultView: 'agendaWeek'
});
person Dunken    schedule 24.02.2016

arrow_upward
0
arrow_downward

@rodrigoalves Попробуйте один ниже в конфигурации вашего календаря.

eventLimit: 3,
eventLimitClick: 'day',

У меня это работает.

person Chintan Mirani    schedule 02.03.2016

arrow_upward
0
arrow_downward

Из вышесказанного вот мое решение для angularjs

$scope.alertDayClick = function(event) {

    // if on month view go day view
    var view = uiCalendarConfig.calendars.myCalendar.fullCalendar( 'getView' );

    if (view.type === 'month') {
        console.log(view.type);
        uiCalendarConfig.calendars.myCalendar.fullCalendar('changeView','agendaDay');
        uiCalendarConfig.calendars.myCalendar.fullCalendar( 'gotoDate', event );
        return;
    }
}

Я настроил свой Cal div вот так

<div ui-calendar="uiConfig.calendar" config="uiConfig.calendar" calendar="myCalendar" data-ng-model="eventSources"></div>
person DogCoffee    schedule 02.01.2017

arrow_upward

arrow_downward

person    schedule
comment
Пожалуйста, уточните свой ответ и кратко опишите проблему и решение, пожалуйста, прочтите это: stackoverflow.com/help/how-to-answer - person Adrian Forsius; 10.10.2014
comment
Вот как я это делаю в приложении, которое создаю. По сути, это обработчик события dayClick. Это событие, очевидно, происходит при щелчке дня. Также есть weekClick для просмотра недели. Бит ниже: $ ('# calendar'). FullCalendar ('changeView', 'basicDay'); На самом деле все, что вам нужно. Селектор #calendar - это контейнер, который вы изначально вызвали fullCalendar, параметр changeView - это вызываемая функция, а параметр basicDay - это представление, которое может быть любым из представлений, предоставляемых fullCalendar. - person Chuck Hriczko; 07.11.2014