How do you use this plugin?

[FlaminWrap]

I have tried mapping a date field and a text field to the calendar, I have tried using static values, but nothing appears in the calendar.

Here is a screenshot showing the calendar and the console which shows the data being passed to it.

Here is an export of the test app Calendar Test-export-1668985189757.tar.gz

Can someone explain how to get events into the calendar or an app demonstrating it working?

[mp-strachan]

Anyone had any luck getting this to work? I've spent the last few hours trying to get it going and can't get any data to display.

[rose111data]

Same here, unfortunately. 😢 I've tried both internal and external data connectors, getting fancy with repeaters. I cannot get it to show anything at all.

[marblekirby]

Hi all, apologies for slow replies on my behalf, just tested this and it is working. I will try prioritise creating some documentation for this plugin.

Hopefully my short tutorial can help yous out, and also help me improve how my calendar plugin works :)

So, my setup using mysql (works with other databases that i've tested with)

1. Create a mysql database, with table calendar_events that contains atleast a column for event name and event date. This can also be a query or whichever you can load into a data provider in budibase

2. Create a new budibase app and load your calendar plugin (I am running in a container)

3. In data, Add MySql data connector to Budibase, withmy connection settings

4. In Design, add a data provider to your page, set the data

5. Within the data provider, add the calendar component

In calendar,

• set your Event date field mapping to the column name of the field containing your date data, e.g. date in my example. Then - set your Event title field mapping to the column name of the field containing your name data, e.g. name

I assume this is the stage everyone makes it before getting confused of my implementation. Perhaps I need to update how this works (suggestions welcome)

[rose111data]

In calendar,

* set your `Event date field mapping` to the column name of the field containing your date data, e.g. `date` in my example. Then - set your `Event title field mapping` to the column name of the field containing your name data, e.g. `name`

I assume this is the stage everyone makes it before getting confused of my implementation. Perhaps I need to update how this works (suggestions welcome)

This was exactly it! It did not occur to me to simply type the name of the column in. Thank you! It's a wonderful plugin. 🥇

[marblekirby]

Not sure if thats the conventional way to handle this type of mapping, but it worked well for my use cases. Please star the repo if you like the plugin. I will be adding features again once hopefully this weekend 🤞

[codechrl]

is there any catch for using budibase db? been trying to repro your tutorial but got no success here

here's my table and here's the design

[andreipopovici]

I have the same problem, cannot get this to work after following the steps in this issue, also using a Budibase DB table as the data provider.

My column names have spaces, if that helps (or hurts).

I assume we cannot use a Formula column that returns a Date() instead of an existing table column? My use case is simple: displaying upcoming birthdays (this year) based on date of birth.

[ggffggg00]

I had the same problem, but managed to fix it.

After performing all the steps described above, the dates were not displayed. In the debugger, I found that during the loading of the component, the array of rows in the data provider is empty. In budibase designer this could be temporarily solved by dragging the component from the data provider to the parent container, and then returning it back. After these actions, events from the table appeared in the calendar.

However, the issue on the published application was fixed in a different way: I created the following condition on calendar component and everything works great.

Conditions can be added here:

[andreipopovici]

Can confirm, the solution above helped get the calendar working.

Now to add custom CSS to make it match the current Budibase theme!

[JoramQ]

The solution is indeed a work around for the problem. I'm not an expert in Svelte so I don't know if my fix is the best way to do this. The variable allItems is not reactive, so only if the dataProvider is loaded before the allItems are filled the content will be shown. The solution is to make allItems reactive and call initContent() when its loaded. Line 47 Component.svelte

$: allItems = dataProvider?.rows?.map(x => { 
        let d = new Date(x[dateKey]);
        return {
            title: x[titleKey],
            date: d,
            allDay: allDayKey && x[allDayKey],
            time: formatAMPM(d)
        }
    }) ?? [];
$: allItems && initContent();