Mahdi Jafari
Mahdi Jafari

Reputation: 415

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 %}
    ],
});

Upvotes: 1

Views: 1281

Answers (1)

Mahdi Jafari
Mahdi Jafari

Reputation: 415

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

Upvotes: 2

Related Questions