Add support for modal option for event in calender page block

client/web/compose/src/components/PageBlocks/CalendarBase.vue

@@ -340,7 +340,18 @@ export default {
         return
       }
 
-      this.$router.push({ name: 'page.record', params: { recordID, pageID: page.pageID } })
+      const route = { name: 'page.record', params: { recordID, pageID: page.pageID } }
+
+      if (this.options.eventDisplayOption === 'newTab') {
+        window.open(this.$router.resolve(route).href)
+      } else if (this.options.eventDisplayOption === 'modal') {
+        this.$root.$emit('show-record-modal', {
+          recordID,
+          recordPageID: page.pageID,
+        })
+      } else {
+        this.$router.push(route)
+      }
     },
 
     getHeight () {

client/web/compose/src/components/PageBlocks/CalendarConfigurator/CalendarDisplay.vue

@@ -57,6 +57,23 @@
         :options="views"
       />
     </b-form-group>
+
+    <b-row>
+      <b-col
+        cols="12"
+        md="6"
+      >
+        <b-form-group
+          :label="$t('calendar.view.onEventClick')"
+          label-class="text-primary"
+        >
+          <b-form-select
+            v-model="options.eventDisplayOption"
+            :options="eventDisplayOptions"
+          />
+        </b-form-group>
+      </b-col>
+    </b-row>
   </fieldset>
 </template>
 <script>
@@ -75,6 +92,14 @@ export default {
       return compose.PageBlockCalendar.availableViews()
         .map(view => ({ value: view, text: this.$t(`calendar.view.${view}`) }))
     },
+
+    eventDisplayOptions () {
+      return [
+        { value: 'sameTab', text: this.$t('calendar.view.openInSameTab') },
+        { value: 'newTab', text: this.$t('calendar.view.openInNewTab') },
+        { value: 'modal', text: this.$t('calendar.view.openInModal') },
+      ]
+    },
   },
 }
 </script>

lib/js/src/compose/types/page-block/calendar/page-block.ts

@@ -38,6 +38,7 @@ class CalendarOptions {
   public refreshRate = 0
   public showRefresh = false
   public magnifyOption = ''
+  public eventDisplayOption = 'sameTab'
 }
 
 /**
@@ -63,7 +64,7 @@ export class PageBlockCalendar extends PageBlock {
 
     Apply(this.options, o, Boolean, 'showRefresh')
 
-    Apply(this.options, o, String, 'magnifyOption')
+    Apply(this.options, o, String, 'magnifyOption', 'eventDisplayOption')
 
     this.options.defaultView = PageBlockCalendar.handleLegacyView(o.defaultView) || 'dayGridMonth'
     this.options.feeds = (o.feeds || []).map(f => new Feed(f))

locale/en/corteza-webapp-compose/block.yaml

@@ -72,6 +72,10 @@ calendar:
     listMonth: Agenda
     timeGridDay: Day
     timeGridWeek: Week
+    onEventClick: On event click
+    openInSameTab: Open record in the same tab
+    openInNewTab: Open record in a new tab
+    openInModal: Open record in a modal
   viewLabel: Calendar
 chart:
   add: New Chart