Skip to content

Updated: booking calendar UI design in back-office. #1749

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Azhar-Webkul wants to merge 9 commits into
base: develop
Choose a base branch
from
Open

Updated: booking calendar UI design in back-office. #1749

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
2c5d567
Update booking calendar UI design
Azhar-Webkul Jun 17, 2026
68363fd
chore: add co-author for previous changes
Azhar-Webkul Jun 17, 2026
b857ef4
search bar result css updated
Azhar-Webkul Jun 18, 2026
995c50c
added search bar result blue border color for booked dates
Azhar-Webkul Jun 23, 2026
eecfb2b
Merge branch 'develop' into gli-3032
Azhar-Webkul Jul 2, 2026
1d14eb7
current date and search bar result design updated
Azhar-Webkul Jul 3, 2026
50e8b95
current date and search bar result design updated
Azhar-Webkul Jul 3, 2026
25d2ce8
disgn update
Azhar-Webkul Jul 10, 2026
e1347c3
conflict resolved
Azhar-Webkul Jul 10, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 32 additions & 11 deletions modules/hotelreservationsystem/controllers/admin/AdminHotelRoomsBookingController.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,8 @@ class AdminHotelRoomsBookingController extends ModuleAdminController
protected $date_to;
protected $booking_product;
protected $occupancy;
protected $eventColors;

public function __construct()
{
$this->table = 'htl_booking_detail';
Expand All @@ -43,6 +45,13 @@ public function __construct()

$this->_conf[52] = $this->l('Room in the booking is successfully reallocated');
$this->_conf[53] = $this->l('Room in the booking is successfully swapped');

$this->eventColors = array(
'available' => array('event' => '#7EC77B', 'cell' => '#D9EFD8'),
'partially_available' => array('event' => '#FFC224', 'cell' => '#FFF3CD'),
'booked' => array('event' => '#00AFF0', 'cell' => '#C3E1FB'),
'unavailable' => array('event' => '#FF3838', 'cell' => '#FFC4C4'),
);
}

public function init()
Expand Down Expand Up @@ -558,10 +567,21 @@ public function ajaxProcessGetCalenderData()
}

$eventData['date_format'] = Tools::displayDate($cal_date_from);
$stats = $eventData['stats'];
if ($stats['num_avail'] > 0) {
$cellBgColor = $this->eventColors['available']['cell'];
} elseif ($stats['num_part_avai'] > 0) {
$cellBgColor = $this->eventColors['partially_available']['cell'];
} elseif ($stats['num_booked'] == $stats['total_rooms'] && $stats['total_rooms'] != 0) {
$cellBgColor = $this->eventColors['booked']['cell'];
} else {
$cellBgColor = $this->eventColors['unavailable']['cell'];
}
$events[strtotime($bookingParams['date_from'])] = array(
'is_notification' => 1,
'title' => $this->l('icon'),
'start' => date('Y-m-d H:i:s', strtotime($bookingParams['date_from'])),
'start' => date('Y-m-d', strtotime($bookingParams['date_from'])),
'display' => 'background',
'backgroundColor' => $cellBgColor,
'data' => $eventData
);

Expand All @@ -571,24 +591,25 @@ public function ajaxProcessGetCalenderData()
$bookingParams['date_to'] = $searchDateTo;
if ($bookingData = $objBookingDetail->getBookingData($bookingParams)) {
if ($bookingData['stats']['num_avail']) {
$eventColor = '#7EC77B';
$title = sprintf($this->l('Available Rooms : %s'), $bookingData['stats']['num_avail']);
$eventColor = $this->eventColors['available']['event'];
$title = sprintf($this->l('%s Available Rooms'), $bookingData['stats']['num_avail']);
} elseif ($bookingData['stats']['num_part_avai']) {
$eventColor = '#FFC224';
$title = sprintf($this->l('Partially Available Rooms : %s'), $bookingData['stats']['num_part_avai']);
$eventColor = $this->eventColors['partially_available']['event'];
$title = sprintf($this->l('%s Partially Available Rooms'), $bookingData['stats']['num_part_avai']);
} elseif ($bookingData['stats']['num_booked'] == $bookingData['stats']['total_rooms'] && $bookingData['stats']['total_rooms'] != 0 && $bookingData['stats']['num_unavail'] == 0) {
$eventColor = $this->eventColors['booked']['event'];
$title = sprintf($this->l('%s Available Rooms'), $bookingData['stats']['num_avail']);
} else {
$eventColor = '#FF3838';
$title = sprintf($this->l('Available Rooms : %s'), $bookingData['stats']['num_avail']);
$eventColor = $this->eventColors['unavailable']['event'];
$title = sprintf($this->l('%s Available Rooms'), $bookingData['stats']['num_avail']);
}
$bookingData['date_from_format'] = Tools::displayDate($searchDateFrom);
$bookingData['date_to_format'] = Tools::displayDate($searchDateTo);
$bookingData['eventColor'] = $eventColor;
$events[] = array(
'title' => $title,
'start' => date('Y-m-d', strtotime($searchDateFrom)),
'end' => date('Y-m-d', strtotime($searchDateTo)),
'backgroundColor' => $eventColor,
'color' => $eventColor,
'textColor' => '#FFF',
'data' => $bookingData
);
}
Expand Down
61 changes: 55 additions & 6 deletions modules/hotelreservationsystem/views/css/HotelReservationAdmin.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -249,10 +249,10 @@ p.room_cat_data

.indi_cont
{
margin: 10px 0px;
display: flex;
align-items: center;
}


.cart-table-thead
{
border-bottom: 1px solid #555!important;
Expand Down Expand Up @@ -549,9 +549,6 @@ p.room_cat_data


/* book now full calender */
.fc .fc-daygrid-day.fc-day-today {
background-color: unset;
}
.fc-daygrid-day-top {
justify-content: space-between;}
.fc a.fc-daygrid-day-number {
Expand All @@ -563,7 +560,8 @@ p.room_cat_data
color: #FFFFFF;
line-height: 1;
border-radius: 50%;
padding: 5px 8px;
padding: 4px;
margin: 2px 2px 0px 0px;
}
.fc-daygrid-day-top .day-info {

Expand All @@ -577,6 +575,57 @@ p.room_cat_data
.fc-today-button:disabled {
display: none;
}
#fullcalendar .fc-daygrid-day-events {
height: 0 ;
min-height: 0;
overflow: visible;
}
#fullcalendar .fc-event.search-result-event:not(.fc-event-start) .fc-event-main {
visibility: hidden;
}
#fullcalendar .fc-event.search-result-event {
background-color: #FFFFFF;
border: none;
border-left: 5px solid;
border-radius: 3px;
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05);
margin: 1px 4px;
padding: 2px 4px;
line-height: 1.4;
display: flex;
align-items: center;
overflow: hidden;
}
#fullcalendar .fc-event.search-result-event .fc-event-main {
overflow: hidden;
}
#fullcalendar .fc-event.search-result-event .fc-event-title {
font-size: 14px;
font-weight: 400;
color: #333333;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#fullcalendar .fc-event.search-result-event:not(.fc-event-start) {
border-left: none;
padding-left: 13px;
margin-left: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
#fullcalendar .fc-event.search-result-event:not(.fc-event-end) {
margin-right: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.calendar-legend {
display: flex;
justify-content: space-evenly;
align-items: center;
flex-wrap: nowrap;
padding-top: 14px;
}

#room-reallocation-modal .modal-footer {
padding: 15px 0px 0px 0px
Expand Down
74 changes: 54 additions & 20 deletions modules/hotelreservationsystem/views/js/admin/hotel_rooms_booking.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,22 +45,15 @@ $(document).ready(function() {

},
eventContent: function(info) {
if (info.event.extendedProps.is_notification) {
return false;
if (!info.event.extendedProps.is_notification) {
return { html: '<div class="fc-event-title">' + info.event.title.replace(/^(\S+)/, '<strong>$1</strong>') + '</div>' };
}
},
eventDidMount: function(info) {
if (info.event.extendedProps.is_notification) {
if (info.event.extendedProps.data.stats.num_avail > 0) {
$(info.el).closest('td').find('.day-info svg circle').attr('fill', '#7EC77B');
} else if (info.event.extendedProps.data.stats.num_part_avai > 0) {
$(info.el).closest('td').find('.day-info svg circle').attr('fill', '#FFC224');
} else if ((info.event.extendedProps.data.stats.num_booked == info.event.extendedProps.data.stats.total_rooms) && info.event.extendedProps.data.stats.total_rooms != 0) {
$(info.el).closest('td').find('.day-info svg circle').attr('fill', '#00AFF0');
} else {
$(info.el).closest('td').find('.day-info svg circle').attr('fill', '#FF3838');
}
$(info.el).closest('td').find('.day-info').tooltip({
var $cell = $(info.el).closest('td');
$cell.css('background-color', info.event.backgroundColor);
$cell.tooltip({
content: function()
{
$('#date-stats-tooltop .tip_date').text(info.event.extendedProps.data.date_format);
Expand All @@ -73,8 +66,13 @@ $(document).ready(function() {
});
return $('#date-stats-tooltop').html();
},
items: "div",
items: "td",
trigger : 'hover',
position: {
my: "left top",
at: "left+50% bottom-50%",
collision: "flipfit"
},
show: {
delay: 100,
},
Expand All @@ -91,6 +89,13 @@ $(document).ready(function() {
return false;
}

// suppress cell tooltip when hovering the search result bar
if ($(event.originalEvent.target).closest('.search-result-event').length) {
ui.tooltip.remove();
$(this).removeData('ui-tooltip-id').removeAttr('aria-describedby');
return false;
}

var $id = $(ui.tooltip).attr('id');

// close any lingering tooltips
Expand All @@ -113,8 +118,8 @@ $(document).ready(function() {
});
}
});
info.event.remove();
} else {
$(info.el).addClass('search-result-event');
$(info.el).tooltip({
content: function()
{
Expand All @@ -134,6 +139,7 @@ $(document).ready(function() {
},
items: "div",
trigger : 'hover',
track: true,
show: {
delay: 100,
},
Expand Down Expand Up @@ -172,24 +178,51 @@ $(document).ready(function() {
});
}
});
info.el.style.borderLeftColor = info.event.extendedProps.data.eventColor;
resizeSearchResultEventBar($(info.el));
}
},
dayCellDidMount: (arg) => {

let svg = $('#svg-icon').html();
$(arg.el).find('.fc-daygrid-day-top').append('<a class="day-info">'+svg+'</a>');
},
datesSet: function(arg) {
if($('.fc-event').tooltip()) {
$('.fc-event').tooltip('destroy');
}
}
});
calendar.render();

var searchResultResizeTimer;
$(window).on('resize', function() {
clearTimeout(searchResultResizeTimer);
searchResultResizeTimer = setTimeout(function() {
$('#fullcalendar .fc-event.search-result-event').each(function() {
resizeSearchResultEventBar($(this));
});
}, 150);
});
}

function resizeSearchResultEventBar($bar) {
requestAnimationFrame(function() {
var $td = $bar.closest('td');
if (!$td.length) {
return;
}
var cellHeight = $td.outerHeight();
if (!cellHeight) {
return;
}
$bar.css('transform', '');
$bar.css('height', (cellHeight * 0.35) + 'px');
var cellRect = $td.get(0).getBoundingClientRect();
var barRect = $bar.get(0).getBoundingClientRect();
var desiredTop = cellRect.top + (cellRect.height - barRect.height) / 2;
var delta = desiredTop - barRect.top;
$bar.css('transform', 'translateY(' + delta + 'px)');
});
}

function removeInitializedTooltips() {
$('#fullcalendar a.day-info, #fullcalendar .fc-daygrid-event').each(function () {
$('#fullcalendar td.fc-daygrid-day, #fullcalendar .fc-daygrid-event').each(function () {
if ($(this).data('ui-tooltip')) {
$(this).tooltip('destroy');
}
Expand Down Expand Up @@ -753,6 +786,7 @@ $(document).ready(function() {
e.preventDefault();

var booking_occupancy_wrapper = $(this).closest('.booking_occupancy_wrapper');
var max_child_in_room = $(booking_occupancy_wrapper).find('.max_children').val();
var occupancy_block = '';
var roomBlockIndex = parseInt($(booking_occupancy_wrapper).find(".occupancy_info_block").last().attr('occ_block_index'));
roomBlockIndex += 1;
Expand Down
19 changes: 0 additions & 19 deletions ...nsystem/views/templates/admin/hotel_rooms_booking/helpers/view/_partials/search-stats.tpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,23 +63,4 @@
<hr class="hr_style" />
</div>
</div>

<div class="row">
<div class="col-sm-6 indi_cont clearfix">
<span class="color_indicate bg-green"></span>
<span class="indi_label">{l s='Available Rooms' mod='hotelreservationsystem'}</span>
</div>
<div class="col-sm-6 indi_cont clearfix">
<span class="color_indicate bg-yellow"></span>
<span class="indi_label">{l s='Partially Available' mod='hotelreservationsystem'}</span>
</div>
<div class="col-sm-6 indi_cont clearfix">
<span class="color_indicate bg-red"></span>
<span class="indi_label">{l s='Unavailable Rooms' mod='hotelreservationsystem'}</span>
</div>
<div class="col-sm-6 indi_cont clearfix">
<span class="color_indicate bg-blue"></span>
<span class="indi_label">{l s='Booked Rooms' mod='hotelreservationsystem'}</span>
</div>
</div>
</div>
21 changes: 18 additions & 3 deletions ...es/hotelreservationsystem/views/templates/admin/hotel_rooms_booking/helpers/view/view.tpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -194,6 +194,24 @@
{if !isset($booking_product) || (isset($booking_product) && $booking_product == 1)}
<div id='fullcalendar'></div>
{hook h='displayAdminRoomsBookingCalendarAfter'}
<div class="row calendar-legend">
<div class="indi_cont clearfix">
<span class="color_indicate bg-green"></span>
<span class="indi_label">{l s='Available Rooms' mod='hotelreservationsystem'}</span>
</div>
<div class="indi_cont clearfix">
<span class="color_indicate bg-yellow"></span>
<span class="indi_label">{l s='Partially Available' mod='hotelreservationsystem'}</span>
</div>
<div class="indi_cont clearfix">
<span class="color_indicate bg-red"></span>
<span class="indi_label">{l s='Unavailable Rooms' mod='hotelreservationsystem'}</span>
</div>
<div class="indi_cont clearfix">
<span class="color_indicate bg-blue"></span>
<span class="indi_label">{l s='Booked Rooms' mod='hotelreservationsystem'}</span>
</div>
</div>
{else}
<div class="panel-body">
{include file="./_partials/service-products.tpl"}
Expand Down Expand Up @@ -253,6 +271,3 @@
</div>
</div>
</div>
<template id="svg-icon">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="8"/><path d="M8.06536 3C8.30937 3 8.51561 3.07032 8.6841 3.21097C8.85839 3.34693 8.94553 3.51336 8.94553 3.71027C8.94553 3.90717 8.85839 4.07595 8.6841 4.2166C8.51561 4.35724 8.30937 4.42757 8.06536 4.42757C7.82135 4.42757 7.6122 4.35724 7.43791 4.2166C7.26362 4.07595 7.17647 3.90717 7.17647 3.71027C7.17647 3.51336 7.26071 3.34693 7.42919 3.21097C7.60349 3.07032 7.81554 3 8.06536 3ZM8.78867 6.3685V11.5443C8.78867 11.9475 8.82353 12.2171 8.89325 12.353C8.96877 12.4843 9.07625 12.5827 9.21569 12.6484C9.36093 12.714 9.62237 12.7468 10 12.7468V13H6.122V12.7468C6.51126 12.7468 6.77269 12.7164 6.90632 12.6554C7.03994 12.5945 7.14452 12.4937 7.22004 12.353C7.30138 12.2124 7.34205 11.9428 7.34205 11.5443V9.06188C7.34205 8.36334 7.3159 7.91092 7.26362 7.70464C7.22295 7.55462 7.15904 7.45148 7.0719 7.39522C6.98475 7.33427 6.86565 7.3038 6.7146 7.3038C6.55192 7.3038 6.35439 7.33896 6.122 7.40928L6 7.15612L8.40523 6.3685H8.78867Z" fill="white"/></svg>
<template>