Perform various styling changes to the fullcalendar widget
This commit is contained in:
parent
299842cdb2
commit
55b64d42ae
6 changed files with 39 additions and 20 deletions
|
@ -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'
|
||||
]
|
||||
];
|
||||
|
|
|
@ -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'
|
||||
]
|
||||
];
|
||||
|
|
|
@ -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>
|
||||
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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',
|
||||
|
|
|
@ -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: '',
|
||||
|
|
Loading…
Reference in a new issue