ifl/iflrandevu
1
1
Fork 0
forked from mirrors/easyappointments
Code Issues 6 Pull requests Releases 3 Activity

Perform various styling changes to the fullcalendar widget

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

2
application/migrations/026_add_color_column_to_services_table.php
View file

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

2
application/migrations/027_add_color_column_to_appointments_table.php
View file

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

12
application/views/components/color_selection.php
View file

@ -13,7 +13,7 @@
<label class="form-label"><?= lang('color') ?></label> <label class="form-label"><?= lang('color') ?></label>
<div <?= $attributes ?? '' ?> class="color-selection d-flex justify-content-between mb-4"> <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> <i class="fas fa-check"></i>
</button> </button>
@ -21,7 +21,7 @@
<i class="fas fa-check"></i> <i class="fas fa-check"></i>
</button> </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> <i class="fas fa-check"></i>
</button> </button>
@ -29,11 +29,11 @@
<i class="fas fa-check"></i> <i class="fas fa-check"></i>
</button> </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> <i class="fas fa-check"></i>
</button> </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> <i class="fas fa-check"></i>
</button> </button>
@ -41,11 +41,11 @@
<i class="fas fa-check"></i> <i class="fas fa-check"></i>
</button> </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> <i class="fas fa-check"></i>
</button> </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> <i class="fas fa-check"></i>
</button> </button>

29
assets/css/layouts/backend_layout.scss
View file

@ -348,11 +348,18 @@ body legend {
#calendar .fc-header-toolbar { #calendar .fc-header-toolbar {
display: block ; display: block ;
/*text-align: center;*/
} }
#calendar .fc-header-toolbar .fc-toolbar-chunk { #calendar .fc-header-toolbar .fc-toolbar-chunk {
margin-bottom: 10px; 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 { #calendar .calendar-header .select2-container {
@ -367,7 +374,6 @@ body legend {
width: 100% !important; width: 100% !important;
} }
#calendar-page #calendar .fc-toolbar .fc-left, #calendar-page #calendar .fc-toolbar .fc-left,
#calendar-page #calendar .fc-toolbar .fc-right { #calendar-page #calendar .fc-toolbar .fc-right {
float: none; float: none;
@ -377,6 +383,7 @@ body legend {
#calendar-page #calendar .fc-toolbar.fc-header-toolbar h2 { #calendar-page #calendar .fc-toolbar.fc-header-toolbar h2 {
font-size: 22px; font-size: 22px;
font-weight: lighter;
display: block; display: block;
} }
@ -394,13 +401,18 @@ body legend {
opacity: 0.7; opacity: 0.7;
} }
#calendar-page #calendar .fc-event-title small { #calendar-page .fc-event-time {
font-weight: normal; font-weight: bold;
font-size: 12px;
} }
#calendar-page #calendar .fc-time { #calendar-page .fc-event-title {
font-size: 10px; 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 { #calendar-page #calendar .fc-break {
@ -649,8 +661,9 @@ body .form-horizontal .controls {
text-align: left; text-align: left;
} }
.fc-header-toolbar .fc-toolbar-chunk { #calendar .fc-header-toolbar .fc-toolbar-chunk {
margin-bottom: 0; margin-bottom: 0;
text-align: center;
} }
#calendar .calendar-header .select2-container { #calendar .calendar-header .select2-container {

7
assets/js/utils/calendar_default_view.js
View file

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

7
assets/js/utils/calendar_table_view.js
View file

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