Perform various styling changes to the fullcalendar widget

This commit is contained in:
Alex Tselegidis 2023-03-20 08:56:02 +01:00
parent 299842cdb2
commit 55b64d42ae
6 changed files with 39 additions and 20 deletions

View file

@ -23,7 +23,7 @@ class Migration_Add_color_column_to_services_table extends EA_Migration {
'color' => [
'type' => 'VARCHAR',
'constraint' => '256',
'default' => '#4c96cc',
'default' => '#7cbae8',
'after' => 'description'
]
];

View file

@ -23,7 +23,7 @@ class Migration_Add_color_column_to_appointments_table extends EA_Migration {
'color' => [
'type' => 'VARCHAR',
'constraint' => '256',
'default' => '#4c96cc',
'default' => '#7cbae8',
'after' => 'hash'
]
];

View file

@ -13,7 +13,7 @@
<label class="form-label"><?= lang('color') ?></label>
<div <?= $attributes ?? '' ?> class="color-selection d-flex justify-content-between mb-4">
<button type="button" class="color-selection-option selected" data-value="#4c96cc">
<button type="button" class="color-selection-option selected" data-value="#7cbae8">
<i class="fas fa-check"></i>
</button>
@ -21,7 +21,7 @@
<i class="fas fa-check"></i>
</button>
<button type="button" class="color-selection-option" data-value="#65d8e1">
<button type="button" class="color-selection-option" data-value="#82e4ec">
<i class="fas fa-check"></i>
</button>
@ -29,11 +29,11 @@
<i class="fas fa-check"></i>
</button>
<button type="button" class="color-selection-option" data-value="#54be49">
<button type="button" class="color-selection-option" data-value="#abe9a4">
<i class="fas fa-check"></i>
</button>
<button type="button" class="color-selection-option" data-value="#eddf60">
<button type="button" class="color-selection-option" data-value="#ebe07c">
<i class="fas fa-check"></i>
</button>
@ -41,11 +41,11 @@
<i class="fas fa-check"></i>
</button>
<button type="button" class="color-selection-option" data-value="#ef8c80">
<button type="button" class="color-selection-option" data-value="#f3aea6">
<i class="fas fa-check"></i>
</button>
<button type="button" class="color-selection-option" data-value="#e0292b">
<button type="button" class="color-selection-option" data-value="#eb8687">
<i class="fas fa-check"></i>
</button>

View file

@ -348,11 +348,18 @@ body legend {
#calendar .fc-header-toolbar {
display: block ;
/*text-align: center;*/
}
#calendar .fc-header-toolbar .fc-toolbar-chunk {
margin-bottom: 10px;
text-align: center;
}
#calendar .fc-col-header-cell-cushion {
text-decoration: none;
text-transform: none;
cursor: default;
color: var(--bs-body-color) !important;
}
#calendar .calendar-header .select2-container {
@ -367,7 +374,6 @@ body legend {
width: 100% !important;
}
#calendar-page #calendar .fc-toolbar .fc-left,
#calendar-page #calendar .fc-toolbar .fc-right {
float: none;
@ -377,6 +383,7 @@ body legend {
#calendar-page #calendar .fc-toolbar.fc-header-toolbar h2 {
font-size: 22px;
font-weight: lighter;
display: block;
}
@ -394,13 +401,18 @@ body legend {
opacity: 0.7;
}
#calendar-page #calendar .fc-event-title small {
font-weight: normal;
font-size: 12px;
#calendar-page .fc-event-time {
font-weight: bold;
}
#calendar-page #calendar .fc-time {
font-size: 10px;
#calendar-page .fc-event-title {
font-weight: normal;
font-size: 11px;
}
#calendar-page .fc-timegrid-axis-cushion,
#calendar-page .fc-timegrid-slot-label-cushion {
font-size: 11px;
}
#calendar-page #calendar .fc-break {
@ -649,8 +661,9 @@ body .form-horizontal .controls {
text-align: left;
}
.fc-header-toolbar .fc-toolbar-chunk {
#calendar .fc-header-toolbar .fc-toolbar-chunk {
margin-bottom: 0;
text-align: center;
}
#calendar .calendar-header .select2-container {

View file

@ -1551,8 +1551,8 @@ App.Utils.CalendarDefaultView = (function () {
switch (vars('time_format')) {
case 'military':
timeFormat = 'H:mm';
slotTimeFormat = 'H';
timeFormat = 'HH:mm';
slotTimeFormat = 'HH:mm';
break;
case 'regular':
timeFormat = 'h:mm a';
@ -1575,14 +1575,17 @@ App.Utils.CalendarDefaultView = (function () {
firstDay: firstWeekdayNumber,
slotDuration: '00:15:00',
snapDuration: '00:15:00',
scrollTime: '07:00:00',
slotLabelInterval: '01:00',
eventTimeFormat: timeFormat,
eventTextColor: '#333',
eventColor: '#7cbae8',
slotLabelFormat: slotTimeFormat,
allDayContent: lang('all_day'),
dayHeaderFormat: columnFormat,
selectable: true,
selectMirror: true,
themeSystem: 'bootstrap5',
headerToolbar: {
left: 'prev,next today',
center: 'title',

View file

@ -663,8 +663,8 @@ App.Utils.CalendarTableView = (function () {
switch (vars('time_format')) {
case 'military':
timeFormat = 'H:mm';
slotTimeFormat = 'H';
timeFormat = 'HH:mm';
slotTimeFormat = 'HH:mm';
break;
case 'regular':
timeFormat = 'h:mm a';
@ -684,14 +684,17 @@ App.Utils.CalendarTableView = (function () {
firstDay: firstWeekdayNumber,
slotDuration: '00:15:00',
snapDuration: '00:15:00',
scrollTime: '07:00:00',
slotLabelInterval: '01:00',
eventTimeFormat: timeFormat,
eventTextColor: '#333',
eventColor: '#7cbae8',
slotLabelFormat: slotTimeFormat,
allDayContent: lang('all_day'),
dayHeaderFormat: columnFormat,
selectable: true,
selectHelper: true,
themeSystem: 'bootstrap5',
headerToolbar: {
left: 'listDay,timeGridDay',
center: '',