2026.8.1

app/models/customer_appointment.rb

@@ -23,11 +23,12 @@ class CustomerAppointment < ActiveRecord::Base
 
   STATUSES = %w[
       Scheduled
-      CheckedIn
-      InProgress
+      Checked_In
+      In_Progress
       Ready
       Completed
       Cancelled
+      Call_Out
   ]
 
   # Scans the QBO Estimate's InvoiceLineItems for "Labor" sales items

app/views/common/_calendar.html.erb

@@ -1,6 +1,7 @@
 <%
-  # Check if toggle is active via query params
+  # Check if toggles are active via query params
   only_appointments = params[:only_appointments] == '1'
+  hide_past_weeks   = params[:hide_past_weeks] == '1'
 
   # Get Redmine's configured non-working week days (e.g., ["6", "7"] for Sat/Sun)
   non_working_days = Setting.non_working_week_days || []
@@ -64,7 +65,16 @@
 <% end %>
 
 <!-- Toggle Bar -->
-<div class="calendar-filter-toolbar" style="margin-bottom: 12px; display: flex; align-items: center; justify-content: flex-end;">
+<div class="calendar-filter-toolbar" style="margin-bottom: 12px; display: flex; align-items: center; justify-content: flex-end; gap: 16px;">
+  <label for="toggle-hide-past-weeks" style="cursor: pointer; font-weight: 600; font-size: 0.9em; color: #444; display: inline-flex; align-items: center; gap: 6px;">
+    <%= check_box_tag 'hide_past_weeks',
+                      '1',
+                      hide_past_weeks,
+                      id: 'toggle-hide-past-weeks',
+                      onchange: 'toggleHidePastWeeks(this.checked)' %>
+    <%= l(:label_hide_past_weeks, default: 'Hide Past Weeks') %>
+  </label>
+
   <label for="toggle-only-appointments" style="cursor: pointer; font-weight: 600; font-size: 0.9em; color: #444; display: inline-flex; align-items: center; gap: 6px;">
     <%= check_box_tag 'only_appointments',
                       '1',
@@ -88,6 +98,8 @@
     <% end %>
 
     <% calendar.format_month.each_slice(7) do |week| %>
+      <%# Skip week if "hide past weeks" is active and every day in the week is in the past %>
+      <% next if hide_past_weeks && week.last < User.current.today %>
 
       <li class="week-number">
         <span class="label-week"><%= l(:label_week) %></span>
@@ -97,6 +109,8 @@
       <% week.each do |day| %>
 
         <% 
+          is_today = (day == User.current.today)
+
           # Filter out standard events if "only appointments" toggle is active
           standard_events = only_appointments ? [] : calendar.events_on(day).reject { |e| e.is_a?(CustomerAppointment) }
 
@@ -130,19 +144,20 @@
           end
         %>
 
-        <li class="<%= calendar.day_css_classes(day) %> calbody">
+        <li class="<%= calendar.day_css_classes(day) %> calbody"<%= ' id="today"'.html_safe if is_today %>>
 
           <p class="day-num" style="display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin-bottom: 4px;">
-            <span class="day-num-left" style="display: inline-flex; align-items: center; justify-self: start;">
-              <% if total_hours > 0 %>
-                <span class="hours-total" style="font-weight: bold; color: #555;" title="<%= l(:label_estimated_hours, default: 'Estimated hours') %>">
-                  <%= total_hours.round(1) %>h
-                </span>
-              <% end %>
+            <!-- Left: Day number and abbreviated weekday -->
+            <span class="day-num-left" style="display: inline-flex; align-items: center; justify-self: start; gap: 3px;">
+              <a name="<%= day.to_s %>" <%= 'id="today-anchor"'.html_safe if is_today %> style="text-decoration: none; color: inherit;">
+                <span class="day-value" style="font-weight: bold;"><%= day.day %></span>
+              </a>
+              <span class="abbr-day" style="font-size: 0.85em; color: #777;">(<%= abbr_day_name(day.cwday) %>)</span>
             </span>
 
+            <!-- Center: New Appointment Action -->
             <span class="day-num-center" style="display: inline-flex; align-items: center; justify-self: center;">
-              <% if day >= User.current.today %>
+              <% if day >= User.current.today && !non_working_days.include?(day.cwday.to_s) %>
                 <%= link_to sprite_icon('add'),
                             new_customer_appointment_path(start_date: day),
                             class: 'icon-only icon-add',
@@ -150,9 +165,13 @@
               <% end %>
             </span>
 
-            <span class="day-num-right" style="display: inline-flex; align-items: center; justify-self: end; gap: 3px;">
-              <span class="abbr-day" style="font-size: 0.85em; color: #777;">(<%= abbr_day_name(day.cwday) %>)</span>
-              <span class="day-value" style="font-weight: bold;"><%= day.day %></span>
+            <!-- Right: Total Hours -->
+            <span class="day-num-right" style="display: inline-flex; align-items: center; justify-self: end;">
+              <% if total_hours > 0 %>
+                <span class="hours-total" style="font-weight: bold; color: #555;" title="<%= l(:label_estimated_hours, default: 'Estimated hours') %>">
+                  <%= total_hours.round(1) %>h
+                </span>
+              <% end %>
             </span>
           </p>
 
@@ -234,16 +253,36 @@
 
 <script>
   (function() {
-    const STORAGE_KEY = 'redmine_cal_only_appointments';
+    const STORAGE_KEY_ONLY_APPTS = 'redmine_cal_only_appointments';
+    const STORAGE_KEY_HIDE_PAST  = 'redmine_cal_hide_past_weeks';
 
     document.addEventListener('DOMContentLoaded', function() {
       const urlParams = new URLSearchParams(window.location.search);
-      const savedState = localStorage.getItem(STORAGE_KEY);
+      let needsRedirect = false;
 
-      // If URL does not specify the parameter, sync with saved preference in localStorage
-      if (!urlParams.has('only_appointments') && savedState === '1') {
+      // Sync "Show Customer Appointments Only" with localStorage if not present in URL
+      if (!urlParams.has('only_appointments') && localStorage.getItem(STORAGE_KEY_ONLY_APPTS) === '1') {
         urlParams.set('only_appointments', '1');
+        needsRedirect = true;
+      }
+
+      // Sync "Hide Past Weeks" with localStorage if not present in URL
+      if (!urlParams.has('hide_past_weeks') && localStorage.getItem(STORAGE_KEY_HIDE_PAST) === '1') {
+        urlParams.set('hide_past_weeks', '1');
+        needsRedirect = true;
+      }
+
+      if (needsRedirect) {
         window.location.search = urlParams.toString();
+        return;
+      }
+
+      // Automatically scroll to today if present and no specific hash anchor is in the URL
+      if (!window.location.hash) {
+        const todayElement = document.getElementById('today');
+        if (todayElement) {
+          todayElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        }
       }
     });
 
@@ -251,10 +290,22 @@
       const urlParams = new URLSearchParams(window.location.search);
       if (checked) {
         urlParams.set('only_appointments', '1');
-        localStorage.setItem(STORAGE_KEY, '1');
+        localStorage.setItem(STORAGE_KEY_ONLY_APPTS, '1');
       } else {
         urlParams.delete('only_appointments');
-        localStorage.setItem(STORAGE_KEY, '0');
+        localStorage.setItem(STORAGE_KEY_ONLY_APPTS, '0');
+      }
+      window.location.search = urlParams.toString();
+    };
+
+    window.toggleHidePastWeeks = function(checked) {
+      const urlParams = new URLSearchParams(window.location.search);
+      if (checked) {
+        urlParams.set('hide_past_weeks', '1');
+        localStorage.setItem(STORAGE_KEY_HIDE_PAST, '1');
+      } else {
+        urlParams.delete('hide_past_weeks');
+        localStorage.setItem(STORAGE_KEY_HIDE_PAST, '0');
       }
       window.location.search = urlParams.toString();
     };

app/views/customer_appointments/_calendar_event.html.erb

@@ -1,24 +1,64 @@
+<%
+  non_working_days = Setting.non_working_week_days || []
+  app_datetime = (appointment.respond_to?(:date) && appointment.date.present?) ? appointment.date : appointment.start_date
+  start_date = app_datetime.to_date
+  target_date = day.to_date
+  duration = [appointment.duration.to_i, 1].max
+
+  day_number = 0
+  if target_date >= start_date
+    date_cursor = start_date
+    working_count = 0
+    while date_cursor <= target_date
+      unless non_working_days.include?(date_cursor.cwday.to_s)
+        working_count += 1
+      end
+      if date_cursor == target_date
+        day_number = working_count
+        break
+      end
+      date_cursor += 1
+    end
+  end
+%>
+
 <%= tag.div class: ['appointment-block', 'tooltip', appointment.status.to_s.parameterize] do %>
 
   <div class="appointment-bar"></div>
 
   <div class="appointment-card">
 
+    <%# Row 1: Avatar | Title %>
     <div class="appointment-header">
       <% if appointment.user %>
-        <%= avatar(appointment.user, size: 14, class: "appointment-avatar") %>
+        <%= avatar(appointment.user, size: 25, class: "appointment-avatar") %>
       <% end %>
 
       <span class="appointment-title">
         <%= link_to(appointment.subject, customer_appointment_path(appointment), class: "appointment-link") %>
       </span>
+    </div>
+
+    <hr class="appointment-divider" />
+
+    <%# Row 2: Time | Day Count | Hours %>
+    <div class="appointment-meta">
+      <span class="appointment-time">
+        <%= appointment.date.strftime('%I:%M %p') if appointment.date.present? %>
+      </span>
+
+      <% if duration > 1 && day_number.positive? && day_number <= duration %>
+       <span class="appointment-days">(Day <%= day_number %> of <%= duration %>)</span>
+      <% end %>
 
       <span class="appointment-hours">
         <%= number_with_precision(appointment.estimated_hours.to_f, precision: 1) %>h
       </span>
     </div>
 
+    <%# Row 3: Details %>
     <% if appointment.customer %>
+      <hr class="appointment-divider" />
       <div class="appointment-detail">
         <%= appointment.customer.name %>
         <% if appointment.vehicle %>
@@ -30,7 +70,7 @@
   </div>
 
   <span class="tip">
-    <%= render partial: "customer_appointments/tooltip", locals: { appointment: appointment } %>
+    <%= render partial: "customer_appointments/tooltip", locals: { appointment: appointment, day: day } %>
   </span>
 
 <% end %>

app/views/customer_appointments/_form.html.erb

@@ -1,3 +1,5 @@
+<%= javascript_include_tag("customer-modal", plugin: :redmine_qbo_calendar) %>
+
 <%= labelled_form_for @appointment do |f| %>
   <%= error_messages_for @appointment %>
 
@@ -7,6 +9,8 @@
     <p>
       <%= f.text_field :customer, label: :label_customer, class: "customer-name", autocomplete: "off", data: { autocomplete_url: "/customers/autocomplete" } %>
       <%= f.hidden_field :customer_id, id: "customer_id" %>
+      <!-- Add Quick Create Button -->
+      <a href="#" id="inline-create-customer-btn" class="icon-only icon-add" title="<%=l(:label_new_customer)%>"></a>
     </p>
 
     <p>
@@ -43,3 +47,8 @@
 
   <%= submit_tag l(:button_save) %>
 <% end %>
+
+<!-- Modal Container for Inline Customer Creation -->
+<div id="new-customer-dialog" style="display:none;" title="<%= t(:label_new_customer, default: 'New Customer') %>">
+  <!-- The form will be dynamically loaded via JS or rendered here -->
+</div>

app/views/customer_appointments/_list_simple.html.erb

@@ -1,3 +1,4 @@
+<h4><%=t(:label_appointments)%>:</h4>
 <table class="list">
 
 <thead>

app/views/customer_appointments/_tooltip.html.erb

@@ -51,7 +51,7 @@
     <tr>
       <th><%= l(:label_estimate) %></th>
       <td>
-        <%= link_to appointment.estimate %>
+        <%= link_to appointment.estimate, appointment.estimate, target: "_blank" %>
       </td>
     </tr>
   <% end %>

app/views/customer_appointments/edit.html.erb

@@ -1,3 +1,3 @@
-<h2>Edit Appointment</h2>
+<h2><%=l(:label_edit_appointment)%></h2>
 
 <%= render "form" %>

app/views/customer_appointments/new.html.erb

@@ -1,3 +1,3 @@
-<h2>New Appointment</h2>
+<h2><%=l(:label_new_appointment)%></h2>
 
 <%= render "form" %>

app/views/customer_appointments/show.html.erb

@@ -3,8 +3,8 @@
     <i class="fa-regular fa-calendar-days"></i> <%= l(:button_calendar) %>
   <% end %>
 
-  <%= link_to customer_appointments_path do %>
-    <i class="fa-solid fa-list"></i> <%= l(:button_appointments) %>
+  <%= link_to new_issue_path(issue: { customer_id: @appointment.customer_id, vehicle_id: @appointment.vehicle_id, estimate_id: @appointment.estimate_id }), target: :_blank do %>
+    <i class="fa-solid fa-plus"></i> <%= l(:label_new_issue) %>
   <% end %>
 
   <%= link_to edit_customer_appointment_path(@appointment) do %>
@@ -68,8 +68,10 @@
           <div class="value"><%= @appointment.customer&.primary_phone %></div>
         </div>
         <div class="attribute">
-          <div class="label"><%= l(:label_estimate, default: 'Estimate') %>:</div>
-          <div class="value"><%= link_to_if @appointment.estimate, @appointment.estimate&.name, @appointment.estimate %></div>
+          <div class="label"><%= l(:label_estimate) %>:</div>
+          <% if @appointment.estimate %>
+            <div class="value"><%= link_to @appointment.estimate, @appointment.estimate, target: "_blank" %></div>
+          <% end %>
         </div>
       </div>
 

assets/javascripts/customer-modal.js

@@ -0,0 +1,106 @@
+$(document).ready(function() {
+  var $dialog = $('#new-customer-dialog');
+  var customerFormXHR = null;
+
+  // 1. Initialize jQuery UI Dialog (built into Redmine)
+  $dialog.dialog({
+    autoOpen: false,
+    modal: true,
+    width: 500,
+    title: "New Customer",
+    buttons: {
+      "Save": function() {
+        submitInlineCustomer();
+      },
+      "Cancel": function() {
+        $(this).dialog("close");
+      }
+    },
+    close: function() {
+      // Abort in-flight request if closing before load finishes
+      if (customerFormXHR) {
+        customerFormXHR.abort();
+      }
+      // Force hide Redmine's global loading overlay
+      $('#ajax-indicator').hide();
+      // Reset modal contents
+      $dialog.empty();
+    }
+  });
+
+  // 2. Open Modal & Fetch Form
+  $('#inline-create-customer-btn').on('click', function(e) {
+    e.preventDefault();
+
+    // Explicitly grab value by the appointment field's specific ID
+    var typedName = $('#customer_appointment_customer').val();
+
+    $dialog.dialog('open');
+
+    // Fetch form bypassing Redmine's global ajax-indicator
+    customerFormXHR = $.ajax({
+      url: '/customers/new',
+      type: 'GET',
+      global: false,
+      success: function(data) {
+        $dialog.html(data);
+
+        // Hide standalone submit button and wiki toolbar inside modal
+        $dialog.find('.actions, .jstBlock').hide();
+
+        // Copy typed name into the modal's specific customer_name field
+        if (typedName && typedName.trim() !== '') {
+          $dialog.find('#customer_name').val(typedName.trim());
+        }
+
+        // Handle ENTER key submission inside modal form
+        $dialog.find('form').off('submit').on('submit', function(ev) {
+          ev.preventDefault();
+          submitInlineCustomer();
+        });
+      },
+      error: function(xhr, status) {
+        if (status !== 'abort') {
+          $dialog.html('<p style="color: red; padding: 10px;">Failed to load customer form.</p>');
+        }
+      }
+    });
+  });
+
+  // 3. Submit Customer Form via AJAX
+  function submitInlineCustomer() {
+    var $form = $dialog.find('form');
+    if ($form.length === 0) return;
+
+    $.ajax({
+      url: $form.attr('action'),
+      type: 'POST',
+      data: $form.serialize(),
+      dataType: 'json',
+      global: false,
+      success: function(response) {
+        // Populate main appointment form fields with newly created customer details
+        $('#customer_id').val(response.id);
+        $('#customer_appointment_customer').val(response.name);
+
+        // Reset dependent select dropdowns for new customer
+        $('#appointment_vehicle_id').empty().append('<option value=""></option>');
+        $('#appointment_estimate_id').empty().append('<option value=""></option>');
+
+        // Close and clean up modal
+        $dialog.dialog('close');
+      },
+      error: function(xhr) {
+        var errors = (xhr.responseJSON && xhr.responseJSON.errors) 
+          ? xhr.responseJSON.errors 
+          : ['Failed to create customer'];
+        alert("Errors:\n" + errors.join("\n"));
+      }
+    });
+  }
+
+  // 4. Dismiss Redmine's global loader when selecting from autocomplete
+  $(document).on('autocompleteselect', '.customer-name', function(event, ui) {
+    $('#ajax-indicator').hide();
+  });
+});

assets/stylesheets/customer_appointments.css

@@ -12,7 +12,7 @@ table.cal td {
     overflow: hidden;
 }
 
-/* Container Box */
+/* Container Box Base */
 .appointment-block {
     position: relative;
     display: flex;
@@ -20,8 +20,8 @@ table.cal td {
     box-sizing: border-box;
     margin: 2px 0;
     padding: 3px 4px 3px 0;
-    background: #edf4ff;
-    border: 1px solid #c5d8f3;
+    background: #e8f8ff;
+    border: 1px solid #91e2ff;
     border-radius: 3px;
     font-size: 0.9em;
     line-height: 1.3;
@@ -36,16 +36,16 @@ table.cal td {
 /* Hover Cue */
 .appointment-block:hover {
     transform: translateY(-1px);
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
+    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.18);
 }
 
-/* Left Indicator Bar */
+/* Left Indicator Bar Base */
 .appointment-block .appointment-bar {
-    width: 4px;
-    background-color: #3c78d8;
+    width: 5px;
+    background-color: #1fc0ff;
     flex-shrink: 0;
-    margin-right: 4px;
-    border-radius: 1px;
+    margin-right: 5px;
+    border-radius: 2px 0 0 2px;
 }
 
 /* Card Content Area */
@@ -57,9 +57,10 @@ table.cal td {
     overflow: hidden;
 }
 
+/* Row 1: Header (Avatar + Title) */
 .appointment-header {
     display: flex;
-    align-items: flex-start;
+    align-items: center;
     gap: 4px;
     font-weight: bold;
     min-width: 0;
@@ -73,37 +74,54 @@ table.cal td {
     object-fit: cover;
 }
 
-/* Multi-line wrapping for titles */
 .appointment-card .appointment-title {
     flex-grow: 1;
     white-space: normal;
     overflow-wrap: anywhere;
     word-break: break-word;
     min-width: 0;
-    vertical-align: top;
+    vertical-align: middle;
 }
 
 .appointment-link {
-    color: #111;
+    color: #000000;
     text-decoration: none;
 }
 
-.appointment-hours {
-    flex-shrink: 0;
-    color: #444;
-    font-size: 0.85em;
+/* Row 2: Meta Bar (Time + Hours) */
+.appointment-meta {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
     font-weight: bold;
-    margin-left: auto;
+    font-size: 0.85em;
+    color: #222222;
 }
 
-/* Multi-line wrapping for details */
+.appointment-time,
+.appointment-hours{
+    flex-shrink: 0;
+}
+
+.appointment-days {
+    place-items: center;
+}
+
+/* Horizontal Dividers */
+.appointment-card .appointment-divider {
+    border: 0;
+    border-top: 1px solid #91e2ff;
+    margin: 3px 0;
+    width: 100%;
+}
+
+/* Row 3: Details */
 .appointment-detail {
-    color: #555;
-    font-size: 0.9em;
+    color: #000000;
+    font-size: 1em;
     white-space: normal;
     overflow-wrap: anywhere;
     word-break: break-word;
-    margin-top: 2px;
     min-width: 0;
 }
 
@@ -112,14 +130,17 @@ table.cal td {
     z-index: 1000 !important;
 }
 
-/* Redmine Tooltip Popover (Hidden by Default & on Hover) */
-.appointment-block .tip,
-.appointment-block:hover .tip {
+/* Redmine Tooltip Popover Base - Fixed Positioning Overriding JS Inline Coordinates */
+.appointment-block .tip {
     display: none !important;
-    position: absolute;
-    top: 100%;
-    left: 0;
-    width: 320px;
+    position: absolute !important;
+    top: 100% !important;
+    left: 0 !important;
+    right: auto !important;
+    bottom: auto !important;
+    transform: none !important;
+    margin: 4px 0 0 0 !important;
+    width: 320px !important;
     padding: 10px;
     background: #ffffff;
     border: 1px solid #ccc;
@@ -132,13 +153,12 @@ table.cal td {
 
 /* Align tooltips to the right on Friday/Saturday columns */
 table.cal td:nth-child(n+6) .appointment-block .tip {
-    left: auto;
-    right: 0;
+    left: auto !important;
+    right: 0 !important;
 }
 
 /* Display Tooltip ONLY on Click (.open class) */
-.appointment-block.open .tip,
-.appointment-block.open:hover .tip {
+.appointment-block.open .tip {
     display: block !important;
 }
 
@@ -152,7 +172,7 @@ table.cal td:nth-child(n+6) .appointment-block .tip {
 .appointment-block .tip .subtitle {
     margin: 0 0 8px 0;
     font-size: 11px;
-    color: #666;
+    color: #555;
     text-transform: capitalize;
 }
 
@@ -166,7 +186,7 @@ table.cal td:nth-child(n+6) .appointment-block .tip {
 .appointment-block .tip table.attributes th {
     text-align: left;
     padding: 3px 6px 3px 0;
-    color: #555;
+    color: #444;
     font-weight: bold;
     width: 35%;
     vertical-align: top;
@@ -174,7 +194,7 @@ table.cal td:nth-child(n+6) .appointment-block .tip {
 
 .appointment-block .tip table.attributes td {
     padding: 3px 0;
-    color: #222;
+    color: #111;
     vertical-align: top;
 }
 
@@ -185,7 +205,7 @@ table.cal td:nth-child(n+6) .appointment-block .tip {
 
 .appointment-block .tip hr {
     border: 0;
-    border-top: 1px solid #e0e0e0;
+    border-top: 1px solid rgba(0, 0, 0, 0.12);
     margin: 8px 0;
 }
 
@@ -193,7 +213,7 @@ table.cal td:nth-child(n+6) .appointment-block .tip {
     max-height: 120px;
     overflow-y: auto;
     font-size: 11px;
-    color: #444;
+    color: #333;
     line-height: 1.4;
 }
 
@@ -218,7 +238,7 @@ table.cal td:nth-child(n+6) .appointment-block .tip {
 }
 
 .calendar-badge .month {
-    background-color: #c22b2b;
+    background-color: #d92626;
     color: #ffffff;
     font-size: 9px;
     font-weight: bold;
@@ -228,7 +248,7 @@ table.cal td:nth-child(n+6) .appointment-block .tip {
 }
 
 .calendar-badge .day {
-    color: #333333;
+    color: #222222;
     font-size: 16px;
     font-weight: bold;
     padding: 4px 0 3px 0;
@@ -240,47 +260,124 @@ h2 .appointment-title {
 
 .appointment-dates {
     font-size: 70%;
-    color: #666;
+    color: #555;
     margin-left: 8px;
     font-weight: normal;
     vertical-align: middle;
 }
 
-/* Calendar Card Status Colors & Indicator Bars */
+/* ==========================================================================
+   Custom High-Vibrancy Hex Status Themes & Tinted Tooltips
+   ========================================================================== */
 
-/* Scheduled - Blue */
-.appointment-block.scheduled .appointment-bar { background-color: #1f77d0; }
-.appointment-block.scheduled { background: #edf4ff; border-color: #c5d8f3; }
+/* Scheduled - #1FC0FF */
+.appointment-block.scheduled,
+.appointment-block.scheduled:hover,
+.appointment-block.scheduled.open { background: #e8f8ff !important; border-color: #91e2ff !important; }
+.appointment-block.scheduled .appointment-bar { background-color: #1fc0ff !important; }
+.appointment-block.scheduled .appointment-divider { border-top-color: #b3ebff !important; }
+.appointment-block.scheduled .tip,
+.appointment-block.scheduled:hover .tip,
+.appointment-block.scheduled.open .tip { background: #f2faff !important; border-color: #70d6ff !important; }
 
-/* CheckedIn - Purple */
-.appointment-block.checked-in .appointment-bar,
-.appointment-block.checkedin .appointment-bar,
-.appointment-block.checked_in .appointment-bar { background-color: #8e44ad; }
+/* Ready - #1FFF1F */
+.appointment-block.ready,
+.appointment-block.ready:hover,
+.appointment-block.ready.open { background: #e8ffe8 !important; border-color: #8bff8b !important; }
+.appointment-block.ready .appointment-bar { background-color: #1fff1f !important; }
+.appointment-block.ready .appointment-divider { border-top-color: #b5ffb5 !important; }
+.appointment-block.ready .tip,
+.appointment-block.ready:hover .tip,
+.appointment-block.ready.open .tip { background: #f2fff2 !important; border-color: #66ff66 !important; }
+
+/* CheckedIn - #CE1FFF */
 .appointment-block.checked-in,
 .appointment-block.checkedin,
-.appointment-block.checked_in { background: #f6f0fa; border-color: #e2d0fb; }
+.appointment-block.checked_in,
+.appointment-block.checked-in:hover,
+.appointment-block.checkedin:hover,
+.appointment-block.checked_in:hover,
+.appointment-block.checked-in.open,
+.appointment-block.checkedin.open,
+.appointment-block.checked_in.open { background: #f8e8ff !important; border-color: #e891ff !important; }
 
-/* InProgress - Orange */
-.appointment-block.in-progress .appointment-bar,
-.appointment-block.inprogress .appointment-bar,
-.appointment-block.in_progress .appointment-bar { background-color: #e68a00; }
+.appointment-block.checked-in .appointment-bar,
+.appointment-block.checkedin .appointment-bar,
+.appointment-block.checked_in .appointment-bar { background-color: #ce1fff !important; }
+
+.appointment-block.checked-in .appointment-divider,
+.appointment-block.checkedin .appointment-divider,
+.appointment-block.checked_in .appointment-divider { border-top-color: #f0b3ff !important; }
+
+.appointment-block.checked-in .tip,
+.appointment-block.checkedin .tip,
+.appointment-block.checked_in .tip,
+.appointment-block.checked-in:hover .tip,
+.appointment-block.checkedin:hover .tip,
+.appointment-block.checked_in:hover .tip,
+.appointment-block.checked-in.open .tip,
+.appointment-block.checkedin.open .tip,
+.appointment-block.checked_in.open .tip { background: #fcf2ff !important; border-color: #df70ff !important; }
+
+/* InProgress - #FF5E1F */
 .appointment-block.in-progress,
 .appointment-block.inprogress,
-.appointment-block.in_progress { background: #fff4df; border-color: #fce2b6; }
+.appointment-block.in_progress,
+.appointment-block.in-progress:hover,
+.appointment-block.inprogress:hover,
+.appointment-block.in_progress:hover,
+.appointment-block.in-progress.open,
+.appointment-block.inprogress.open,
+.appointment-block.in_progress.open { background: #fff0e8 !important; border-color: #ffb391 !important; }
 
-/* Ready - Teal */
-.appointment-block.ready .appointment-bar { background-color: #16a085; }
-.appointment-block.ready { background: #e8f8f5; border-color: #a3e4d7; }
+.appointment-block.in-progress .appointment-bar,
+.appointment-block.inprogress .appointment-bar,
+.appointment-block.in_progress .appointment-bar { background-color: #ff5e1f !important; }
 
-/* Completed - Green */
-.appointment-block.completed .appointment-bar { background-color: #2d8a34; }
-.appointment-block.completed { background: #edf9ee; border-color: #c7eecb; }
+.appointment-block.in-progress .appointment-divider,
+.appointment-block.inprogress .appointment-divider,
+.appointment-block.in_progress .appointment-divider { border-top-color: #ffccb3 !important; }
 
-/* Cancelled - Red & Strikethrough Subject */
-.appointment-block.cancelled .appointment-bar,
-.appointment-block.canceled .appointment-bar { background-color: #d9534f; }
+.appointment-block.in-progress .tip,
+.appointment-block.inprogress .tip,
+.appointment-block.in_progress .tip,
+.appointment-block.in-progress:hover .tip,
+.appointment-block.inprogress:hover .tip,
+.appointment-block.in_progress:hover .tip,
+.appointment-block.in-progress.open .tip,
+.appointment-block.inprogress.open .tip,
+.appointment-block.in_progress.open .tip { background: #fff6f2 !important; border-color: #ff9970 !important; }
+
+/* Completed - #008000 */
+.appointment-block.completed,
+.appointment-block.completed:hover,
+.appointment-block.completed.open { background: #e6f5e6 !important; border-color: #80c080 !important; }
+.appointment-block.completed .appointment-bar { background-color: #008000 !important; }
+.appointment-block.completed .appointment-divider { border-top-color: #a3d9a3 !important; }
+.appointment-block.completed .tip,
+.appointment-block.completed:hover .tip,
+.appointment-block.completed.open .tip { background: #f0fcf0 !important; border-color: #66b366 !important; }
+
+/* Cancelled - #FF1F1F & Strikethrough */
 .appointment-block.cancelled,
-.appointment-block.canceled { background: #fdf2f2; border-color: #f8c8c8; }
+.appointment-block.canceled,
+.appointment-block.cancelled:hover,
+.appointment-block.canceled:hover,
+.appointment-block.cancelled.open,
+.appointment-block.canceled.open { background: #ffe8e8 !important; border-color: #ff9191 !important; }
+
+.appointment-block.cancelled .appointment-bar,
+.appointment-block.canceled .appointment-bar { background-color: #ff1f1f !important; }
+
+.appointment-block.cancelled .appointment-divider,
+.appointment-block.canceled .appointment-divider { border-top-color: #ffb3b3 !important; }
+
+.appointment-block.cancelled .tip,
+.appointment-block.canceled .tip,
+.appointment-block.cancelled:hover .tip,
+.appointment-block.canceled:hover .tip,
+.appointment-block.cancelled.open .tip,
+.appointment-block.canceled.open .tip { background: #fff2f2 !important; border-color: #ff7070 !important; }
 
 .appointment-block.cancelled .appointment-title,
 .appointment-block.cancelled .appointment-link,
@@ -289,6 +386,16 @@ h2 .appointment-title {
     text-decoration: line-through;
 }
 
+/* Call Out - #FFFF00 */
+.appointment-block.call_out,
+.appointment-block.call_out:hover,
+.appointment-block.call_out.open { background: hsl(60, 100%, 95%) !important; border-color: hsl(60, 100%, 50%) !important; }
+.appointment-block.call_out .appointment-bar { background-color: hsl(60, 100%, 45%) !important; }
+.appointment-block.call_out .appointment-divider { border-top-color: hsl(60, 100%, 80%) !important; }
+.appointment-block.call_out .tip,
+.appointment-block.call_out:hover .tip,
+.appointment-block.call_out.open .tip { background: hsl(60, 100%, 97%) !important; border-color: hsl(60, 100%, 60%) !important; }
+
 /* Table List Alignment */
 table.appointments td,
 table.appointments th {
@@ -311,22 +418,22 @@ table.appointments td.status {
 
 .quick-action-label {
     font-weight: bold;
-    color: #555;
+    color: #333;
     font-size: 0.85em;
     margin-right: 4px;
     text-transform: uppercase;
     letter-spacing: 0.5px;
 }
 
-/* Shared Badge & Quick-Status Button Base Styling */
+/* Shared Badge Base */
 .status-badge,
 .quick-status-btn {
     display: inline-flex !important;
     align-items: center !important;
     justify-content: center !important;
-    padding: 3px 10px;
+    padding: 4px 11px;
     font-size: 11px;
-    font-weight: 600;
+    font-weight: 700;
     line-height: 1.2 !important;
     border-radius: 12px;
     border: 1px solid transparent;
@@ -337,55 +444,156 @@ table.appointments td.status {
 }
 
 .quick-status-btn:hover {
-    opacity: 0.85;
+    opacity: 0.88;
     transform: translateY(-1px);
 }
 
-/* Status Colors (Supports hyphen, underscore, and concatenated naming) */
+/* ==========================================================================
+   Badges & Quick Action Buttons
+   ========================================================================== */
 
-/* Scheduled - Blue */
+/* Scheduled - #1FC0FF */
 .status-scheduled {
-    background-color: #edf4ff !important;
-    border-color: #c5d8f3 !important;
-    color: #1f77d0 !important;
+    background-color: #e8f8ff !important;
+    border-color: #91e2ff !important;
+    color: #0077a3 !important;
 }
 
-/* CheckedIn - Purple */
+/* Ready - #1FFF1F */
+.status-ready {
+    background-color: #e8ffe8 !important;
+    border-color: #8bff8b !important;
+    color: #008f00 !important;
+}
+
+/* CheckedIn - #CE1FFF */
 .status-checked-in,
 .status-checkedin,
 .status-checked_in {
-    background-color: #f6f0fa !important;
-    border-color: #e2d0fb !important;
-    color: #8e44ad !important;
+    background-color: #f8e8ff !important;
+    border-color: #e891ff !important;
+    color: #8300ad !important;
 }
 
-/* InProgress - Orange */
+/* InProgress - #FF5E1F */
 .status-in-progress,
 .status-inprogress,
 .status-in_progress {
-    background-color: #fff4df !important;
-    border-color: #fce2b6 !important;
-    color: #e68a00 !important;
+    background-color: #fff0e8 !important;
+    border-color: #ff9191 !important;
+    color: #b33000 !important;
 }
 
-/* Ready - Teal */
-.status-ready {
-    background-color: #e8f8f5 !important;
-    border-color: #a3e4d7 !important;
-    color: #16a085 !important;
-}
-
-/* Completed - Green */
+/* Completed - #008000 */
 .status-completed {
-    background-color: #edf9ee !important;
-    border-color: #c7eecb !important;
-    color: #2d8a34 !important;
+    background-color: #e6f5e6 !important;
+    border-color: #80c080 !important;
+    color: #005200 !important;
 }
 
-/* Cancelled - Red */
+/* Cancelled - #FF1F1F */
 .status-cancelled,
 .status-canceled {
-    background-color: #fdf2f2 !important;
-    border-color: #f8c8c8 !important;
-    color: #d9534f !important;
+    background-color: #ffe8e8 !important;
+    border-color: #ff9191 !important;
+    color: #b30000 !important;
+}
+
+/* Completed - #FFFF00 */
+.status-call_out {
+    background-color: hwb(60 0% 0%) !important;
+    border-color: lab(0% 0 0) !important;
+    color: hwb(60 0% 100%) !important;
+}
+
+/* Redefine grid column proportions for the calendar layout */
+ul.cal {
+  display: grid;
+  grid-template-columns: max-content 0.5fr repeat(5, 1fr) 0.5fr !important;
+}
+
+/* Compress content and dim non-working weekend cells */
+ul.cal li.nwday,
+ul.cal li.sunday,
+ul.cal li.saturday {
+  background-color: #f7f7f7;
+  padding: 2px !important;
+}
+
+/* Hide non-essential metadata on narrow weekend cells */
+ul.cal li.nwday .icon-user,
+ul.cal li.nwday .buttons {
+  display: none;
+}
+
+/* Highlight Today's Calendar Box & Number */
+ul.cal li.today,
+ul.cal li#today,
+table.cal td.today {
+    outline: 2px solid #ff00bf !important;
+    outline-offset: -2px !important;
+}
+
+/* Responsive Mobile View */
+@media screen and (max-width: 768px) {
+  table.cal thead {
+    display: none !important;
+  }
+
+  table.cal,
+  table.cal tbody,
+  table.cal tr,
+  table.cal td {
+    display: block !important;
+    width: 100% !important;
+    max-width: 100% !important;
+    box-sizing: border-box !important;
+  }
+
+  table.cal td {
+    width: 100% !important;
+    min-height: 48px;
+    margin-bottom: 8px;
+    border: 1px solid #d7d7d7 !important;
+    border-radius: 4px;
+    padding: 6px !important;
+    background: #ffffff;
+  }
+
+  ul.cal {
+    display: flex !important;
+    flex-direction: column !important;
+    grid-template-columns: 1fr !important;
+    padding: 0 !important;
+    margin: 0 !important;
+  }
+
+  ul.cal li {
+    width: 100% !important;
+    margin-bottom: 8px;
+    box-sizing: border-box;
+  }
+
+  .appointment-block {
+    width: 100% !important;
+    max-width: 100% !important;
+  }
+
+  .appointment-block .tip,
+  .appointment-block.open .tip {
+    position: fixed !important;
+    top: 50% !important;
+    left: 50% !important;
+    transform: translate(-50%, -50%) !important;
+    width: 90vw !important;
+    max-width: 340px !important;
+    max-height: 80vh !important;
+    overflow-y: auto !important;
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
+  }
+
+  table.cal td:nth-child(n+6) .appointment-block .tip {
+    left: 50% !important;
+    right: auto !important;
+  }
 }

config/locales/en.yml

@@ -20,15 +20,18 @@ en:
   field_vehicle: Vehicle
   label_add_appointment: Add Appointment
   label_appointment: Appointment
+  label_appointments: Appointments
   label_customer_appointment: Customer Appointment
   label_customer_calendar: Customer Calendar
   label_days: Days
   label_duration: Duration
+  label_edit_appointment: Edit Appointment
   label_end_date: End Date
   label_estimated_hours: Estimated Time
   label_event: Event
   label_open_appointment: Open Appointment
   label_only_customer_appointments: Show Customer Appointments Only
+  label_new_appointment: New Appointment
   label_start_date: Start Date
   label_status: Status
   label_technician: Technician

init.rb

@@ -14,7 +14,7 @@ Redmine::Plugin.register :redmine_qbo_calendar do
   name 'Redmine QBO Calendar plugin'
   author 'Rick Barrette'
   description 'A plugin for Redmine to extend the capabilitys of the Redmine QuickBooks Online plugin to create customer appointments for the Redmine Calendar'
-  version '2026.8.0'
+  version '2026.8.1'
   url 'https://github.com/rickbarrette/redmine_qbo_calendar'
   author_url 'https://barrettefabrication.com'
   requires_redmine version_or_higher: '7.0.0'
@@ -22,7 +22,7 @@ Redmine::Plugin.register :redmine_qbo_calendar do
 
   # Ensure redmine_qbo is installed
   begin
-    requires_redmine_plugin :redmine_qbo, version_or_higher: '2026.8.0'
+    requires_redmine_plugin :redmine_qbo, version_or_higher: '2026.8.2'
   rescue Redmine::PluginNotFound
     raise 'Please install the redmine_qbo plugin (https://github.com/rickbarrette/redmine_qbo)'
   end

lib/redmine_qbo_calendar.rb

@@ -14,6 +14,7 @@ module RedmineQboCalendar
     Customer.prepend(RedmineQboCalendar::Patches::CustomerPatch)
     User.prepend(RedmineQboCalendar::Patches::UserPatch)
     CalendarsController.prepend(RedmineQboCalendar::Patches::CalendarsControllerPatch)
+    ApplicationHelper.prepend(RedmineQboCalendar::Patches::ApplicationHelperPatch)
 
     # Hooks
     RedmineQboCalendar::Hooks::ViewHookListener

lib/redmine_qbo_calendar/patches/application_helper_patch.rb

@@ -0,0 +1,39 @@
+#The MIT License (MIT)
+#
+#Copyright (c) 2026 rick barrette
+#
+#Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+#
+#The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+#
+#THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+module RedmineQboCalendar
+  module Patches
+    module ApplicationHelperPatch
+
+      def favicon
+        if calendar_or_appointments_view?
+          tag.link(rel: 'icon', type: 'image/png', href: favicon_path)
+        else
+          # Force an explicit type tag so the browser replaces the PNG on non-calendar pages
+          tag.link(rel: 'icon', type: 'image/x-icon', href: favicon_path)
+        end
+      end
+
+      def favicon_path
+        if calendar_or_appointments_view?
+          image_path("plugin_assets/redmine_qbo_calendar/favicons/#{Date.current.day}.png")
+        else
+          super
+        end
+      end
+
+      private
+
+      def calendar_or_appointments_view?
+        controller_name == 'calendars' || controller_name == 'customer_appointments'
+      end
+    end
+  end
+end