Appointment calender / display availability and non-availability as bars

#1

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.

image
image.png1159×717 39.9 KB

We are using JQUERY.

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

Best regards,
Marcus

#2

Hi Marcus,

I would suggest taking a look at [colors](https://docs.mobiscroll.com/5-26-2/javascript/eventcalendar#opt-colors) you can use them to assign a css class where you can add your colored borders using the cssClass property.

#3

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