Appointment calender / display availability and non-availability as bars

Hi all,

I have a question about the display of availabilities. Is it possible to display the availabilities with colored bars like in the attached example ? Green means available and you can also book appointments, red means not available and therefore no appointments can be booked there.

We are using JQUERY.

Thanks for any tips and help on how we could make it work.

Best regards,

Hi Marcus,

I would suggest taking a look at [colors]( you can use them to assign a css class where you can add your colored borders using the cssClass property.

Hello @Marcus :wave:

Yes, that’s achievable with:

  • colors option by using his background and resource properties :point_down:

    colors: [{
    // color only the last 30 minutes of Sundays of couse you can specify a specific date as well
    start: ‘23:30’,
    end: ‘00:00’,
    recurring: {
    repeat: ‘weekly’,
    weekDays: ‘SU’
    background: “green”,
    resource: 1 // here you need to specify resource ids for the color

  • or you can adjust it with custom CSS