How to add missing fullcalendar features

Hi
i would like to know if it’s possible to add more features to the calendar based on fullcalendar docs.
I would like for example to have the hours slots in week and day view,
The fullcalendar website say:

A TimeGrid view displays one-or-more horizontal days as well as an axis of time, usually midnight to midnight, on the vertical axis. The two predefined TimeGrid views are the **timeGridWeek** and **timeGridDay** views. They can be initialized in an [ES6 setup](https://fullcalendar.io/docs/initialize-es6) like so:

```
import { Calendar } from '@fullcalendar/core';
import timeGridPlugin from '@fullcalendar/timegrid';
...
let calendar = new Calendar(calendarEl, {
  plugins: [ timeGridPlugin ],
  initialView: 'timeGridWeek'
});
...
```

Or you can choose to initialized the TimeGrid views [as a global bundle](https://fullcalendar.io/docs/initialize-globals):

```
<link href='fullcalendar/main.css' rel='stylesheet' />
<script src='fullcalendar/main.js'></script>
<script>
...
var calendar = new FullCalendar.Calendar(calendarEl, {
  initialView: 'timeGridWeek'
});
...
</script>
```

How can I do that in wappler?
Do I need to create a custom javascript file?
What I would like is to add missing featuresin wappler from fullcalendar documentation.
The last version of full calendar is 5.6.0 but the one in wappler is 4.4.2. It is possible to update?

Thanks

Someone have an Idea?

The timeGridWeek view is selectable in the calendar. The last version 5.6.0 is not fully compatible with the 4.4.2 version, we can have a look if we could create a version 2 of our extension with the 5.6 version.

2 Likes

Thanks Patrick for your help.
But in general, how can I integrate some others features that are not in Wappler? Example, the resource scheduler or external dragging features?
Thanks again

You can’t extend the App Connect component, but you could have your own custom script to create the calendar and communicate with the App Connect data, there are several posts here in the forum that explain how to access that data from your own custom script.

Ok so I need to use a custom calendar js file based on fullcalendar specs and then initialize it In the page, without using the wappler component, right? The interaction with app connect is made on this custom js file.
I will try this way and let you know.
Thanks

Hi Patrick

I have a working calendar now, but i cannot fetch events. This is the code I use:


I tryed with POST and GET but nothing.
I read posts that says that I can access to app connect with dmx.parse but I dont know hot to use it in this case.
Could you please provide me an example?
Thanks for your help

The calendar expects the events in a specific format, you have to make sure the server connect action returns it correctly. Check with devtools in the browser if there are any errors and check in the network tab if the call to listevents.php was successful and what it returns.

I think this covers what you’re after:

Critical thing is to add a response step to the server connect action and set it’s value as the query/repeat you want as the output:

From there I don’t think it matters if you type the url directly into your js script, or use dmx.parse (though if you want dynamic variables in your url you may have to use dmx.parse).

For info I use:

events: dmx.parse("varCalendarEvents.value"),

where varCalendarEvents.value is the url (with any dynamic parameters etc) set in the page. This just means I can use the same js calendar script across different pages more easily by setting the variable within the relevant page.