Bezdepbonusu7Программирование: статьи и ответы

Вопрос

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

Автор вопроса: rodrigoalvesvieiraОтветов: 5

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

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

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

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

  • проверьте changeView и gotoDate Henrique C. 30.11.2013

jquerycalendarfullcalendar

Ответы

Ответ 1 · рейтинг 16 · Jeff K

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

$('#calendar').fullCalendar({

   //other parameters here

   dayClick: function(date, jsEvent, view) {

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

   }

});

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

Ответ 2 · рейтинг 2 · WΩLLE - ˈvɔlə

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

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

// do stuff ...

window.calendar.changeView("timeGridDay")

Ответ 3 · Dunken

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

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

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

    defaultView: 'agendaWeek'
});

Ответ 4 · Chintan Mirani

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

eventLimit: 3,
eventLimitClick: 'day',

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

Ответ 5 · DogCoffee

Из вышесказанного вот мое решение для 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>

Перевод вопроса и ответов сообщества Stack Overflow, лицензия CC BY-SA. Оригинал на Stack Overflow.

Похожие материалы