Upgrade fullcalendar libraries

app/helpers/decidim/calendar/calendar_helper.rb

@@ -20,12 +20,13 @@ def calendar_event(event)
           title: translated_attribute(event.full_title),
           start: (event.start.strftime("%FT%R") unless event.start.nil?),
           end: (event.finish.strftime("%FT%R") unless event.finish.nil?),
+          hour: event.hour,
           backgroundColor: event.color,
           textColor: event.font_color,
           url: event.link,
           resourceId: event.type,
           allDay: event.all_day?,
-          classNames: ["calendar-event-#{event.type}"],
+          classNames: ["calendar-event-#{event.type}#{event.hour ? " has-hour" : " all-day"}"],
           subtitle: (translated_attribute(event.subtitle) unless event.subtitle.empty?)
         }.compact
       end

app/packs/src/decidim/calendar/calendar.js

@@ -25,7 +25,7 @@ const getInitialDate = () => {
   let year = today.getFullYear();
   let month = today.getMonth();
   let day = today.getDate();
-  window.location.hash.substr(1).split("&").forEach((v) => {
+  window.location.hash.substring(1).split("&").forEach((v) => {
     if (v.match("^year")) {
       year = v.substring(5);
     }
@@ -41,17 +41,23 @@ const getInitialDate = () => {
 
 const getInitialView = () => {
   let view = calendarEl.dataset.defaultview || "dayGridMonth"
-  window.location.hash.substr(1).split("&").forEach((v) => {
-    if (v.match("^view")) {
-      view = v.substring(5);
-    }
-  });
+  const isMobile = window.innerWidth < 576;
+
+  if (isMobile) {
+    view = "dayGridWeek"; 
+  } else {
+    window.location.hash.substring(1).split("&").forEach((v) => {
+      if (v.match("^view")) {
+        view = v.substring(5);
+      }
+    });
+  }
   return view;
 };
 
 const getInitialFilters = () => {
   let filters = false;
-  window.location.hash.substr(1).split("&").forEach((v) => {
+  window.location.hash.substring(1).split("&").forEach((v) => {
     if (v.match("^filters")) {
       filters = v.substring(8).split(",");
     }
@@ -62,6 +68,7 @@ const getInitialFilters = () => {
 const calendar = new Calendar(calendarEl, {
   plugins: [interactionPlugin, dayGridPlugin, timeGridPlugin, listPlugin],
   initialView: getInitialView(),
+  dayMaxEvents: 3,
   locale: currentLocale,
   firstDay: calendarEl.dataset.hasOwnProperty("firstday") // eslint-disable-line no-prototype-builtins
     ? parseInt(calendarEl.dataset.firstday)
@@ -87,13 +94,14 @@ const calendar = new Calendar(calendarEl, {
     return [];
   },
   eventContent: (info) => {
-    if ("subtitle" in info.event.extendedProps) {
-      return { 
-        html: `<span class="fc-title"><b>${info.event.title}</b> - ${info.event.extendedProps.subtitle}</span>`
-      };
-    }
-    return { 
-      html: `<span class="fc-title">${info.event.title}</span>`
+    const subtitle = "subtitle" in info.event.extendedProps
+      ? ` - ${info.event.extendedProps.subtitle}`
+      : "";
+    const hour = "hour" in info.event.extendedProps
+      ? `${info.event.extendedProps.hour}  `
+      : "";
+    return {
+      html: `<span class="fc-title" >${hour}<b>${info.event.title}</b>${subtitle}</span>`
     };
   },
   eventClick: (info) => {

app/packs/stylesheets/decidim/calendar/calendar.scss

@@ -1,6 +1,6 @@
 #calendar {
   .fc-title {
-    margin-left: 5px;
+    margin-left: 10px;
   }
 
   .fc-scroller {
@@ -33,4 +33,21 @@
   .fc-content-skeleton td {
     background-color: #fff;
   }
+
+  $small: 576px;
+
+  @media screen and (max-width: $small) {
+    .fc-button {
+      padding-top: .25rem;
+      padding-bottom: .25rem;
+      font-size: .6rem;
+      margin: 0 1px 1px 0;
+    }
+
+    .fc-toolbar-title {
+      font-size: 1rem;
+      inline-size: 20vw;
+      overflow-wrap: break-word;
+    }
+  }
 }

app/presenters/decidim/calendar/event_presenter.rb

@@ -95,6 +95,12 @@ def all_day?
 
         (start.to_date..finish.to_date).count > 1
       end
+
+      def hour
+        return nil if start.is_a?(Date) || all_day?
+
+        start.strftime("%H:%M")
+      end
     end
   end
 end

app/views/decidim/calendar/admin/external_events/index.html.erb

@@ -22,7 +22,7 @@
           <thead>
             <tr>
               <th><%= t("models.external_events.fields.title", scope: "decidim.calendar.admin") %></th>
-              <th><%= t("models.external_events.fields.start_at", scope: "decidim.calendar.admin") %></th>
+              <th><%= t("models.external_events.fields.start_at", scope:"decidim.calendar.admin") %></th>
               <th><%= t("models.external_events.fields.end_at", scope: "decidim.calendar.admin") %></th>
               <th><%= t("models.external_events.fields.url", scope: "decidim.calendar.admin") %></th>
               <th></th>

app/views/decidim/calendar/calendar/_calendar_css.html.erb

@@ -14,5 +14,34 @@
       border-color: <%= item[:color] %>;
       color: <%= item[:fontColor] %>;
     }
+
+    .calendar-event-<%= item[:id] %>.has-hour {
+      background-color: transparent;
+      border-color: transparent;
+      color: inherit;
+    }
+
+    .calendar-event-<%= item[:id] %>.has-hour::before {
+      content: "";
+      position: absolute;
+      left: 0;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 8px;
+      height: 8px;
+      background-color: <%= item[:color] %>;
+      border-radius: 50%;
+    }
+
+    div.fc-scroller.fc-scroller-liquid .calendar-event-<%= item[:id] %>.has-hour::before {
+      display: none;
+    }
+
+    .button.calendar {
+      padding-top: 0.25rem;
+      padding-bottom: 0.25rem;
+      font-size: 1rem;
+      margin: 0px 1px 1px 0px;
+    }
   <% end %>
 </style>

app/views/decidim/calendar/calendar/index.html.erb

@@ -5,6 +5,9 @@
 
 <%= participatory_space_wrapper do %>
   <div class="row columns">
+      <%= render partial: "decidim/meetings/calendar_modal", locals: {
+             path:  calendar_ical_path
+           } %>
     <div class="calendar-filters button-group">
       <% available_events.each do |_key,item| %>
         <button class="button tiny cal-filter <%= item[:id] %>" id="<%= item[:id] %>"><%= I18n.t(item[:id], scope: "decidim.calendar.index.filters") %></button>

app/views/layouts/_calendar_navigation.html.erb

@@ -9,10 +9,6 @@
       name: t("menu.gantt", scope: "decidim.calendar"),
       url: calendar_gantt_path,
       active: is_active_link?(calendar_gantt_path, :exclusive)
-    },
-    {
-      name: t("menu.ical", scope: "decidim.calendar"),
-      url: calendar_ical_path,
     }
   ])
 %>