CODEWITHSUNDEEP
jquerycalendarfullcalendar
rodrigoalvesvieira
rodrigoalvesvieira

Reputation: 8062

FullCalendar change view from month to day

In my FullCalendar application, more specifically on the month view visualization, I have a link that appears whenever 3 or more events are added to the same day, then I want to make that link lead to the day view mode for that particular day.

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

The parent (parent of .events-view-more a) td element contains a data attribute with the date value containing something like "2013-11-29".

How can I use this to change the visualization mode to day view of that day?

Upvotes: 3

Views: 23979

Answers (7)

ˈvɔlə
ˈvɔlə

Reputation: 10242

For everyone searching for a non-jquery solution:

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

// do stuff ...

window.calendar.changeView("timeGridDay")

Upvotes: 2

DogCoffee
DogCoffee

Reputation: 19946

From the above here is my solution for 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;
    }
}

I set up my Cal div like this 

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

Upvotes: 0

Chintan Mirani
Chintan Mirani

Reputation: 1465

@rodrigoalves Try below one in your calendar configuration.

eventLimit: 3,
eventLimitClick: 'day',

This works for me.

Upvotes: 0

Jeff K
Jeff K

Reputation: 330

Something like this will take you from the Month view to the Day view if you click anywhere on the cell in the Month view:

$('#calendar').fullCalendar({

   //other parameters here          

   dayClick: function(date, jsEvent, view) {

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

   }

});

Hopefully this is useful for others, I know it is an old post.

Upvotes: 16

Dunken
Dunken

Reputation: 8681

The only thing you have to do is specifying the view-name in the header (e.g. agendaDay or agendaWeek):

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

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

    defaultView: 'agendaWeek'
});

Upvotes: 0

Fatih Bayhan
Fatih Bayhan

Reputation: 191

dayClick: function(date, jsEvent, view) {
    var ajandamodu=view.name;
    if(ajandamodu=='month')
    {                             
        $('#calendar').fullCalendar( 'changeView', 'basicDay'  );
    }
},

Upvotes: 1

Mahesh Reddy
Mahesh Reddy

Reputation: 356

$(".events-view-more a").click(function () {
    var date=new Date($(this).parents('td').attr('date'));
$('#fullCalendar').fullCalendar('gotoDate', date.getFullYear(), date.getMonth(), date.getDate());
});

Upvotes: 2

Related Questions