sathish kumar sathish kumar -4 years ago 229
CSS Question

How to remove the empty column month in fullcalendar

1) I am using fullCalendar. ByDefault I want to show one month. Like 30 days or 31 days. If Feb means 28 days or 29 days.

2) Please look the fiddle.

3) It has showing one month and next month's half dates also displaying. I dont want t show that.

Please help me how can I remove that.


Please look at this fiddle,

header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
defaultDate: '2014-06-12',
editable: true,
$("td.fc-day.fc-widget-content").each(function( index ) {
var start = moment('2014-06-04'); //start date from start date input
var end = moment('2014-06-18'); //end date from end date input
var random = Math.floor(Math.random()*100);
var date = $(this).data('date'); //get current date in loop
var day = moment(date); //create a moment

//if day is greater than start date and less than end date, display.
if(day > start && day < end) {
$(this).append("<span style='font-size: 30px;font-weight: 600;color: green;'>"+random+"%</span>");

body {
margin-top: 40px;
text-align: center;
font-size: 13px;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;

#calendar {
width: 900px;
margin: 0 auto;

Start Date :<input type="text" id="endDate" name="end_datum" class="input_text" value="">
End date :<input type="text" id="endDate" name="end_datum" class="input_text" value=""></br></br></br></br>

<div id='calendar'></div>

Answer Source

You can hide content of fc-other-month and set height of widget content div like this.

.fc-other-month div {
  display: none;

.fc-widget-content div {
  height: 107px;

Updated the jsfiddle

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download