Color Coding Calender Items

Topics related to AppGini plugins/add-ons go here.
Post Reply
Kire5
Posts: 7
Joined: 2014-07-27 13:07

Color Coding Calender Items

Post by Kire5 » 2020-10-19 21:18

With my implementation of the Calendar Plugin, I have various Clients (housed in a clients table) each with multiple upcoming "Events". Rather than color coding by event (in the calendar view), I need to color code by client (i.e. Every event on the calendar pertaining to Client1 would be one color, and so on).

I was thinking of including a hex color field in each Client's record and using that value to color code the strip that appears behind the text for that Client over in the calendar, if that would be possible.

I'm open to suggestion if anyone has any. I'm a bit lost on how to implement this if possible at all.

User avatar
onoehring
AppGini Super Hero
AppGini Super Hero
Posts: 1156
Joined: 2019-05-21 22:42
Location: Germany
Contact:

Re: Color Coding Calender Items

Post by onoehring » 2020-10-20 08:35

Hi,

as far as I know there is currently no easy way to add a color chooser.
I did something similar however - I implemented a lookup field which holds the colors. How I did it:
Create a table for the colors. Fields: ID, Colorname, Hexcode, Colordisplay, Color_sortorder.
ID: PK autoincrement
Colorname: Text, The name of the CSS color (I initially used only those), see https://www.w3schools.com/colors/colors_names.asp and https://www.w3schools.com/colors/colors_picker.asp
Hexcode: varchar(7), Hexcode of the color example: #aabb99
Colordisplay: Text and Richtext (!). In this field I put the HTML code to display the name of the color with the color as background color like this:

Code: Select all

<span style="background-color:#FFA07A;">lightsalmon</span>
Color_sortorder: int, a simple numer to have similar colors follow each other in the lookup field.

Then, create a lookup in your target table to list the colors. Show the Colordisplay sorted by Color_sortorder.

Later on, you can simply pull the hexcode from the table and set this as your desired color.

Looks like this:
Tableview color definition:
ap_color_1.png
ap_color_1.png (5.32 KiB) Viewed 1166 times
Tableview where color is needed:
ap_color_2.png
ap_color_2.png (5.74 KiB) Viewed 1166 times
Detailview (only where color is chosen):
ap_color_3.png
ap_color_3.png (4.87 KiB) Viewed 1166 times
Olaf

Post Reply