Jquery FullCalendar - Default Background and Text for Available TimeSlots in AgendaWeek view

Question

I'm using jquery FullCalendar agendaWeek view (no other views).
http://fullcalendar.io/views/agendaWeek/

I will implement 3 eventSources (each one with a different background color).
All events will be backgroundEvents.
http://fullcalendar.io/docs/event_rendering/Background_Events/

Summary: I want to implement a standard Week Timetable with 1h timeslots, green background if the hour is available and red if it is not available.
Extremely simple.

Problem 1: I would like to set a green background to all the available timeslots (= timeslots with no events).

Problem 2: I would like to set a default "Foo" text inside every available timeslot.

Here is the code:

    $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'

        },
        defaultDate: '2015-02-12',
        slotDuration: '00:60:00',
        minTime: "08:00:00",
        maxTime: "22:00:00",
        defaultView: 'agendaWeek',
        lang: "it",
        height: "auto",
        allDaySlot: false,
        axisFormat: 'H:mm',
        editable: true,
        events: [

            {
                id: 'Meeting1',
                start: '2015-02-11T10:00:00',
                end: '2015-02-11T11:00:00',
                rendering: 'background',
                backgroundColor: 'red'
            },
            {
                id: 'Meeting2',
                start: '2015-02-13T15:00:00',
                end: '2015-02-13T16:00:00',
                rendering: 'background',
                color: 'red'
            },


        ]
    });

Please note that (as stated above), in the real project the events data will derive from 3 ajax sources... but (for the purpose of this specific question) in the code above are passed as an array.

what have you tried? please post code and specific issues you are having. solving your problems can be done many different ways, via backend or just in javascript on the frontend. — warath-coder
Hi!! Thank you for the comment. I updated the question as per your request. — Igor Carmagna

Luís Cruz Luís Cruz · Accepted Answer · 2015-03-06T14:31:24

For your first problem, you can change the colors with the following CSS:

.fc-widget-content {
    background-color: green;
}

.fc-axis {
    background-color: white;
}

.fc-bgevent {
    opacity: 1;
}

Check this jsfiddle that shows the result you want.

Your second problem is more complex and I haven't found a simple solution. You need to know that the calendar is build through tables and each timeslot has two cells (<td>). One is for the time axis (eg: 09:00, 10:00, 11:00) and the other is for the events of all days.

This means that you don't have a cell for each timeslot/day. Even if you use jQuery or CSS, the most you can have is one "Foo" for each timeslot.

The events are divs with position: absolute that stand on top of the cell.

One way to resolve your issue would be to create (on the server side) one event for each timeslot available with the green background and the "Foo" text. However, this may increase the time needed to render the calendar.

Jquery FullCalendar - Default Background and Text for Available TimeSlots in AgendaWeek view

1 Answers