How to show date and weekday name in fullcallendar?

Question

I am using a full calendar API api to display a calendar on my website inspired by the promo.com calendar which looks like this.

Here is my solution using react

Answer 1

@user9964622, As a starting point below code can be used, it should be optimized further by CSS and your code:

Write a function to get day name:

function getDayName(date) {
    var days = new Array(7);
    days[0] = "SUN";
    days[1] = "MON";
    days[2] = "TUE";
    days[3] = "WED";
    days[4] = "THU";
    days[5] = "FRI";
    days[6] = "SAT";
    var r = days[date.getDay()];
    return (r);
}

Include following code in FullCalendar:

columnHeader: false,    
dayRender: function( dayRenderInfo ) {
    var dayName = getDayName(dayRenderInfo.date);
    var dayNumber = dayRenderInfo.date.getDate();
    dayRenderInfo.el.innerHTML = dayName + "
" + dayNumber;
}

You should apply css to hide the current date:

.fc-day-number {display: none;}

Further you can apply styles and include more html in dayRender.