I have created an HTML table that resembles a calendar. Various events are registered in the calendar, each distinguished by its color.
However, I am looking to change the colors of the cells to be half and half.
https://i.sstatic.net/gaQq2.png
The image I desire is similar to this:
https://i.sstatic.net/Ic1Yl.png
Currently, my code looks like this: Events are linked to clicks. Is it possible to achieve this? And how can I make it happen?
If anyone has encountered a similar issue, please share your experience with me.
$("#our_calendar td")
.click(function() {
const green="rgb(0, 255, 0)";
const yellow="rgb(255, 255, 0)";
const transparent="rgba(0, 0, 0, 0)";
const red="rgb(255, 0, 0)";
const purple="rgb(255, 0, 255)";
console.log($(this).css('background-color'));
if ($(this).css('background-color') == transparent)
changecolor(this.id, green);
else if ($(this).css('background-color') == green)
changecolor(this.id, yellow);
else if ($(this).css('background-color') == yellow)
changecolor(this.id, purple);
else
changecolor(this.id, transparent);
});
function changecolor(id,color){
$("#"+id).css("background-color",color);}