You are here

Home » API reference » Availability Calendars 7.5

BuroRaDer.DateRangePicker.css in Availability Calendars 7.5

This file contains styling for the BuroRaDer.DateRangePicker extension plugin that turns the jQuery UI datepicker into a date range picker.

It is based to work on top of the standard jQuery UI styling, so yoo probably want to adapt this to your own situation.

File

BuroRaDer.DateRangePicker.css
View source 
  1. /**

  2.  * @file

  3.  * This file contains styling for the BuroRaDer.DateRangePicker extension plugin

  4.  * that turns the jQuery UI datepicker into a date range picker.

  5.  *

  6.  * It is based to work on top of the standard jQuery UI styling, so yoo probably

  7.  * want to adapt this to your own situation.

  8.  */

  9. 

  10. /*

  11.  * Do not fade the color of the selected date range on non selectable elements.

  12.  */

  13. .date-range-start.ui-state-disabled,

  14. .date-range-in.ui-state-disabled {

  15.   opacity: initial;

  16. }

  17. 

  18. /*

  19.  * But do fade the text. Unfortunately we had to copy the RGB part value of the

  20.  * color as well, making it "fail" when another color was defined as text color.

  21.  */

  22. .date-range-start.ui-state-disabled > .ui-state-active,

  23. .date-range-start.ui-state-disabled > .ui-state-default,

  24. .date-range-in.ui-state-disabled > .ui-state-active,

  25. .date-range-in.ui-state-disabled > .ui-state-default {

  26.   color: rgba(85, 85, 85, 0.35);

  27. }

  28. 

  29. .date-range-start > .ui-state-active,

  30. .date-range-start > .ui-state-default,

  31. .date-range-in > .ui-state-active,

  32. .date-range-in > .ui-state-default,

  33. .date-range-is-to .date-range-end > .ui-state-active,

  34. .date-range-is-to .date-range-end > .ui-state-default {

  35.   background: lightgreen none;

  36. }

  37. 

  38. /*

  39.  * Split day settings (for a LTR txt direction).

  40.  */

  41. .date-range-split-day .date-range-start,

  42. .date-range-split-day .date-range-end {

  43.   background-color: #e6e6e6;

  44. }

  45. 

  46. .date-range-split-day .date-range-start > .ui-state-active,

  47. .date-range-split-day .date-range-start > .ui-state-default {

  48.   background: linear-gradient(to bottom right, transparent, transparent 50%, lightgreen 50%, lightgreen); /* LTR */

  49. }

  50. 

  51. .date-range-split-day .date-range-end > .ui-state-active,

  52. .date-range-split-day .date-range-end > .ui-state-default {

  53.   background: linear-gradient(to top left, transparent, transparent 50%, lightgreen 50%, lightgreen); /* LTR */

  54. }

  55. 

  56. /*

  57.  * Split day settings for a RTL text direction.

  58.  *

  59.  * This plugin assumes that this is explicitly specified on a container element,

  60.  * e.g. the html or body element. It will fail when a lower element reverses the

  61.  * direction.

  62.  */

  63. [dir=rtl] .date-range-split-day .date-range-start > .ui-state-active,

  64. [dir=rtl] .date-range-split-day .date-range-start > .ui-state-default {

  65.   background: linear-gradient(to bottom left, transparent, transparent 50%, lightgreen 50%, lightgreen); /* RTL */

  66. }

  67. 

  68. [dir=rtl] .date-range-split-day .date-range-end > .ui-state-active,

  69. [dir=rtl] .date-range-split-day .date-range-end > .ui-state-default {

  70.   background: linear-gradient(to top right, transparent, transparent 50%, lightgreen 50%, lightgreen); /* RTL */

  71. }

  72. 

  73. /*

  74.  * Buttons

  75.  */

  76. #ui-datepicker-div > button {

  77.   float: right;

  78.   margin-left: 0.5em;

  79. }