Merge pull request #6 from CAPCHIK/feature/start-end

Added start and end fields with timegrid plugin

README.md

@@ -1,5 +1,5 @@
 # BudiBase FullCalendar
-<img src="https://github.com/pixelinfinito/budibase-fullcalendar/blob/main/src/images/calendar.png" />
+<img src="src/images/calendar.png" />
 
 
 ## Description
@@ -23,9 +23,9 @@ After installing the plugin for Budibase, you can start using it in your applica
 The plugin adds full calendar and functionality to the platform, allowing you to further customize your application.
 You can use up to two data sources, the first source is mandatory. You can differentiate the two data sources in the calendar by changing the colors.
 
-1. First add a data source <p><img src="https://github.com/pixelinfinito/budibase-fullcalendar/blob/main/src/images/usage/2.png" /></p>
-2. Add the calendar component inside the data source, you can search for FullCalendar <p><img src="https://github.com/pixelinfinito/budibase-fullcalendar/blob/main/src/images/usage/3.png" /></p>
-3.  Configure the data that will be used, the fields <b>Title Mapping (Event Group 1) </b> and <b>Date Mapping (Event Group 1)</b> are mandatory <p><img src="https://github.com/pixelinfinito/budibase-fullcalendar/blob/main/src/images/usage/4.png" /></p>
+1. First add a data source <p><img src="src/images/usage/2.png" /></p>
+2. Add the calendar component inside the data source, you can search for FullCalendar <p><img src="src/images/usage/3.png" /></p>
+3.  Configure the data that will be used, the fields <b>Title Mapping (Event Group 1) </b> and <b>Date Mapping (Event Group 1)</b> are mandatory <p><img src="src/images/usage/4.png" /></p>
 
 ## Features
 
@@ -34,6 +34,12 @@ You can use up to two data sources, the first source is mandatory. You can diffe
 3. Group data by color
 4. Change language
 
+## Available plugins
+1. DayGrid ([Month View](https://fullcalendar.io/docs/month-view), [DayGrid View](https://fullcalendar.io/docs/daygrid-view))
+2. List ([List View](https://fullcalendar.io/docs/list-view))
+3. TimeGrid ([TimeGrid View](https://fullcalendar.io/docs/timegrid-view))
+
+
 ## Contributing
 
 If you want to contribute to the development of the plugin, follow these steps:

package.json

@@ -11,10 +11,11 @@
   },
   "dependencies": {
     "@crownframework/svelte-error-boundary": "^1.0.3",
-    "@fullcalendar/bootstrap5": "^6.1.4",
-    "@fullcalendar/core": "^6.1.4",
-    "@fullcalendar/daygrid": "^6.1.4",
-    "@fullcalendar/list": "^6.1.4",
+    "@fullcalendar/bootstrap5": "^6.1.7",
+    "@fullcalendar/core": "^6.1.7",
+    "@fullcalendar/daygrid": "^6.1.7",
+    "@fullcalendar/list": "^6.1.7",
+    "@fullcalendar/timegrid": "^6.1.7",
     "bootstrap": "^5.2.3",
     "bootstrap-icons": "^1.10.3",
     "dayjs": "^1.11.7",

schema.json

@@ -8,81 +8,144 @@
     "icon": "Calendar",
     "settings": [
       {
-        "type": "dataProvider",
-        "label": "DataProvider (Event Group 1)",
-        "key": "dataProvider",
-        "required": true
-      },
-
-      {
-        "type": "text",
-        "key": "mappingTitle",
-        "label": "Title Mapping (Event Group 1)"
-      },
-      {
-        "type": "text",
-        "key": "mappingDate",
-        "label": "Date Mapping (Event Group 1)"
-      },
-      {
-        "type": "boolean",
-        "key": "allday",
-        "label": "AllDay Mapping (Event Group 1)"
-      },
-      {
-        "type": "color",
-        "label": "Color Mapping",
-        "key": "mappingColor",
-        "defaultValue": "#272727"
-      },
-      {
-        "type": "dataProvider",
-        "label": "DataProvider (Event Group 2)",
-        "key": "dataProvider2",
-        "required": false
-      },
-
-      {
-        "type": "text",
-        "key": "mappingTitle2",
-        "label": "Title Mapping (Event Group 2)"
-      },
-
-      {
-        "type": "text",
-        "key": "mappingDate2",
-        "label": "Date Mapping (Event Group 2)"
-      },
-      {
-        "type": "color",
-        "label": "Color Mapping",
-        "key": "mappingColor2",
-        "defaultValue": "#000"
+        "section": true,
+        "name": "Event Group 1",
+        "settings": [
+          {
+            "type": "dataProvider",
+            "label": "DataProvider",
+            "key": "dataProvider",
+            "required": true
+          },
+          {
+            "type": "text",
+            "key": "mappingTitle",
+            "label": "Title Mapping"
+          },
+          {
+            "type": "text",
+            "key": "mappingDate",
+            "label": "Date Mapping"
+          },
+          {
+            "type": "text",
+            "key": "mappingStart",
+            "label": "Start Mapping"
+          },
+          {
+            "type": "text",
+            "key": "mappingEnd",
+            "label": "End Mapping"
+          },
+          {
+            "type": "boolean",
+            "key": "allday",
+            "label": "AllDay Mapping"
+          },
+          {
+            "type": "color",
+            "label": "Color Mapping",
+            "key": "mappingColor",
+            "defaultValue": "#272727"
+          }
+        ]
       },
       {
-        "type": "boolean",
-        "key": "allday2",
-        "label": "AllDay Mapping (Event Group 2)"
+        "section": true,
+        "name": "Event Group 2",
+        "settings": [
+          {
+            "type": "dataProvider",
+            "label": "DataProvider",
+            "key": "dataProvider2",
+            "required": false
+          },
+          {
+            "type": "text",
+            "key": "mappingTitle2",
+            "label": "Title Mapping"
+          },
+          {
+            "type": "text",
+            "key": "mappingDate2",
+            "label": "Date Mapping"
+          },
+          {
+            "type": "text",
+            "key": "mappingStart2",
+            "label": "Start Mapping"
+          },
+          {
+            "type": "text",
+            "key": "mappingEnd2",
+            "label": "End Mapping"
+          },
+          {
+            "type": "boolean",
+            "key": "allday2",
+            "label": "AllDay Mapping"
+          },
+          {
+            "type": "color",
+            "label": "Color Mapping",
+            "key": "mappingColor2",
+            "defaultValue": "#000"
+          }
+        ]
       },
       {
-        "type": "select",
-        "key": "language",
-        "options": ["pt", "en", "fr", "es", "ru"] ,
-        "label": "language",
-        "defaultValue": "pt"
+        "section": true,
+        "name": "Header options",
+        "settings": [
+          {
+            "type": "text",
+            "label": "Start Options",
+            "key": "headerOptionsStart",
+            "defaultValue": "prev,next today"
+          },
+          {
+            "type": "text",
+            "label": "Center Options",
+            "key": "headerOptionsCenter",
+            "defaultValue": "title"
+          },
+          {
+            "type": "text",
+            "label": "End Options",
+            "key": "headerOptionsEnd",
+            "defaultValue": "dayGridMonth,dayGridWeek,timeGridDay"
+          }
+        ]
       },
       {
-        "type": "event",
-        "label": "On Click",
-        "key": "calendarEvent",
-        "context": [
+        "section": true,
+        "settings": [
+          {
+            "type": "select",
+            "key": "language",
+            "options": [
+              "pt",
+              "en",
+              "fr",
+              "es",
+              "ru"
+            ],
+            "label": "language",
+            "defaultValue": "pt"
+          },
           {
-            "label": "Clicked Event",
-            "key": "value"
+            "type": "event",
+            "label": "On Click",
+            "key": "calendarEvent",
+            "context": [
+              {
+                "label": "Clicked Event",
+                "key": "value"
+              }
+            ]
           }
         ]
       }
     ]
-
   }
 }

src/Component.svelte

@@ -4,6 +4,7 @@
   import '@fullcalendar/core/locales-all'
   import FullCalendar from 'svelte-fullcalendar';
   import daygridPlugin from '@fullcalendar/daygrid';
+  import timeGridPlugin from '@fullcalendar/timegrid';
   import listPlugin from '@fullcalendar/list';
   import { onMount } from "svelte";
   import {langs, codeLang} from "./lang"
@@ -13,9 +14,13 @@
   
   export let mappingTitle
   export let mappingDate
+  export let mappingStart
+  export let mappingEnd
  
   export let mappingTitle2
   export let mappingDate2
+  export let mappingStart2
+  export let mappingEnd2
 
   export let dataProvider
   export let dataProvider2
@@ -26,6 +31,10 @@
   export let allday
   export let allday2
   
+  export let headerOptionsStart
+  export let headerOptionsCenter
+  export let headerOptionsEnd
+
   let eventsList = []
   onMount(()=>{
     
@@ -35,25 +44,25 @@
     if(dataProvider.rows){
       dataProvider.rows.forEach(event => {
         let eventColor = mappingColor ?? '#313131'           
-        eventsList.push({ title: event[mappingTitle], date: event[mappingDate], color: eventColor, event: event, allDay: allday   })        
+        eventsList.push({ title: event[mappingTitle], date: event[mappingDate], start: event[mappingStart], end: event[mappingEnd], color: eventColor, event: event, allDay: allday   })        
       });
     }
     if(dataProvider2.rows){
       dataProvider2.rows.forEach(event => {
         let eventColor2 = mappingColor2 ?? '#eb4034' 
-        eventsList.push({ title: event[mappingTitle2], date: event[mappingDate2], color: eventColor2, event: event, allDay: allday2  })
+        eventsList.push({ title: event[mappingTitle2], date: event[mappingDate2], start: event[mappingStart2], end: event[mappingEnd2], color: eventColor2, event: event, allDay: allday2  })
       });
     }
     eventsList = eventsList
   })
 
   let options  = {
     headerToolbar: {
-      left: 'prev,next today',
-      center: 'title',
-      right: 'dayGridMonth,dayGridWeek,dayGridDay'
+      start: headerOptionsStart,
+      center: headerOptionsCenter,
+      end: headerOptionsEnd
     },
-    plugins: [daygridPlugin, listPlugin],
+    plugins: [daygridPlugin, listPlugin, timeGridPlugin],
     initialDate:  Date.now(),
     locale: language,
     dayMaxEvents: true,