Support forumCategory: Questionscolor and table time
Tuonoman asked 5 years ago

Hello

Thank you very much for your plugin, which we will certainly use to reserve places in our small toy library for handicapped children.
https://www.handmirable.fr/reservation-ludotheque/
I have several problems
1: the available dates are white, I want them to be orange.
2: On the current date, the timetables are displayed, how to hide them?

Thank you for your help

8 Answers
Nikola Loncar Staff answered 5 years ago

Hi,

please add this to custom styles in EA Settings > Customize page:

.ea-bootstrap td a {
color: #2A6496;
}

.ea-bootstrap td:visited, .ui-state-active {
color: #fff;
}

.ea-bootstrap td.ui-datepicker-current-day {
background-color: #2A6496;
}

Regarding the current date it will open time table automatically.

Best regards,
Nikola

Tuonoman answered 5 years ago

Hi, 
Thanck it works, 
So it is not possible to disable the current date?
so you don’t have the time table visible?
Best regards

Nikola Loncar Staff replied 5 years ago

No, it is auto selected on show. I will see what can be done there.

Best regards,
Nikola

Tuonoman replied 5 years ago

Thanks Nikola

Tuonoman replied 5 years ago

Hi, I have a problem with the arrows “prev and next”
I can’t find the css elements
can you help ?

Tuonoman answered 5 years ago

Hi, I have a problem with the arrows “prev and next”
I can’t find the css elements
can you help ?

Nikola Loncar Staff answered 5 years ago

Hi,

your theme is setting white color for almost every link. Class for right arrow is

.ui-datepicker-next

and for previous

.ui-datepicker-prev

Best regards,
Nikola

Tuonoman replied 5 years ago

Hi,
I tried that request.

.ea-bootstrap td.ui-datepicker-next {
background-color: #fc7e00;
}
but nothing change

best regards,

Tuonoman answered 5 years ago

that works !!
thanks Nikola !!

Nikola Loncar Staff replied 5 years ago

you’re welcome 🙂

Best regards,
Nikola

biosdi answered 4 years ago

Hi Nikola!
 
How can I change color of the square background (now white) of the date box?

Nikola Loncar Staff replied 4 years ago

Hi, try for example:

.ea-bootstrap .calendar.disabled .block { background-color: red; }

In EA Settings > Customize page > Custom styles

Best regards,
Nikola

biosdi replied 4 years ago

Thanks Nikola! However, it makes the whole calendar red… 🙁

Nikola Loncar Staff replied 4 years ago

Can you please take a screen shot with marked part that you want to change. I will write styles for that after I see it.

Best regards,
Nikola

biosdi replied 4 years ago

Here you are: https://ibb.co/mvi1V0

The best solution would be the red bar across each unavailable date. If unable to write a style for that, the grayed out background would be fine. Thanks

Nikola Loncar Staff replied 4 years ago

CSS Class for that is .no-slots so you can add it to custom styles section like this:

.ea-bootstrap .no-slots.no-slots {
background-color: red;
}

Change red color into anything, this is just for testing purpose. 🙂

Best regards,
Nikola

biosdi replied 4 years ago

Thanks. However, I tried it but nothing changes… 🙁

Nikola Loncar Staff replied 4 years ago

try this:

.ea-bootstrap .no-slots.no-slots.no-slots {
background-color: red;
}

biosdi replied 4 years ago

That worked!! Thanks

And, which CSS Class for available slots, please? Thank again!

Nikola Loncar Staff replied 4 years ago

it’s .free 🙂

Best regards,
Nikola

biosdi answered 4 years ago

And, can I add a legend to explain (e.g.: red=no availability ; blue=date available)?
 
Thanks a lot
 

Nikola Loncar Staff replied 4 years ago

You can do that above shortcode on that page. 🙂

Best regards,
Nikola

federicoblank answered 2 years ago

Hi, this is a wonderful plugin, thank very much for creating it. I have a similar question, I tried using the css that you posted but couldn´t reach my goal.
I need to change the color of the active days of the calendar, they are red now, and I´ll like to change it to a different color. I check on the bootstrap css file without any luck, and the same implementing the css stated above.
This is the link to the website: https://royaltymedicalgroup.com
Thank you in advance!