How can I highlight every 7th day from current day?

Question

I have a fullcalendar defaults to week view. Current day is highlighted. There is another external event div from where an event need to drop on the calendar. This things works as designed. There is also a custom button clicking on which event should be added on the calendar. By default it drops on current date. But when user changes week, navigate to next or previous week, no day is selected. I want to not only select every 7th day (+7 for next or -7 for previous) to be default day and change its color. Difficult to provide full code, but here it, run the following link and set the view to week view. When you open week view, Friday 26th is current day and selected. When user navigate to Prev or next, I want to 2nd Nov or 19th Oct be the default day and be highlighted (color)
https://fullcalendar.io/docs/external-dragging-demo I have tried few things without any success:

 $('.fc-prev-button').click(function(){
    	//currCalDate is global variable to store the current day
    	 currCalDate.setDate(currCalDate.getDate() - 7);
    	 console.log(currCalDate);
    	 $('#calendar').fullCalendar('gotoDate', currCalDate);
    });
    
    $('.fc-next-button').click(function(){
      currCalDate.setDate(currCalDate.getDate() + 7);
    $('#calendar').fullCalendar('gotoDate', currCalDate);
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Then tried using dayRender in FC definition or may be something can be done with viewRender?

dayRender: function (date, cell) {
                    var today = new Date(currCalDate);
                    date = moment(date).toDate();
                    if (date.getDate() === today.getDate()) {
                        cell.css("background-color", "red");
                    }
                },

What do you mean by "By default it drops on current date"? Because in dragging demo you are pointing to, a draggable event drops to point where mouse is released, not to current date. — Sven Liivak
@SvenLiivak, I just changed the question. Thanks for pointing it out. There is drag and drop which works. Then there is a button clicking on that an appointment is set for the user for the specific day. By default this specific day is current day. But when user navigate between the weeks there is no way to tell to user which day appointment is being set. — CFML_Developer
Why have you included a snippet that does not, and cannot, do anything without the HTML, and enough of the JavaScript and CSS? — David Thomas
Why on earth are you trying to change value of current date instead of changing the "default" value of this mysterious button? — Sven Liivak

Ajay Malhotra Ajay Malhotra · Accepted Answer · 2018-10-30T09:27:35

Here, you can check the code for next 7th day highlight:

    dayRender: function (date, cell) {
                var today = new Date();
                date = moment(date).toDate();

                dateFromplus = moment().add(7,'d').format('YYYY-MM-DD');
                $(".fc-day[data-date='"+dateFromplus+"']").css("background-color", "red");

                dateFromminus = moment().subtract(7,'d').format('YYYY-MM-DD');
                $(".fc-day[data-date='"+dateFromminus+"']").css("background-color", "red");

            }

For more fullcalendar info : fullcalendar hacks

How can I highlight every 7th day from current day?

1 Answers