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

Question

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.

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

I think you need to look at the documentation at `dayRender` where you can use `cell.css("background-color", "red")` — Carsten Løvbo Andersen, Jan 20 '22 at 09:01
Thanks @CarstenLøvboAndersen, I checked the docs and examples of dayRender. I set the background color, and it applies to all calendar, but I couldn't figure out how to set for specifics days of week. — Mahdi Jafari, Jan 20 '22 at 09:42
Background Events is the right approach, you just need to make them recurring on the relevant days - check the documentation for details — ADyson, Jan 20 '22 at 13:22

score 2 · Accepted Answer · answered Jan 20 '22 at 14:38

2

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:

answered Jan 20 '22 at 14:38

Mahdi Jafari

347
6
22

This is ok (although using an object with keys for the day of the week would enable it to be less repetitive) but using recurring background events would allow you to vary the colouring more easily based on individual users' settings, which I guess might be held in your database or something. With this system, that's harder and you're more reliant on hard-coded, preset values. So it works, but perhaps it's not optimal for a more refined and flexible implementation. – ADyson Jan 20 '22 at 14:39
@ADyson, Yeah, I store the schedule in the database and retrieve it when loading the page. you told me about recurring background events, but one thing I didn't get is that if we have no event in a day, can we still change the background of the day? or with one event can we colorize all day? and how to colorize specific days (e.g. all sunday: blue,....)? could you provide some code or explanations? – Mahdi Jafari Jan 20 '22 at 14:48
With one recurring event defined, you can put a colour in all days which match the pattern. E.g. you can tell it to colour all Mondays the same, you can restrict it to a specific date range if you want. Like I said, it's all in the fullcalendar documentation, did you look? there is already an article all about recurring events. – ADyson Jan 20 '22 at 14:50
However, you may need to upgrade your fullCalendar version to get support for recurring events, because it looks like maybe you are using version 3, which has been obsolete for quite a while. Recurring events are supported from version 4 onwards, but the current version (v5) has the most features, so I would advise you to use that. It has other advantages, new features, bug fixes, performance improvements etc, so it's long past the time when you should have been upgrading anyway. – ADyson Jan 20 '22 at 14:51
Thanks @ADyson a lot, Yeah I have read the docs, but didn't notice about it. I difinely consider doing it using recurring events. Thank you. – Mahdi Jafari Jan 20 '22 at 18:08

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

1 Answers1