Pickaday: Howto style the Schedule button?

#1

Hello @all,

trying to build a ToDo-Manager inside TW, I choosed now https://kookma.github.io/TW-Pikaday/ von @Mohammad . The ToDo-List with a dynamic table inside there also almost fits my needs.

Now the whole yesterday I tried to style the schedule button.
There is already a styling (f.e. red background, if task is overdue). For all tasks which are not overdue (=today, tomorrow & everything else in the future), the button has white background with black text.

I successless tried to achieve that the button gets a different look, depending on the month of the due date (so, f.e. January blue, February grey,…).
Please don’t ask me, what I tried. Thousands of tries… I only can tell, that most of them were with regexp-filters.

So, please help me with this :slight_smile:.
I would like at most, that either the due-cell in the table would have a differen colour (like the first 2 tasks in the picture). Or that the schedule-button gets a colored border around like the 3. task in the picture.
If both is not possible /easy, then it would be also okay, when the complete background of the schedule button would get a different colour.
Yes, the coloring was made with a bit shivering hands… :grin:- it’s already a bit late… :wink:

TW Meine ToDo-Liste ScheduleButton
TW Meine ToDo-Liste ScheduleButton875×175 89.9 KB

Thank you all in advance, Noushka
TW 5.3.3, Firefox, Windows 10

#2

I am sure this is possible and some of our CSS experts may help you.

However one thing I do know is they will most likely use the browsers inspect function to see what style or class is applied to elements in the column. Then they can override that style, or may have to ensure the element is given a way to address it eg a class. Then use more css to get the result you are after.

With tables another approach to make it easier to follow is alternate row shading.

#3

Hi @TW_Tones ,

hope you had a good walk…
I also already had a deep look into the inspect function (yesterday before posting this question)- but without success…

So I still hope for help…

Yes, maybe I’ll do that later on. But for now the styling of the schedule button is more important for me.

#4

Still working on this…
Partly I have been a little bit successful, but only partly. I cannot find out, how to manage the rest.
Successful with: Changing button-backgroundcolor for “overdue” & for “due today”.
Only partly successful for:

  • “Due tomorrow” >The button-background got correctly yellow, but the original white button seems to be additionally behind it
  • “Due in january” >I can see the small button with lightblue background in the right corner, but the original white button is still additionally there behind.
    So, it seems, that I only need to remove the button with the white background. But I cannot find out, how to remove that one without destroying. Several times I tried now, sometimes it “finished” my browser, so I am scary now ;-).

When I know the solution for “due in january” I think I can then build the rest 11 months on my own.

Could you please help me with the styling? To experiment with it:
Testwiki with the relevant tiddlers for schedule-button-styling

Thanks a lot in advance!