nodebb-plugin-equipment-calendar 3.0.0 → 5.0.0

package/library.js

@@ -17,19 +17,6 @@ const nconf = require.main.require('nconf');
 
 const winston = require.main.require('winston');
 
-function decorateCalendarEvents(events) {
-  return (events || []).map((ev) => {
-    const status = ev.status || (ev.extendedProps && ev.extendedProps.status) || 'pending';
-    const icon = status === 'paid' ? '✅' : (status === 'approved' ? '✔️' : (status === 'pending' ? '⏳' : (status === 'cancelled' ? '❌' : '⚠️')));
-    const title = ev.title || '';
-    return Object.assign({}, ev, {
-      title: `${icon} ${title}`,
-      classNames: ['ec-status-' + status],
-      extendedProps: Object.assign({}, ev.extendedProps || {}, { status }),
-    });
-  });
-}
-
 function generateId() {
   try {
     // Node 14+ / modern: crypto.randomUUID
@@ -51,6 +38,7 @@ const SETTINGS_KEY = 'equipmentCalendar';
 const EC_KEYS = {
   reservationsZset: 'ec:reservations',
   reservationKey: (id) => `ec:reservation:${id}`,
+  itemZset: (itemId) => `ec:item:${itemId}`,
 };
 
 const DEFAULT_SETTINGS = {
@@ -665,6 +653,9 @@ plugin.init = async function (params) {
 
   // Page routes are attached via filter:router.page as well, but we also add directly to be safe:
   router.get('/equipment/calendar', middleware.buildHeader, renderCalendarPage);
+    router.get('/calendar', middleware.buildHeader, renderCalendarPage);
+    router.get('/api/calendar', middleware.buildHeader, renderCalendarPage);
+
   router.get('/equipment/approvals', middleware.buildHeader, renderApprovalsPage);
 
   router.post('/equipment/reservations/create', middleware.applyCSRF, handleCreateReservation);
@@ -700,27 +691,6 @@ plugin.addAdminRoutes = async function (params) {
 
 
 
-async function renderAdminReservationsPage(req, res) {
-  const isAdmin = await user.isAdminOrGlobalMod(req.uid);
-  if (!isAdmin) return res.status(403).render('403', {});
-  const ids = await db.getSortedSetRevRange(EC_KEYS.reservationsZset, 0, 199);
-  const rowsRaw = await db.getObjects(ids.map(id => EC_KEYS.reservationKey(id)));
-  const rows = (rowsRaw || []).filter(Boolean).map((r) => {
-    const startMs = parseInt(r.startMs, 10) || 0;
-    const endMs = parseInt(r.endMs, 10) || 0;
-    return {
-      id: r.id,
-      itemName: r.itemName || r.itemId,
-      startIso: startMs ? new Date(startMs).toISOString().slice(0,10) : '',
-      endIso: endMs ? new Date(endMs - 24*60*60*1000).toISOString().slice(0,10) : '',
-      days: parseInt(r.days, 10) || 1,
-      status: r.status || 'pending',
-      total: r.total || '0',
-    };
-  });
-  res.render('admin/plugins/equipment-calendar-reservations', { title: 'Réservations', rows, hasRows: rows.length>0 });
-}
-
 async function handleAdminApprove(req, res) {
   if (!(await ensureIsAdmin(req, res))) return;
   const rid = String(req.params.rid || '').trim();
@@ -879,88 +849,6 @@ async function handleHelloAssoCallback(req, res) {
   });
 }
 
-async function renderCalendarPage(req, res) {
-  const settings = await getSettings();
-  const items = await getActiveItems(settings);
-
-  const tz = settings.timezone || 'Europe/Paris';
-
-  // Determine range to render
-  const now = DateTime.now().setZone(tz);
-  const view = String(req.query.view || settings.defaultView || 'dayGridMonth');
-  const startQ = req.query.start;
-  const endQ = req.query.end;
-
-  let start, end;
-  if (startQ && endQ) {
-    const r = clampRange(String(startQ), String(endQ), tz);
-    start = r.start;
-    end = r.end;
-  } else {
-    // Default to current month range
-    start = now.startOf('month');
-    end = now.endOf('month').plus({ days: 1 });
-  }
-
-  // Load reservations for ALL items within range (so we can build availability client-side without extra requests)
-  const allReservations = [];
-  for (const it of items) {
-    // eslint-disable-next-line no-await-in-loop
-    const resForItem = await listReservationsForRange(it.id, start.toMillis(), end.toMillis());
-    for (const r of resForItem) allReservations.push(r);
-  }
-
-  const showRequesterToAll = String(settings.showRequesterToAll) === '1';
-  const isApprover = req.uid ? await canApprove(req.uid, settings) : false;
-
-  const requesterUids = Array.from(new Set(allReservations.map(r => r.uid))).filter(Boolean);
-  const users = requesterUids.length ? await user.getUsersData(requesterUids) : [];
-  const nameByUid = {};
-  (users || []).forEach(u => { nameByUid[u.uid] = u.username || ''; });
-
-  const itemById = {};
-  items.forEach(it => { itemById[it.id] = it; });
-
-  const events = allReservations
-    .filter(r => r.status !== 'rejected' && r.status !== 'cancelled')
-    .map(r => {
-      const item = itemById[r.itemId];
-      // Include item name in title so "all items" view is readable
-      const requesterName = nameByUid[r.uid] || '';
-      return toEvent(r, item, requesterName, isApprover || showRequesterToAll);
-    });
-
-  const canUserCreate = req.uid ? await canCreate(req.uid, settings) : false;
-
-  // We expose minimal reservation data for availability checks in the modal
-  const blocks = allReservations
-    .filter(r => statusBlocksItem(r.status))
-    .map(r => ({
-      itemId: r.itemId,
-      startMs: r.startMs,
-      endMs: r.endMs,
-      status: r.status,
-    }));
-
-  res.render('equipment-calendar/calendar', {
-    defaultView: settings.defaultView,
-
-    title: 'Réservation de matériel',
-    items,
-    view,
-    tz,
-    startISO: start.toISO(),
-    endISO: end.toISO(),
-    initialDateISO: start.toISODate(),
-    canCreate: canUserCreate,
-    canCreateJs: canUserCreate ? 'true' : 'false',
-    isApprover,
-    // events are base64 encoded to avoid template escaping issues
-    eventsB64: Buffer.from(JSON.stringify(events), 'utf8').toString('base64'),
-    blocksB64: Buffer.from(JSON.stringify(blocks), 'utf8').toString('base64'),
-    itemsB64: Buffer.from(JSON.stringify(items.map(i => ({ id: i.id, name: i.name, location: i.location }))), 'utf8').toString('base64'),
-  });
-}
 
 
 // --- Approvals page ---
@@ -1121,52 +1009,70 @@ async function createReservationForItem(req, res, settings, itemId, startMs, end
 
 async function handleCreateReservation(req, res) {
   try {
-    const settings = await getSettings();
-    if (!req.uid || !(await canCreate(req.uid, settings))) {
-      return helpers.notAllowed(req, res);
-    }
-
-    const itemIdsRaw = req.body.itemIds || req.body.itemId || '';
-    const itemIds = (Array.isArray(itemIdsRaw) ? itemIdsRaw : String(itemIdsRaw))
-      .split(',')
-      .map(s => String(s).trim())
-      .filter(Boolean);
-
-    if (!itemIds.length) {
-      return res.status(400).send('itemIds required');
-    }
-
-    const tz = settings.timezone || 'Europe/Paris';
-    const start = DateTime.fromISO(String(req.body.start || ''), { zone: tz });
-    const end = DateTime.fromISO(String(req.body.end || ''), { zone: tz });
-    if (!start.isValid || !end.isValid) return res.status(400).send('Invalid dates');
-
-    // Normalize to whole days (no hours). End is exclusive.
-    const startDay = start.startOf('day');
-    let endDay = end.startOf('day');
-    if (endDay <= startDay) {
-      endDay = startDay.plus({ days: 1 });
-    }
+    if (!req.uid) return res.status(403).json({ error: 'not-logged-in' });
 
-    const startMs = startDay.toMillis();
-    const endMs = endDay.toMillis();
+    const settings = await getSettings();
+    const canCreate = await isUserInAnyGroups(req.uid, settings.creatorGroups);
+    if (!canCreate) return res.status(403).json({ error: 'forbidden' });
 
     const notesUser = String(req.body.notesUser || '').trim();
-
-    const bookingId = `${req.uid}:${Date.now()}:${Math.random().toString(36).slice(2, 8)}`;
-
-    // Create one reservation per item, linked by bookingId
-    const created = [];
-    for (const itemId of itemIds) {
-      const rid = await createReservationForItem(req, res, settings, itemId, startMs, endMs, notesUser, bookingId);
-      created.push(rid);
+    const itemIdsRaw = req.body.itemIds || req.body.itemId || [];
+    const itemIds = Array.isArray(itemIdsRaw) ? itemIdsRaw : String(itemIdsRaw || '').split(',').filter(Boolean);
+
+    const startMsRaw = parseInt(req.body.startMs, 10) || 0;
+    const endMsRaw = parseInt(req.body.endMs, 10) || 0;
+
+    const startDate = startMsRaw ? new Date(startMsRaw) : null;
+    const endDate = endMsRaw ? new Date(endMsRaw) : null;
+    const startMs = startDate ? Date.UTC(startDate.getUTCFullYear(), startDate.getUTCMonth(), startDate.getUTCDate()) : 0;
+    let endMs = 0;
+    if (endDate) {
+      endMs = Date.UTC(endDate.getUTCFullYear(), endDate.getUTCMonth(), endDate.getUTCDate());
+      if (endMs <= startMs) endMs = startMs + 24 * 60 * 60 * 1000;
+    }
+    if (!startMs || !endMs) return res.status(400).json({ error: 'invalid-dates' });
+
+    const days = Math.max(1, Math.round((endMs - startMs) / (24 * 60 * 60 * 1000)));
+
+    const items = await getActiveItems();
+    const byId = {};
+    items.forEach((it) => { byId[String(it.id)] = it; });
+
+    const valid = itemIds.map(String).filter((id) => byId[id]);
+    if (!valid.length) return res.status(400).json({ error: 'unknown-item' });
+
+    const bookingId = generateId();
+    for (const itemId of valid) {
+      const it = byId[itemId];
+      const id = generateId();
+      const unitPrice = Number(it.price || 0) || 0;
+      const total = unitPrice * days;
+
+      const reservation = {
+        id,
+        bookingId,
+        uid: req.uid,
+        itemId,
+        itemName: it.name,
+        unitPrice,
+        days,
+        total,
+        notesUser,
+        startMs,
+        endMs,
+        status: 'pending',
+        createdAt: Date.now(),
+      };
+
+      await db.setObject(EC_KEYS.reservationKey(id), reservation);
+      await db.sortedSetAdd(EC_KEYS.reservationsZset, startMs, id);
+      await db.sortedSetAdd(EC_KEYS.itemZset(itemId), startMs, id);
     }
 
-    // Redirect to calendar with a success flag
-    return res.redirect('/equipment/calendar?requested=1');
+    res.redirect(nconf.get('relative_path') + '/calendar?created=1&bookingId=' + bookingId);
   } catch (err) {
-    winston.error(err);
-    return res.status(500).send(err.message || 'Error');
+    winston.error('[equipment-calendar] create error', err);
+    res.status(500).json({ error: 'internal-error' });
   }
 }
 
@@ -1415,3 +1321,83 @@ function startPaymentTimeoutScheduler() {
 }
 
 module.exports = plugin;
+
+async function handleAdminReservationAction(req, res, action) {
+  const isAdmin = await user.isAdminOrGlobalMod(req.uid);
+  if (!isAdmin) return res.status(403).json({ error: 'forbidden' });
+
+  const id = String(req.params.id || '');
+  const key = EC_KEYS.reservationKey(id);
+  const r = await db.getObject(key);
+  if (!r || !r.id) return res.status(404).json({ error: 'not-found' });
+
+  if (action === 'delete') {
+    await db.delete(key);
+    await db.sortedSetRemove(EC_KEYS.reservationsZset, id);
+    if (r.itemId) await db.sortedSetRemove(EC_KEYS.itemZset(r.itemId), id);
+    return res.redirect(nconf.get('relative_path') + '/admin/plugins/equipment-calendar/reservations?done=1');
+  }
+
+  const status = action === 'approve' ? 'approved' : 'cancelled';
+  await db.setObjectField(key, 'status', status);
+  return res.redirect(nconf.get('relative_path') + '/admin/plugins/equipment-calendar/reservations?done=1');
+}
+
+async function renderAdminReservationsPage(req, res) {
+  const isAdmin = await user.isAdminOrGlobalMod(req.uid);
+  if (!isAdmin) return res.status(403).render('403', {});
+  const ids = await db.getSortedSetRevRange(EC_KEYS.reservationsZset, 0, 199);
+  const rowsRaw = await db.getObjects(ids.map(id => EC_KEYS.reservationKey(id)));
+  const rows = (rowsRaw || []).filter(Boolean).map((r) => {
+    const startMs = parseInt(r.startMs, 10) || 0;
+    const endMs = parseInt(r.endMs, 10) || 0;
+    return {
+      id: r.id,
+      bookingId: r.bookingId || '',
+      itemName: r.itemName || r.itemId,
+      startIso: startMs ? new Date(startMs).toISOString().slice(0,10) : '',
+      endIso: endMs ? new Date(endMs - 24*60*60*1000).toISOString().slice(0,10) : '',
+      days: parseInt(r.days, 10) || 1,
+      status: r.status || 'pending',
+      total: (Number(r.total || 0) || 0),
+    };
+  });
+  res.render('admin/plugins/equipment-calendar-reservations', { title: 'Réservations', rows, hasRows: rows.length>0, csrf: req.csrfToken(), done: String(req.query.done||'')==='1' });
+}
+
+async function getCalendarEvents() {
+  const ids = await db.getSortedSetRange(EC_KEYS.reservationsZset, 0, -1);
+  const rows = await db.getObjects(ids.map(id => EC_KEYS.reservationKey(id)));
+  return (rows || []).filter(Boolean).map((r) => {
+    const startMs = parseInt(r.startMs, 10) || 0;
+    const endMs = parseInt(r.endMs, 10) || 0;
+    const status = r.status || 'pending';
+    return {
+      id: r.id,
+      title: (r.itemName || 'Réservation'),
+      start: startMs ? new Date(startMs).toISOString().slice(0,10) : null,
+      end: endMs ? new Date(endMs).toISOString().slice(0,10) : null,
+      allDay: true,
+      classNames: ['ec-status-' + status],
+      extendedProps: { status, bookingId: r.bookingId || '' },
+    };
+  });
+}
+
+async function renderCalendarPage(req, res) {
+  const settings = await getSettings();
+  const canCreate = req.uid ? await isUserInAnyGroups(req.uid, settings.creatorGroups) : false;
+  const isApprover = req.uid ? await isUserInAnyGroups(req.uid, settings.approverGroup) : false;
+  const items = await getActiveItems();
+  const events = await getCalendarEvents();
+
+  res.render('equipment-calendar/calendar', {
+    title: 'Calendrier',
+    canCreate,
+    isApprover,
+    items,
+    eventsJson: JSON.stringify(events),
+    defaultView: settings.defaultView || 'dayGridMonth',
+    created: String(req.query.created || '') === '1',
+  });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nodebb-plugin-equipment-calendar",
-  "version": "3.0.0",
+  "version": "5.0.0",
   "description": "Equipment reservation calendar for NodeBB (FullCalendar, approvals, HelloAsso payments)",
   "main": "library.js",
   "scripts": {

package/plugin.json

@@ -25,6 +25,6 @@
   "scripts": [
     "public/js/client.js"
   ],
-  "version": "0.7.5",
+  "version": "0.8.0",
   "minver": "4.7.1"
 }

package/public/js/client.js

@@ -93,12 +93,11 @@ require(['jquery', 'bootstrap'], function ($, bootstrap) {
     const events = Array.isArray(window.EC_EVENTS) ? window.EC_EVENTS : [];
 
     const calendar = new window.FullCalendar.Calendar(calendarEl, {
-        headerToolbar:{left:'prev,next today',center:'title',right:'dayGridMonth,listMonth,listWeek'},
-      initialView: (window.EC_DEFAULT_VIEW || 'dayGridMonth'),
+        locale: 'fr',
+        headerToolbar: { left: 'prev,next today', center: 'title', right: 'dayGridMonth,dayGridWeek,listMonth,listWeek' },
       selectable: canCreate,
       selectMirror: true,
       events,
-        eventDidMount:function(info){try{const s=info.event.extendedProps&&info.event.extendedProps.status;info.el.title=(s?('Statut: '+s+' — '):'')+info.event.title;}catch(e){}},
       dateClick: function (info) {
         if (!canCreate) return;
         const startMs = Date.UTC(info.date.getUTCFullYear(), info.date.getUTCMonth(), info.date.getUTCDate());

package/public/templates/admin/plugins/equipment-calendar-reservations.tpl

@@ -1,104 +1,49 @@
+
 <div class="acp-page-container">
   <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
-    <h1 class="mb-0">Equipment Calendar</h1>
-    <div class="btn-group">
-      <a class="btn btn-outline-secondary" href="/admin/plugins/equipment-calendar">Paramètres</a>
-      <a class="btn btn-secondary active" href="/admin/plugins/equipment-calendar/reservations">Réservations</a>
-    </div>
+    <h1 class="mb-0">Réservations</h1>
+    <a class="btn btn-outline-secondary" href="/admin/plugins/equipment-calendar">Paramètres</a>
   </div>
 
-  <form method="get" action="/admin/plugins/equipment-calendar/reservations" class="card card-body mt-3 mb-3">
-    <div class="row g-2 align-items-end">
-      <div class="col-md-3">
-        <label class="form-label">Statut</label>
-        <select class="form-select" name="status">
-          {{{ each statusOptions }}}
-            <option value="{statusOptions.id}" {{{ if statusOptions.selected }}}selected{{{ end }}}>{statusOptions.name}</option>
-          {{{ end }}}
-        </select>
-      </div>
-      <div class="col-md-4">
-        <label class="form-label">Matériel</label>
-        <select class="form-select" name="itemId">
-          {{{ each itemOptions }}}
-            <option value="{itemOptions.id}" {{{ if itemOptions.selected }}}selected{{{ end }}}>{itemOptions.name}</option>
-          {{{ end }}}
-        </select>
-      </div>
-      <div class="col-md-3">
-        <label class="form-label">Recherche</label>
-        <input class="form-control" name="q" value="{q}" placeholder="rid, uid, note">
-      </div>
-      <div class="col-md-2">
-        <button class="btn btn-primary w-100" type="submit">Filtrer</button>
-      </div>
-    </div>
-  </form>
-
-  <div class="text-muted small mb-2">
-    Total (filtré) : <strong>{total}</strong> — Total (global) : <strong>{totalAll}</strong>
-  </div>
+  {{{ if done }}}
+  <script>
+    if (window.app && window.app.alertSuccess) window.app.alertSuccess('Action effectuée');
+  </script>
+  {{{ end }}}
 
   {{{ if hasRows }}}
-  <div class="table-responsive">
+  <div class="table-responsive mt-3">
     <table class="table table-striped align-middle">
-      <thead>
-        <tr>
-          <th>RID</th>
-          <th>Matériel</th>
-          <th>UID</th>
-          <th>Début</th>
-          <th>Fin</th>
-          <th>Statut</th>
-          <th>Créé</th>
-          <th>Note</th>
-          <th>Actions</th>
-        </tr>
-      </thead>
+      <thead><tr><th>ID</th><th>Matériel</th><th>Période</th><th>Jours</th><th>Statut</th><th>Total</th><th class="text-end">Actions</th></tr></thead>
       <tbody>
-        {{{ each rows }}}
+        <!-- BEGIN rows -->
         <tr>
-          <td><code>{rows.rid}</code></td>
+          <td><code>{rows.id}</code><br><small class="text-muted">{rows.bookingId}</small></td>
           <td>{rows.itemName}</td>
-          <td>{rows.uid}</td>
-          <td><small>{rows.start}</small></td>
-          <td><small>{rows.end}</small></td>
-          <td><code>{rows.status}</code></td>
-          <td><small>{rows.createdAt}</small></td>
-          <td><small>{rows.notesUser}</small></td>
-          <td class="text-nowrap">
-            <form method="post" action="/admin/plugins/equipment-calendar/reservations/{rows.rid}/approve" class="d-inline">
-              <input type="hidden" name="_csrf" value="{config.csrf_token}">
-              <button class="btn btn-sm btn-success" type="submit">Approve</button>
+          <td>{rows.startIso} → {rows.endIso}</td>
+          <td>{rows.days}</td>
+          <td><span class="badge text-bg-secondary">{rows.status}</span></td>
+          <td>{rows.total} €</td>
+          <td class="text-end">
+            <form class="d-inline" method="post" action="/admin/plugins/equipment-calendar/reservations/{rows.id}/approve">
+              <input type="hidden" name="_csrf" value="{csrf}">
+              <button class="btn btn-sm btn-primary" type="submit">Approve</button>
             </form>
-            <form method="post" action="/admin/plugins/equipment-calendar/reservations/{rows.rid}/reject" class="d-inline ms-1">
-              <input type="hidden" name="_csrf" value="{config.csrf_token}">
+            <form class="d-inline" method="post" action="/admin/plugins/equipment-calendar/reservations/{rows.id}/reject">
+              <input type="hidden" name="_csrf" value="{csrf}">
               <button class="btn btn-sm btn-warning" type="submit">Reject</button>
             </form>
-            <form method="post" action="/admin/plugins/equipment-calendar/reservations/{rows.rid}/delete" class="d-inline ms-1" onsubmit="return confirm('Supprimer définitivement ?');">
-              <input type="hidden" name="_csrf" value="{config.csrf_token}">
+            <form class="d-inline" method="post" action="/admin/plugins/equipment-calendar/reservations/{rows.id}/delete" onsubmit="return confirm('Supprimer ?');">
+              <input type="hidden" name="_csrf" value="{csrf}">
               <button class="btn btn-sm btn-danger" type="submit">Delete</button>
             </form>
           </td>
         </tr>
-        {{{ end }}}
+        <!-- END rows -->
       </tbody>
     </table>
   </div>
-
-  <div class="d-flex justify-content-between align-items-center mt-3">
-    <div>Page {page} / {totalPages}</div>
-    <div class="btn-group">
-      {{{ if prevPage }}}
-      <a class="btn btn-outline-secondary" href="/admin/plugins/equipment-calendar/reservations?page={prevPage}&perPage={perPage}">Précédent</a>
-      {{{ end }}}
-      {{{ if nextPage }}}
-      <a class="btn btn-outline-secondary" href="/admin/plugins/equipment-calendar/reservations?page={nextPage}&perPage={perPage}">Suivant</a>
-      {{{ end }}}
-    </div>
-  </div>
-
   {{{ else }}}
-    <div class="alert alert-info">Aucune réservation trouvée.</div>
+  <div class="alert alert-info mt-3">Aucune réservation.</div>
   {{{ end }}}
 </div>

package/public/templates/admin/plugins/equipment-calendar.tpl

@@ -35,15 +35,15 @@
       </div>
     </div>
 
-    
     <div class="card card-body mb-3">
       <h5>Affichage calendrier</h5>
       <div class="mb-0">
         <label class="form-label">Vue par défaut</label>
         <select class="form-select" name="defaultView">
-          <option value="dayGridMonth" {{{ if view_dayGridMonth }}}selected{{{ end }}}>Mois</option>
-          <option value="listMonth" {{{ if view_listMonth }}}selected{{{ end }}}>Liste (mois)</option>
-          <option value="listWeek" {{{ if view_listWeek }}}selected{{{ end }}}>Liste (semaine)</option>
+          <option value="dayGridMonth">Mois</option>
+          <option value="dayGridWeek">Semaine</option>
+          <option value="listMonth">Liste (mois)</option>
+          <option value="listWeek">Liste (semaine)</option>
         </select>
       </div>
     </div>

package/public/templates/equipment-calendar/calendar.tpl

@@ -43,8 +43,8 @@
               <label class="form-label">Matériel</label>
               <select class="form-select" id="ec-item-ids" name="itemIds" multiple required>
         <!-- BEGIN items -->
-        <option value="{items.id}" data-price="{items.price}">{items.name} — {items.price} €</option>
-        <!-- END items -->
+<option value="{items.id}" data-price="{items.price}">{items.name} — {items.price} €</option>
+<!-- END items -->
 </select>
               <div class="form-text">Tu peux sélectionner plusieurs matériels.</div>
             </div>
@@ -74,7 +74,6 @@
 </div>
 
 <script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.19/index.global.min.js"></script>
-<script>window.EC_DEFAULT_VIEW = '{defaultView}';</script>
 <script src="{relative_path}/plugins/nodebb-plugin-equipment-calendar/js/client.js"></script>
 
 <script>
@@ -84,4 +83,10 @@
   window.EC_TZ = '{tz}';
 </script>
 
-<style>.ec-status-pending{opacity:.85}.ec-status-paid{font-weight:600}.ec-status-cancelled,.ec-status-expired{opacity:.6;text-decoration:line-through}</style>
+<style>
+.fc-event.ec-status-pending { background: rgba(108,117,125,.18); border-color: rgba(108,117,125,.45); }
+.fc-event.ec-status-approved { background: rgba(13,110,253,.18); border-color: rgba(13,110,253,.45); }
+.fc-event.ec-status-paid { background: rgba(25,135,84,.18); border-color: rgba(25,135,84,.45); }
+.fc-event.ec-status-cancelled { background: rgba(220,53,69,.10); border-color: rgba(220,53,69,.35); opacity:.65; text-decoration: line-through; }
+.fc .fc-event-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+</style>