html body and altering colour of nav bullets about tuicalendr HOT 7 CLOSED

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

from tuicalendr.

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

from tuicalendr.

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!

from tuicalendr.

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

from tuicalendr.

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

from tuicalendr.

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>

from tuicalendr.

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
.

from tuicalendr.