Search code examples
jquerydjangocalendarfullcalendarfullcalendar-3

Set background color for each days of week in fullcalendar if a criteria matches?


I use django with fullcalendar and I want to change the color of days based of user's schedule.

here is the structure of the user's schedule:

Sunday: off // e.g. color should be blue
Monday: work // e.g. color should be pink
Tuesday: home // e.g. color should be yellow
...

I want to change all Sunday's color to blue and so on.

enter image description here

here is my code:

$('#calendar').fullCalendar({
    header: {
        left: 'prev',
        center: 'title',
        right: 'next'
    },
    defaultView: 'month',
    eventLimit: true, 
    events: [
        {% for event in events %}
            {
                title: "{{ event.title }}",
                date: '{{ event.date|date:"Y-m-d" }}',
                time: '{{ event.time }}',
                display: 'background'
            },
        {% endfor %}
    ],
});

Solution

  • I am not sure how optimize is my answer, but I implement it like this:

        dayRender: function(date, cell) {
            day = moment(date).format('ddd');
            if (day == 'Sat') {
                cell.css("background-color", "red");
            } else if (day == 'Sun') {
                cell.css("background-color", "orange");
            } else if (day == 'Mon') {
                cell.css("background-color", "green");
            } else if (day == 'Tue') {
                cell.css("background-color", "blue");
            } else if (day == 'Wed') {
                cell.css("background-color", "yellow");
            } else if (day == 'Thu') {
                cell.css("background-color", "purple");
            } else {
                cell.css("background-color", "pink");
            }
        }
    

    here is the result of code:

    enter image description here