CODEWITHSUNDEEP
fullcalendar
Watson
Watson

Reputation: 1425

FullCalendar Month View- one week hides day numbers (2 weeks unhides)

Version: 2.4.0

     $("#calendar").fullCalendar({
            height: 'auto',
            header: {
                left: '',
                center: 'title',
                right: ''
            },
            views: {
                agendaFourWeeks: {
                    type: 'month',
                    duration: { weeks: 1 },

                    fixedWeekCount: false,
                    title: "HELLO",
                      }
            },
            defaultView: 'agendaFourWeeks',

        });
    });

The above code hides the month day number located in each cell's upper right hand corner. If you change the week to 2 (weeks: 2) it then shows the day number in the upper right hand corner. I want to display the day number for 1 week.

Upvotes: 0

Views: 421

Answers (1)

Kem
Kem

Reputation: 646

Had the same issue as I was trying to place an icon in the day row as possible in the month view.

Found a solution by updating the cells in the row created when the weekNumbers option is set to true. This was done in the viewRender callback.

viewRender: function () {
  // add the day date to the empty cells of the week number row
  var i = 0;
  var viewStart = $('#calendar').fullCalendar('getView').intervalStart;
  $("#calendar").find('.fc-content-skeleton thead td:not(:nth-child(1))').empty().each( function(){
    $(this).append(moment(viewStart).add(i, 'days').format("D"));
    i = i + 1;
  });
},

Then style to match the month view

.fc-content-skeleton thead td {
  text-align: right;
  padding-right: 5px;
  padding-top:2px;
}
.fc-week-number {
  color: #bfbfbf;
}

Example working as this Fiddle ( is using the moment.js library also).

Upvotes: 1

Related Questions