Browse Source
This patch replaces the use of jQueryUI's datepicker widget on the Calendar page. In order to ease customization of the static calendar which shows the current calendar, I've converted the calendar.css file to SCSS. This allows us to define new SCSS variables to pass to the Flatpickr SCSS. Also changed: Removed some unecessary comments in the template. To test, apply the patch and rebuild the staff interface CSS (https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client). - Go to Tools -> Calendar. - Confirm that entering holidays works correctly for all types: Single, weekly, yearly, ranges, repeated ranges. - Confirm that holidays are deleted as expected. - Confirm that the colors of each type of holiday is correct. Signed-off-by: David Nind <david@davidnind.com> Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de> Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>21.11.x
4 changed files with 223 additions and 72 deletions
@ -0,0 +1,149 @@ |
|||
$daySize: 45px; |
|||
$exception_bg: #B3D4FF; |
|||
$holiday_bg: #FFAEAE; |
|||
$repeatableweekly_bg: #FFFF99; |
|||
$repeatableyearly_bg: #FFCC66; |
|||
$selected: #B9DB88; |
|||
|
|||
@import "flatpickr"; |
|||
|
|||
.controls { |
|||
display: block; |
|||
padding: 3px 0; |
|||
} |
|||
|
|||
.key { |
|||
line-height: 230%; |
|||
padding: 3px; |
|||
white-space: nowrap; |
|||
|
|||
&.exception { |
|||
background-color: $exception_bg; |
|||
} |
|||
|
|||
&.holiday { |
|||
background-color: $holiday_bg; |
|||
} |
|||
|
|||
&.repeatableweekly { |
|||
background-color: $repeatableweekly_bg; |
|||
} |
|||
|
|||
&.repeatableyearly { |
|||
background-color: $repeatableyearly_bg; |
|||
} |
|||
} |
|||
|
|||
.flatpickr-day { |
|||
&.selected { |
|||
background-color: $selected; |
|||
border: 0; |
|||
} |
|||
|
|||
&.exception { |
|||
background-color: $exception_bg; |
|||
|
|||
&.selected { |
|||
border: 3px solid $selected; |
|||
} |
|||
} |
|||
|
|||
&.holiday { |
|||
background-color: $holiday_bg; |
|||
|
|||
&.selected { |
|||
border: 3px solid $selected; |
|||
} |
|||
} |
|||
|
|||
&.repeatableweekly { |
|||
background-color: $repeatableweekly_bg; |
|||
|
|||
&.selected { |
|||
border: 3px solid $selected; |
|||
} |
|||
} |
|||
|
|||
&.repeatableyearly { |
|||
background-color: $repeatableyearly_bg; |
|||
|
|||
&.selected { |
|||
border: 3px solid $selected; |
|||
} |
|||
} |
|||
} |
|||
|
|||
#holidayexceptions th.exception { |
|||
background-color: $exception_bg; |
|||
} |
|||
|
|||
#holidaysunique th.holiday { |
|||
background-color: $holiday_bg; |
|||
|
|||
&.selected { |
|||
border: 2px solid #fff4c6; |
|||
} |
|||
} |
|||
|
|||
#holidayweeklyrepeatable th.repeatableweekly { |
|||
background-color: $repeatableweekly_bg; |
|||
} |
|||
|
|||
#holidaysyearlyrepeatable th.repeatableyearly { |
|||
background-color: $repeatableyearly_bg; |
|||
} |
|||
|
|||
.panel { |
|||
border: 1px solid #B9D8D9; |
|||
border-radius: 4px; |
|||
box-shadow: none; |
|||
padding: 0; |
|||
display: none; |
|||
margin: 1em 0; |
|||
z-index: 1; |
|||
} |
|||
|
|||
fieldset.brief { |
|||
border: 0; |
|||
border-radius: 4px; |
|||
margin: 0; |
|||
} |
|||
|
|||
#showHoliday { |
|||
margin: .5em 0; |
|||
} |
|||
|
|||
fieldset.brief ol { |
|||
font-size: 100%; |
|||
} |
|||
|
|||
fieldset.brief li, |
|||
fieldset.brief li.radio { |
|||
padding: 0.2em 0; |
|||
} |
|||
|
|||
#holidayweeklyrepeatable, |
|||
#holidaysyearlyrepeatable, |
|||
#holidaysunique, |
|||
#holidayexceptions { |
|||
font-size: 90%; |
|||
margin-bottom: 1em; |
|||
} |
|||
|
|||
#calendar-container { |
|||
margin: 1em 0; |
|||
} |
|||
|
|||
#calendar-anchor { |
|||
display: none; |
|||
} |
|||
|
|||
.flatpickr-calendar { |
|||
border-radius: 0; |
|||
border: 1px solid #B9D8D9; |
|||
box-shadow: none; |
|||
} |
|||
|
|||
.dayContainer { |
|||
gap: 3px; |
|||
} |
|||
Loading…
Reference in new issue