html body and altering colour of nav bullets

[drmowinckels]

Hi!

first of all, thanks for an awesome widget. I very quickly got it working and in general fixing the appearance to what I wanted.

I have a couple of tweaks I'm struggling with and hope you might help. Bear with me, my JS skills are horrible, and I'm still a little unsure what is lack of JS-skills and what is not understanding how the package functions connect to the underlying js.

1. I'd like to change the colour of the bullets at the top of month view, the nav-items, to another colour than blue. Same with the circle around todays date. I could not find what theme items would control that.

2. According to issue 380 in the tui.calendar github repo, the popupDetailsBody should be able to render html, but for me it is still rendering in plain text. Is there any particular trick to getting that working?

Thanks for any help.

[pvictor]

Hello!
Thanks for your kind words :)

Some elements of answers :

1. This must be feasible in CSS, where do you use a calendar ? shiny or markdown ? The circle around today's date is managed by the library itself, I don't know if there is an option to change it. The buttons, I added them myself, I chose blue by default, I'll see how to modify it.

2. I had also tried to put HTML in the popup but without success, I didn't see that it was now possible, I will update the library. Otherwise I had used a roundabout way to do this in shiny, example here:
   https://github.com/dreamRs/tuicalendr/blob/master/inst/calendar-examples/custom-popover.R

I'll keep you updated.

Victor

[drmowinckels]

Hey Victor!

Thanks for the quick reply.

I'm using this in markdown. Trying to integrate a simple calendar in a webpage based on markdown, and this widget sold me because it actually is interactive without the need of a shiny server.

Thanks for looking into it!

[pvictor]

Hello Athanasia,

I've updated the underlying JS library, so now you can have HTML in popups, example here : https://github.com/dreamRs/tuicalendr/blob/master/inst/calendar-examples/popup-html.R

Which gives :

You have to re-install package from GitHub to make it work.

For color around today date, I did'nt found an option to control it, so for now you can do it in CSS directly if you are in markdown by adding something like :

```{css}
.tui-full-calendar-weekday-grid-date-decorator {
 background: #ff1424 !important;
}
```

This will work for month view.

I'll look into the buttons and a way to customize them.

VIctor

[drmowinckels]

thanks for the html and the css fix, and thanks for being so quick about it!!

[drmowinckels]

Hey.

Again, thanks for the css and html popup fix. Working great on my end.

I found this snippet in the source that I'm pretty sure is the tidbit for the nav, and I've tried various css tricks to fix it, but have not got anywhere with it, I must admit that I'm no css wiz :/

Posting it here, so it might spark an idea on your end.

<span id="htmlwidget-4b65dbafcc61bfe39b08_menu_navi">
<button type="button" class="btn bttn-jelly bttn-sm bttn-primary bttn-no-outline move-today" data-action="move-today">Today</button>
<button type="button" class="btn bttn-jelly bttn-sm bttn-primary bttn-no-outline move-day" data-action="move-prev">
<i class="fa fa-chevron-left" data-action="move-prev"></i>
</button>
<button type="button" class="btn bttn-jelly bttn-sm bttn-primary bttn-no-outline move-day" data-action="move-next">
<i class="fa fa-chevron-right" data-action="move-next"></i>
</button>
</span>

[pvictor]

Hi Athanasia,
You're right that's the HTML code corresponding to buttons. I added a function bttn_options to allow change their appearance.

You can try :

# Use another button style
calendar(
  defaultView = "month", useNav = TRUE, 
  bttnOpts = bttn_options(
    class = "bttn-stretch bttn-sm bttn-warning"
  )
)

# Custom colors (background and text)
calendar(
  defaultView = "month", useNav = TRUE, 
  bttnOpts = bttn_options(bg = "#FE2E2E", color = "#FFF")
)

# both
calendar(
  defaultView = "month", useNav = TRUE, 
  bttnOpts = bttn_options(
    bg = "#04B431", color = "#FFF", 
    class = "bttn-float bttn-md"
  )
)

I used this CSS library to make the buttons : http://bttn.surge.sh/ if you want to chose another style. In markdown (or shiny), you can use classic Bootstrap buttons with class = "btn-default".

Victor
.

[drmowinckels]

that's super nice, Victor! Very very nice features. Thank you so much for being so swift and accomodating!